echarts图表的一些小技巧（持续更新，自用）

1.取消echarts右上角功能按钮下载按钮

 

知己删掉或者注释掉这里

2.echarts统计颜色设置

如果不设置会安默认的颜色来

 

3.设置头部标题位置

 

4.折线堆叠导致的数据显示失真与Y轴坐标不对应

只需要将series下的数据 项的stack删除

 5.Y轴头部文本（单位）添加 以及样式

样式

 6.主轴（XY轴）轴线设置 和辅助线设置 和 轴线文字配置

xAxis参数下

 

XY轴辅助线设置

 

文字样式配置

7.当图表参数发生变化时，图表变化出现显示问题（第一次的数据和更新的数据叠加）

 在图表配置的末尾 

第二个值true是让数据option发生变化时，新数据直接覆盖老数据，而不是合并（false）

 

8.双y轴设置
效果图

主要实现代码

参考实例

series项下面的对象中的 yAxisIndex: 1,

 图表y轴的序号 这样数据（折线）才能和y轴对应 我这边猜测默认的那根y轴的 yAxisIndex 是0

                      obj={
                        name: name,
                        type: 'line',
                        // 图表y轴的序号 这样数据（折线）才能和y轴对应 我这边猜测默认的那根y轴的 yAxisIndex 是0
                        yAxisIndex: 1,
                        // 平滑曲线
                        smooth: true,
                        data: arr,
                      }

yAxis下再多添加一个配置对象

{
            name: name,
            type : 'value',
            // y轴上的刻度
            axisLabel: {
              formatter: '{value}'
            },
          }

9.仪表盘渐变颜色

axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                // color: [ //表盘颜色
                //   [0.1, "#d6ffab"],//0-25%处的颜色
                //   [0.25, "#cde9d1"],//51%-75%处的颜色
                //   [0.4, "#000000"],
                //   [0.55,"#fff1f1"],
                //   [0.7, "#000000"],
                //   [0.85, "#fff1f1"],
                //   [1, "#000000"],
                // ],

//两种方式 上面是指定区域颜色 下面的是渐变色
                color: [
                  [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.1,
                      color: "#deebe3"
                    },
                    {
                      offset: 0.6,
                      color: "#88b2d4"
                    },
                    {
                      offset: 1,
                      color: "#1845c9"
                    }
                  ])
                  ]
                ],
                width: 20//表盘宽度
              }
            },

 

不定时更新