react中eCharts使用小结

首先看一下效果

 注：以上结果为假数据，本文章主要介绍实现的步骤和方法。主要以折线图为例，其他的还有：

饼图：

 柱状图：

 

步骤如下：

安装依赖

npm install echarts --save

 

文件中引入

//全部引入
import * as echarts from 'echarts';

//按需引入
import 'echarts/lib/chart/bar'; //柱状图
import 'echarts/lib/chart/line'; //折线图
import 'echarts/lib/chart/pie'; // 饼图

 

创建eCharts展示区域

  render() {
    return (
      <div id="container" style={{ width: '100%', height: 400 }}></div>
    )
  }

 

 初始化eCharts

    var myChart = echarts.init(document.getElementById('container'))

 

 配置eCharts样式与数据

    myChart.setOption({
      tooltip: {
        trigger: "axis"
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          dataView: {},
          magicType:{},
          restore:{},
          dataZoom:{},
        }
      },
      xAxis: {
        type: 'category',
        data: a,
      },
      yAxis: {
        type: 'value',
      },
      series: arr,
      legend: {
        show: true,
      }
    })

setOption方法可以进行图表的很多配置，挑几个介绍一下

tooltip：鼠标移入图表时的提示框

        trigger：有“axis”和“item”两个值   下图是两个值的区别

toolbox：工具栏

可进行    下载为图片     展示为表格形式   等操作

 

xAxis yAxis：配置XY轴

说实话这个搞得不是太懂

推荐文章：https://www.cnblogs.com/lyt598/p/10695086.html

 series：可视化数据

 必须的字段：

        name:"温度"， //   鼠标移入提示框显示的名字            

        type:"line"     // 线性样式 , 

         data:[...]  //本条数据的值所展示的值

本例中数据如下

 

legend:图例

注：所有属性都有 show：true ||  false    改属性是否展示      默认为true

最后附上eCharts地址：https://echarts.apache.org/zh/index.html