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 各种图标的结构名词：

说明 ： echarts 官网的 API 实在是太多了，往往根据 需求，很难找到 哪个 API 设置这个需求的。只要是因为不了解 echarts 中图表的  结构。

1、饼图：

 

 

 

 

 

 

---

实践总结：

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

　　个人理解：图表 结构 根据 数据 形成 的结构，他们 相关的 设置 属性 都在 series 里面。如：label、labelLine、itemStyle 等。

　　　　　　   而 图例、标题 不是 因为 数据 而 出现的。柱状图 也有图例、和 标题。

二、echarts中 series 直接 下一级 属性 往往 是全局 的属性。如果 全局的设置 对某一个不适合，可以单独 在那一项的 data 中单独设置。如：

 　　series.itemStyle 和 data里面的 series.data.itemStyle 是一样的。他们可以看出是一个继承的关系，series.data.itemStyle 没有 设置，就会继承上面的全局的设置。

 

 

 

 

 

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

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

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