echarts（4.0版本）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、echarts 开发文档：https://echarts.baidu.com/echarts2/doc/doc.html 或 https://echarts.baidu.com/option.html#series-map.type （官网）

或 https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html(w3C 教程)

2、echarts属性详细介绍： https://blog.csdn.net/zx11_11/article/details/82854537

3、ECharts Map 属性详解： https://www.cnblogs.com/20gg-com/p/6697701.html

4、数据可视化echarts.js使用指南：https://www.cnblogs.com/st-leslie/p/5771241.html

个人：地图、离散型的图和一般规则的数据图标是有区别的。

echarts 的 API

一、echarts.init：

1、echarts.init 返回一个 echartsInstance 对象。

二、echartsInstance 对象：通过 echarts.init 创建的实例

1、echartsInstance.setOption：

a、初始设置和更新都是通过这个API 实现的。

b、setOption 会合并新的参数和数据。所以更新数据时，不需要全部配置项设置，只要把需要更新的配置设置下就可以了。

var option = myChart.getOption();
option.visualMap[0].inRange.color = ...;
myChart.setOption(option);
// 或 (官方推荐下面这种)
myChart.setOption({
visualMap: {
inRange: {
color: ...
}
}
})

2、echartsInstance.getOption：

注意：返回的 option 每个组件的属性值都统一是一个数组，不管 setOption 传进来的时候是单个组件的对象还是多个组件的数组。

3、echartsInstance.resize：改变图表尺寸，手动调用方法，改变图标尺寸。

4、echartsInstance.getWidth 和 echartsInstance.getHeigh：获取 ECharts 实例容器的宽度和高度。

5、echartsInstance.getDom：获取 ECharts 实例容器的 dom 节点。

6、echartsInstance.clear：清空当前实例，会移除实例中所有的组件和图表。

配置项`setOption`

一、echarts 的配置项中的 series 可以说是，配置的入口了。 series 可以是一个数组，一个数组对应一个系列。（一个系列就像是画了一层视图）。

1、type：系列列表。每个系列通过 type 决定自己的图表类型。

2、coordinateSystem：该系列使用的坐标系，可选（有的图是不需要坐标系的）。（如果设置了坐标系，就要在配置项上添加改坐标系组件。）

myChart.setOption({
calendar: { // 配置 calendar 相关的属性
height:360,
cellSize: [80, 13],
range: ['2017-06-02', '2017-09-23'],
yearLabel: {show: false}
},
series: {
type: 'scatter',
coordinateSystem: 'calendar', // 这个系列使用了 calendar坐标系，上面就要配置 calendar 坐标系组件的的相关属性。
}
});

3、data：系列中的数据内容数组。数组项通常为具体的数据项。

如果没有配data数据，则这种类型的图就不会显示。但是坐标系配了，坐标系还是会显示的。

4、label：图形上的文本标签。文本标签具体怎么配，参考官方文档

5、symbol：标记的图形。即这种类型的图（如，散点图），以什么图形表示。（如圆，正方形，月亮或者自定义的图）

6、symbolSize：上面标记图形的大小。

二、echarts 组件： echarts 的组件在webpack 中使用，必须要把组件的模块引入进来。各个模块引入路径：https://github.com/apache/incubator-echarts/blob/master/index.js

1、calendar：日历坐标系组件。

2、tooltip：提示框组件。（比如，鼠标悬浮显示的提示框）

3、legend：图例组件。就是表明，某种颜色图表表示什么含义。这个和下面的，数据视觉映射组件是不同的，两个不同的概念。

4、visualMap：数据视觉映射组件。就是图表上，不同的值显示不同的颜色。通过下面的这种组件可以把需要的数据范围通过颜色显示出来。

5、

三、数据更新：https://www.cnblogs.com/LWWTT/p/11097897.html （亲测有效）

1、echarts 是纯 js实现的，所以echarts的数据更新，不需要操作DOM。只要重新调用下 setOption 方法就可以了。

//初始创建
var myChart = echarts.init(document.getElementById('main'));
var option = {........}
myChart.setOption(option);function refreshData(data){
//刷新数据
var option = myChart.getOption();
option.series[0].data = data; // 这里series下哪个data改变，根据实际情况来定
myChart.setOption(option); // 内部设置好了，只要调用 setOption 就是更新视图了。
}
refreshData(data)；//自定义刷新的时候调用

实践总结：

一、

感悟：看echarts的官网，让我看到了使用中文名作为对象属性名的。然后自己测试了下，可以使用中文作为js 的变量名的。

https://segmentfault.com/q/1010000000670865 （软件编程是一个比较国际化的事，所以不建议使用中文变量名。但是特定的地方还是可以用的，比如echarts的中国地图）

echarts就是通过中文属性名实现的把所有的地址和坐标对应放在一个对象中的。

正文