Echarts 入门之基础使用（部份 API）

在 react 中使用折线图：

1.安装：npm i echarts

2.引入模块：

**** 全部引入 ****

import echarts from "echarts";

**** 按需引入 ****

// 引入 ECharts 主模块：import echarts from 'echarts/lib/echarts';
// 引入折线：import 'echarts/lib/chart/line'; （按需引入）
// 引入饼状图：import 'echarts/lib/chart/pie'; （按需引入）
// 引入柱状图：
// 引入提示框和标题组件：
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

3.获取元素，绘制，刷新，清除

// 获取画布(需要有固定宽高，因为echarts实质就是canvas)
this.chartDom = document.getElementById(this.props.domId);

// 初始化 echarts
this.myChart = echarts.init(this.chartDom);

// 1.绘制图形 2.需要局部刷新 echarts 的时候（不需要先清除数据，再绘制图形，可以直接绘制，起到局部刷新）
this.myChart.setOption(option);

// 清除数据
this.myChart.clear();

// 释放图表，销毁对象并设为null (慎用，会引起 echarts 的 Cannot read property 'getWidth' of null ,的报错）
this.myChart.dispose();

4.绑定事件

　详细事件绑定：this.myChart.on('click', function (params) {...

5.查看版本

　　之前使用雷达图的时候，有些电脑上鼠标移到图形上，没有触发 tooltip ，也没有高亮反应，折腾了一天，发现是版本不一致。

　　无反应的是 4.2.0 有反应的是 4.5.0，下面提供检查版本的方法。

　　console.log(echarts.version);

　　然后，配置上修改版本后，npm i 一下更新版本。