@21epub/matomo-echarts-components 中文文档教程

Question

@21epub/matomo-echarts-components

matomo 的 echarts 组件

Install

npm install --save @21epub/matomo-echarts-components

Example

import React from 'react'
import { AppProvider } from '@21epub/matomo-echarts-components'
import Example from './Example'
import '@21epub/matomo-echarts-components/dist/index.css'
import 'antd/dist/antd.css'

const App = () => {
  return (
    <AppProvider>
      <Example />
    </AppProvider>
  )
}

export default App

Usage

Summary

import { AppContext, Summary } from '@21epub/matomo-echarts-components'

const Example = () => {
  return <Summary url='url' createTime='2020-10-20' />
}

export default Example

• url : string - data url;
• createTime : string - creation time of the item;

OrgSummary

import { AppContext, OrgSummary } from '@21epub/matomo-echarts-components'

const Example = () => {
  return <OrgSummary url='url' options={options} createTime='2020-10-20' />
}

export default Example

• url : string - data url;
• options : Options - user's option,get from AppContext component;
• createTime : string - creation time of the item;

Filter&DetailFilter&TrendDetailFilter

import {
  AppContext,
  Filter,
  DetailFilter,
  TrendDetailFilter
} from '@21epub/matomo-echarts-components'

const Example = () => {
  return (
    <div>
      <Filter isOrgVersion />
      <DetailFilter />
      <TrendDetailFilter />
    </div>
  )
}

export default Example

• Filter: When user changes the options, Filter will change the options state and make other components contain the same state.
• DetailFilter: Same as Filter but used in some detail page without source option.
• TrendDetailFilter: Like Filter and DetailFilter,but contains more option button which can select the data source.
  

EchartsMap

import { AppContext, EchartsMap } from '@21epub/matomo-echarts-components'

const Example = () => {
  const { state: options } = useContext(AppContext)

  return (
    <EchartsMap
      url='url'
      options={options}
      detailLink='#'
      cardTitle='title'
      createTime='2020-10-20'
      isDetailVersion
      isOrgVersion
    />
  )
}

export default Example

• url : string - data url;
• options : Options - user's option,get from AppContext component;
• detailLink? : string - set the detail link;the default value is '#';
• cardTitle : string - set the card title;
• createTime : string - creation time of the item;
• isDetailVersion? : boolean - set the component version;if it is detail version,it will set another style;the default value is false;
• isOrgVersion? : boolean - set the component version;if it is org version,it will set another request;the default value is false;
  

Barchart

import { AppContext, Barchart } from '@21epub/matomo-echarts-components'

const Example = () => {
  const { state: options } = useContext(AppContext)

  return (
    <Barchart
      url='url'
      options={options}
      detailLink='#'
      cardTitle='title'
      createTime='2020-10-20'
      isDetailVersion
    />
  )
}

export default Example

• url : string - data url;
• options : Options - user's option,get from AppContext component;
• detailLink? : string - set the detail link;the default value is '#';
• cardTitle : string - set the card title;
• createTime : string - creation time of the item;
• isDetailVersion? : boolean - set the component version;if it is detail version,it will set another style;the default value is false;
  

Promote

import { AppContext, Promote } from '@21epub/matomo-echarts-components'

const Example = () => {
  const { state: options } = useContext(AppContext)

  return (
    <Promote
      url='url'
      options={options}
      detailLink='#'
      cardTitle='title'
      createTime='2020-10-20'
      isDetailVersion
    />
  )
}

export default Example

• url : string - data url;
• options : Options - user's option,get from AppContext component;
• detailLink? : string - set the detail link;the default value is '#';
• cardTitle : string - set the card title;
• createTime : string - creation time of the item;
• isDetailVersion? : boolean - set the component version;if it is detail version,it will set another style;the default value is false;
  

Trend

import { AppContext, Trend } from '@21epub/matomo-echarts-components'

const Example = () => {
  const { state: options } = useContext(AppContext)

  return (
    <Trend
      url='url'
      options={options}
      detailLink='#'
      cardTitle='title'
      createTime='2020-10-20'
      isDetailVersion
      isOrgVersion
      extra={[]}
    />
  )
}

export default Example

• url : string - data url;
• options : Options - user's option,get from AppContext component;
• detailLink? : string - set the detail link;the default value is '#';
• cardTitle : string - set the card title;
• createTime : string - creation time of the item;
• isDetailVersion? : boolean - set the component version;if it is detail version,it will set another style;the default value is false;
• isOrgVersion? : boolean - set the component version;if it is org version,it will set another request;the default value is false;
• extra? : React.ReactNode[ ] - set the extra content;
  

TransformTrend

import { AppContext, TransformTrend } from '@21epub/matomo-echarts-components'

const Example = () => {
  const { state: options } = useContext(AppContext)

  return (
    <TransformTrend
      optionsUrl='url'
      summaryUrl='url'
      options={options}
      createTime='2020-10-20'
      extra={[]}
    />
  )
}

export default Example

• optionsUrl : string - url to get options;
• summaryUrl : string - data url;
• options : Options - user's option,get from AppContext component;
• createTime : string - creation time of the item;
• extra? : React.ReactNode[ ] - set the extra content;
  

Detail

import { AppContext, Detail } from '@21epub/matomo-echarts-components'

const Example = () => {
  const { state: options } = useContext(AppContext)

  return (
    <Detail
      url='url'
      options={options}
      createTime='2020-10-20'
      detailType='barchart'
      extra={[]}
    />
  )
}

export default Example

• url : string - data url;
• options : Options - user's option,get from AppContext component;
• detailType : string - set the type of detail data;can only set to 'map','mapOrg','promote','barchart';
• createTime : string - creation time of the item;
• extra? : React.ReactNode[ ] - set the extra content;
  

CaseDetail

import { AppContext, CaseDetail } from '@21epub/matomo-echarts-components'

const Example = () => {
  const { state: options } = useContext(AppContext)

  return (
    <CaseDetail
      url='https://yapi.epub360.com/mock/76/v3/api/tongji/org/%7Borg_id%7D/top10/'
      options={options}
      createTime='2020-10-20'
      extra={[]}
    />
  )
}

export default Example

• url : string - data url;
• options : Options - user's option,get from AppContext component;
• createTime : string - creation time of the item;
• extra? : React.ReactNode[ ] - set the extra content;

License

MIT © garry