echarts易混总结

echarts 配置项里 normal 属性的含义是什么？

如题，官方文档并没有对 normal 做出解释，但网络上的诸多例子中它却频频出现，本人在测试中恰好遇到了它。
有人回答说：“normal 是图形在默认状态下的样式,加上这个属性和不加这个属性样式都是一样的”，但是他们只验证了 label.normal 无需设置。而我在测试折线图线条渐变时，不设置 normal 是达不到效果的。
参考配置：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        itemStyle: {
            // 必须在 normal 里设置
            normal: {
                lineStyle:{
                    color:{
                      colorStops: [{
                          offset: 0, color: 'red' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'blue' // 100% 处的颜色
                      }],
                    }
                },
            },
            // 直接设置会失效
            // lineStyle:{
            //     color:{
            //       colorStops: [{
            //           offset: 0, color: 'red' // 0% 处的颜色
            //       }, {
            //           offset: 1, color: 'blue' // 100% 处的颜色
            //       }],
            //     }
            // },
        },
    }]
};

这个配置确实被废弃了，可以生效是为了向下兼容:

写的时候最好看你使用的版本，然后按照文档来写，按照新版的，直接在itemStyle或lineStyle中设置color就可以了:

维度名 纬度名的书写位置

维度可以有单独的名字，便于在图表中显示。维度名（ dimension name ）可以在定义在 dataset 的第一行（或者第一列）。

  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  },
例子中，'score'、'amount'、'product' 就是维度名。从第二行开始，才是正式的数据。dataset.source 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行（列）就是维度，或者 dataset.sourceHeader: false 表明第一行（列）开始就直接是数据。

  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
      
这个例子汇总source的第一行才是纬度。
常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（ series ）对应到“列”的时候，那么每一列就称为一个“维度（ dimension ）”，而每一行称为数据项（ item ）。反之，如果我们把系列（ series ）对应到表行，那么每一行就是“维度（ dimension ）”，每一列就是数据项（ item ）。

 dimensions: ['product', '2015', '2016', '2017'],
     `这里有四个纬度，默认把第一个纬度映射到x轴，后面纬度映射到y轴。`

理解话语

这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。

在第一个直角坐标系中，是映射到了dataset 的每一行了，不过映射了三回而已。

map 系列

• 配置了 map的 series属性点击了item，item会高亮，配置 geo 或则series都会 显示出地图效果
• 通过给 map的 series 的 data 属性设置 我们写成的 行政区划code数组，注意数组里对象 的属性为 name 和 code， 注意name属性名字不可以修改，修改需要参考配置文件，name属性是与匹配 地图json里的 每个区域的名字匹配
• 可以给series 里的 data 数组的某一项单独设置itemStyle， 然后再mapChart 触发 ‘click’ 事件时候，然后把这个itemStyle 对象置为 {} ，可以做到局部高亮map的某个region； 或者使用 dispatchAction({ type: ‘highlight’, name: “” }) 搭配 dispatchAction({ type: ‘downplay’,name:“”}) 也可以实现

series

在series 里的item配置 label等属性会覆盖全局设置的label属性

设置pie的label全部显示

			series: [
			 label: {
              width: 100,
              bleedMargin: -30,
              }
			]

//通过设置bleedMargin 为负值

地图打点经纬度需要精确到8位才能显示

精确到8位才能显示，此外还需要geo声明

data: [
        {name: '123',
        type: 'op',
        value:[120.85293436, 30.38103345,'id123123']},
        {name: '123',
        type: 'op',
        value:[120.21551, 30.25308,'id123123']}
      ],

series 中type为map的系列可以通过geoIndex这个属性来关联geo

关联后，就不会出现地图显示两个问题了，但是series 中type为map的系列itemStyle等属性会失效

          {
            name: 'huzhou',
            type: 'map',
            zlevel: 2,
            mapType: 'huzhou', // 自定义扩展图表类型
            geoIndex: 0, //，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了
            // top: 100,
            labelLine: {
              show: true
            },
            },
            data: this.mapData
          },

给地图打点需要写出geo

echarts 对提示框数据（tooltip）使用 formatter 进行修改后，前面的小圆点不见了

通过打印 formatter 的 params 参数可以看到有个 marker 属性描绘的是小圆点的标签和样式！所以在下面代码高亮位置加入 params[i].marker 即可正常显示。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'line', // 默认为直线，可选为：'line' | 'shadow'
  },
  formatter(params) {
    let str = '';
    str += `<div>${params[0].name}</div>`;
    for (let i = 0; i < params.length; i += 1) {
      str += `${params[i].marker} <span>${params[i].seriesName}</span> : <span>${params[i].data ? Math.round(params[i].data) : '0'
      }</br>`;
    }
    return str;
  }
}

柱状图堆叠

series里需要堆叠的项目 的 stack设为相同的·值