echarts表格基础引用

在react中如何引入echarts？

首先使用node下包：

npm install echarts

 在文件中引入；

                     import * as echarts from 'echarts';

                     import { useEffect ，useRef} from 'react'

声明一个数据

                  let dataref=useRef(null)

从echarts表格中拿到数据：

                 let option={

    tooltip: {

      trigger: 'axis'

    },

    legend: {

      icon:'circle',

          textStyle: {

            color: '#fff'

         },

       

      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']

    },

    toolbox: {

      feature: {

        saveAsImage: {}

      }

    },

    xAxis: {

      type: 'category',

      boundaryGap: false,

      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

    },

    yAxis: {

      type: 'value'

    },

    series: [

      {

        name: 'Email',

        type: 'line',

        stack: 'Total',

        data: [120, 132, 101, 134, 90, 230, 210],

        symbol:'none',

        smooth:true

      },

      {

        name: 'Union Ads',

        type: 'line',

        stack: 'Total',

        data: [220, 182, 191, 234, 290, 330, 310],

        symbol:'none',

        smooth:true

      },

      {

        name: 'Video Ads',

        type: 'line',

        stack: 'Total',

        data: [150, 232, 201, 154, 190, 330, 410],

        symbol:'none',

        smooth:true

      },

      {

        name: 'Direct',

        type: 'line',

        stack: 'Total',

        data: [320, 332, 301, 334, 390, 330, 320],

        smooth:true,

        symbol:'none',

      },

      {

        name: 'Search Engine',

        type: 'line',

        stack: 'Total',

        data: [820, 932, 901, 934, 1290, 1330, 1320],

        smooth:true,

        symbol:'none',

      }

    ]

  };

在模拟声明周期中初始化echarts

 useEffect(() => {

    var myChart = echarts.init(dataref.current);

       myChart.setOption(option)

}

在标签上绑定一个ref

            <div className='lm2' ref={dataref}> </div>

给  im2 这个classname设置宽高：

            .lm2{

    width: 100%;height: 100%;

 }

至次基础版的ex表格就制作完成