一种echart的引入流程

内有三个问价

第一个文件叫echart.tsx

第二个文件叫index.module.scss

第三个文件叫index.tsx

echart文件里面有echart图的内容部分

最简单的内部结构有一个ReactEcharts的import

扫描二维码关注公众号，回复： 14818589 查看本文章

一个data的interface接口

interface Props {
  data: any
}

再下面就是一个函数组价，叫Echart

这个组件的props就是上面接口里限制过类型的data之类的

const Echart: React.FC<Props> = ({ data }: any) => {

}

这里的data是第三个文件index.tsx里面引入echart的时候放的实参

可以这样子引

 <Echart
      data={
   
   {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }}
    />

然后在echart里面创建一个函数，我们可以叫它getChartOption

const getChartOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: data.series[0].type
      }
    ]
  }

这段定义的代码里面type就是使用index里面传进来的data值

再在同一级的地方return那个内置的Echart的函数

类似这样

return <ReactEcharts option={getChartOption} style={
   
   { height: '100%', marginLeft: 10 }} />

可以看到这里的option的值就是之前包含配置文件的内容

第二个文件就是index.module.scss

这里就是样式的布置