echarts（4.0版本）

一、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 教程)

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

三、ECharts Map 属性详解： http://www.javashuo.com/article/p-snskbnvg-ch.html

四、数据可视化echarts.js使用指南：http://www.javashuo.com/article/p-appjhxwp-gu.html

我的：地图、离散型的图和通常规则的数据图标是有区别的。

---

 学习echarts就是学习 option 配置项

一、backgroundColor ：整个canvas背景色，默认无背景。https://www.echartsjs.com/option.html#backgroundColor

二、title ：标题组件，包含主标题和副标题。 https://www.echartsjs.com/option.html#title

　  标题组件 中 包括对这个标题的文字、颜色、字体等属性的设置。

三、tooltip ：提示框组件。https://www.echartsjs.com/option.html#tooltip

四、visualMap ：是视觉映射组件。 https://www.echartsjs.com/option.html#visualMap

　　如：地图左侧小导航图标

五、series ：系列列表。每一个系列经过 type 决定本身的图表类型 https://www.echartsjs.com/option.html#series

(series 里面的配置就是数据，在data里面配置，好比地图，一个地点上配置相应的数据。若是有多组数据，那就有多个对象的数据)

　　5.一、data对象里面的数据对应地图每一块的数据（name和value）。框架内部设置好了，name的值会和地图上对应的哪个匹配上。

 　  5.二、markPoint 对象中的 data 值 有 3种坐标系的表示法：https://www.echartsjs.com/option.html#series-map.markPoint.data

　　　　具体的地理坐标，能够经过 坐标拾取器 获取。（echarts地图中是内置了代理坐标的）

markPoint: {
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
              }, {
                offset: 1, color: 'blue' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          },
          data: [
            {
              name: '某个屏幕坐标',
              coord: [115.857963, 28.683016]
            }
          ]
        },

View Code

 六、geo ： 地理坐标系组件。https://www.echartsjs.com/option.html#geo

---

 echarts 视频听课笔记 （echarts 3.0）

1、常见图形组件 ： 

• 标题、工具栏、图例、提示框 。。。
  1. visualMap 视觉映射组件，在echarts 2.0中是 dataRange 配置项。 https://echarts.baidu.com/option.html#visualMap (目前知道的，地图映射的数据，是该地区的数据总和)
• 坐标轴
  • X轴
  • Y轴
• markline 标记线：（通常都是在series 下面的配置）
  • 常见标记：最大值、最小值、平均值。
• markpoint 标记点：（通常都是在series 下面的配置）
  • 常见标记：最大值、最小值、平均值、以及任意位置的标记点。

2、柱状图：

3、折线图：

4、

 

---

实践总结：

 1、地图

一、series.label 地图上各个板块对应省份的中文名称的设置。（normal，正常、未触发是否显示；emphasis，鼠标滑动到对应的板块，是否显示）

        series:{
            type:'map',
            name:'全国',
            map:'china',
            label:{
                normal:{
                    show:true // 正常显示时，显示省份名称
                },
                emphasis:{
                    show:true // 鼠标滑动上去时，显示省份名称
                }
            }
        }

View Code

二、series.itemStyle 地图区域的多边形 图形样式。就是地图上全部板块之间，边框线条的配置。（如，颜色，粗细等）

三、series.markPoint 标注。能够设置图形或文本进行标注。

1. itemStyle 标注的样式。
2. data[i].label.normal.position  标注中文字，相对于标注图形的位置。

    markPoint: {
                   symbol: 'circle',
                   symbolSize: 35,
                   itemStyle: {
                       normal: {
                           color: 'red'
                       }
                   },
                   data: [
                       {
                           name: '某个坐标',
                           coord: [115.892151, 28.676493],
                           value: '100',
                           label:{
                               normal:{
                                   show:true,
                                   position:'top'
                               }
                           }
                       }
                   ]
               }

   View Code
3. label 标注的文本样式。(series[i].markPoint.label这里的label是使用的标注文本的样式；单独的label标注设置在series[i].markPoint.data[i].label里，即data下的label)

 

 

 

 

感悟：看echarts的官网，让我看到了使用中文名做为对象属性名的。而后本身测试了下，可使用中文做为js 的变量名的。

　　https://segmentfault.com/q/1010000000670865 （软件编程是一个比较国际化的事，因此不建议使用中文变量名。可是特定的地方仍是能够用的，好比echarts的中国地图）

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