日常中echart功能调整 小 心得

饼图心得

今天涉及的bug里面有要改饼状图表中文字和图片选中时改变样式的要求,饼图的初始化中有,贴出伪代码。

先初始化一个图表：

		const echarts = this.$echarts.init(
          document.getElementById('echartsId')
        )
        echarts.setOption(this.echartOption)

以下是配置部分伪代码:

主要是itemStyle下的emphasis里面控制着选中后的变化,normal里的则是一般情况下的样式;

echartOptions: {
        title: {
          text: '总名字'
        },
        graphic: [
        	......
        ],
        series: [
          {
            ......
            
            data: [
            ......
            ],
            itemStyle: {
              emphasis: { // 选中时
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '选中时颜色',
                label: {
                  textStyle: {
                    color: '选中时颜色',
                    fontSize: '选中时文字大小'
                  }
                }
              },
              normal: {
                color: function (params) {
                  // 自定义颜色
                  var colorList = [                    '自定义颜色1',                    '自定义颜色2',                    '自定义颜色3'                  ]
                  return colorList[params.dataIndex % 3]
                },
                label: {
                  formatter: '{b}\n{c}位', // 这里是数据展示的时候显示的数据
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    fontSize: 18
                  }
                }
              }
            }
          }
        ]
      }

也可以直接在外围的label中的emphasis加,同样生效的：

echartOptions: {
        title: {
          text: '总名字'
        },
        graphic: [
        	......
        ],
        series: [
          {
            ......
            
            data: [
            ......
            ],
            itemStyle: {
              emphasis: { // 选中时
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '选中时颜色'
              },
              normal: {
                color: function (params) {
                  // 自定义颜色
                  var colorList = [                    '自定义颜色1',                    '自定义颜色2',                    '自定义颜色3'                  ]
                  return colorList[params.dataIndex % 3]
                }
              }
            },
            label: {
              normal: {
                formatter: '{b}\n{c}位', // 这里是数据展示的时候显示的数据
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                  // 数值样式
                  fontSize: 18
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#选中时颜色',
                  fontSize: 20
                }
              }
            }
          }
        ]
      }

总结: echart图表不过两种一起写会有效果覆盖,同样的冲突标签只有最后一种生效;基本上就是语意没有先后顺序,但是不能兼容同时出现的效果会覆盖。

柱状图心得

柱状图的要求是要改成层叠式加头部有总数的形式。

这个需求的层叠模式是echart本来就支持的就是在在配置参数变量echartOptions的series下添加多个类型为bar的且stack值相同的参数集对象便会自动层叠式展示，但是层叠式的头部总数这部分是没有正规的展示方法的，所以可以用透明折线图有参数值展示的效果进行叠加，达到层叠样式有总数的效果。

在配置参数echartOptions的series对象下加入总数隐形折线:

    this.echartOptions.series.push({
      name: '总计',
      type: 'line',
      symbol: 'none',
      lineStyle: {
        opacity: 0
      },
      label: {
        show: true,
        textStyle: {
          color: '#000000'
        }
      },
      data: [......]
    })

缩放图表会模糊

还有就是当我们发现缩放图表会模糊成为bug的时候，我们可以在init时加入生成类型的参数，生成svg矢量图，这样就可以不变模糊了。

代码逻辑：

    const echarts = this.$echarts.init(
        document.getElementById('echartsId'), null, { renderer: 'svg' }
    )