Echarts 折线图 渐变色 不堆叠

好记性不如烂笔头，记录下方便后续使用~~~

效果图：

注意点：
（1）hover 时，背景阴影、自定义提示内容

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow',
  },
  formatter: (params) => {
    console.log('params', params)

    // // 获取xAxis data中的数据
    let dataStr = `<div>
                    <p style="font-size:14px;font-weight:bold;color:#333;margin:0 0px 10px;">
                      ${params[0].name}XX总数 ? 个</p>
                </div>`
    params.forEach((item) => {
      // 获取图标(小圆点)颜色，并且自定义样式为正方形，即要改变小圆点，只需重写marker的html片段，并修改样式即可
      // 获取series中data
      // 获取seriersName
      console.log('item', item)
      dataStr += `<div>
        <div style="font-size:14px; color:#666; margin-top:10px;">
          <span style="display:inline-block;margin-right:0px;width:8px;height:8px;border-radius:4px;background-color:${item.color};"></span>
          <span style="margin-right:5px;">${item.seriesName}</span>
          <span>${item.data}个</span>
        </div>
      </div>`
    })
    return dataStr
  },
},

（2）一张图中多条折线，不堆叠：
series下的【stack: ‘总量’ 】要去掉，否则y轴数值就会相加，与正确数值不符，呈堆叠效果
（3）坐标轴的 name 属性更改位置：使用 padding

nameTextStyle: {
  padding: [0, 0, 0, -50], // 四个数字分别为上右下左与原位置距离
},

（3）去掉 hover 折线变粗效果（鼠标悬停在折线图上，折线变粗）
方法：设置emphasis.lineStyle和折线图本身lineStyle相同
（4）鼠标悬停在拐点上时，自定义拐点样式：
nomal 正常情况下，emphasis 鼠标hover状态时

itemStyle: {
  normal: {
    color: '#5393E7', //改变折线点的颜色
    lineStyle: {
      width: 2, //折线宽度
      color: '#5393E7', //改变折线颜色
    },
  },
  emphasis: {
    color: '#5393E7',
    lineStyle: {
      width: 2,
      color: '#5393E7',
    },
    borderColor: '#5393E7', //拐点边框颜色
    borderWidth: 6, //拐点边框大小
  },
},

（5）修改图示图标 为圆角矩形 icon: 'roundRect',

icon的配置及所代表图形：

icon	显示图形
circle	圆形
rect	矩形
roundRect	圆角矩形
triangle	三角形
diamond	菱形
pin	水滴
arrow	箭头
none	不显示图标

legend: {
  itemHeight: 4,
  itemWidth: 12,
  data: [
    {
      name: '巡检工单',
      icon: 'roundRect',
    },
    {
      name: '故障工单',
      icon: 'roundRect',
    },
  ],
  left: '200', // 距离左边
},

（6）更改 legend 图标和文字的距离：legend的图标和文字居中对齐
调整文字的距离位置padding，调整legend的位置 top 和 left
参考1：https://segmentfault.com/a/1190000013836680
参考2：https://blog.csdn.net/qq_34672907/article/details/83065909?spm=1001.2014.3001.5501

let lendData = [
  {
    name: '巡检工单',
    icon: 'roundRect',
    value: 40,
  },
  {
    name: '故障工单',
    icon: 'roundRect',
    value: 30,
  },
]

// 修改图示 图标 - 圆角矩形
legend: {
  itemHeight: 4,
  itemWidth: 12,
  data: lendData,
  top: -5, //legend距离上方
  left: '200', // 距离左边
  formatter: function (name) {
    var arr = ['{b|' + name + '}']
    return arr.join('\n')
  },
  textStyle: {
    rich: {
      b: {
        fontSize: 14,
        align: 'center',
        padding: [2, 0, 0, 0], //位置
        color: '#666',
        // lineHeight: 25,
      },
    },
  },
},

（7）改变折线区域的线条颜色和区域渐变色
线条颜色 设置itemStyle
区域渐变色 设置areaStyle

颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

注意：渐变色最好使用 rgba

series: [
  {
    name: '折线图1',
    type: 'line',
    //如果不想折线那么尖锐，可以加上smooth: true变为柔和曲线
    //smooth: true,
    //stack: '总量',
    symbolSize: 7, // 拐点大小
    areaStyle: {
      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: 'rgba(129,183,255, 1)',
        },
        {
          offset: 1,
          color: 'rgba(129,183,255, 0)',
        },
      ]),
    },
    itemStyle: {
      normal: {
        color: '#5393E7', //改变折线点的颜色
        lineStyle: {
          width: 2, //折线宽度
          color: '#5393E7', //改变折线颜色
        },
      },
      emphasis: {
        color: '#5393E7',
        lineStyle: {
          width: 2,
          color: '#5393E7',
        },
        borderColor: '#5393E7', //拐点边框颜色
        borderWidth: 6, //拐点边框大小
      },
    },
    data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
    zlevel: 11,
  },
]

完整实现：

<template>
  <!-- 不堆叠 -->
  <div id="treeChart" :style="{ height: '242px' }"></div>
</template>

<script>
export default {
  name: 'eCharts',
  data() {
    return {
      value: 60,
    }
  },
  mounted() {
    this.showChart()
  },
  methods: {
    showChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('treeChart'))

      var value = 200 //当前进度
      var maxValue = 300 //进度条最大值
      var option = {
        title: {
          text: '2021折线图分析分析分析分析',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontSize: 14,
            fontWeight: 'normal',
            color: '#666666',
          },
          left: '-5',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            console.log('params', params)

            // // 获取xAxis data中的数据
            let dataStr = `<div>
                            <p style="font-size:14px;font-weight:bold;color:#333;margin:0 0px 10px;">
                              ${params[0].name}XX总数 ? 个</p>
                        </div>`
            params.forEach((item) => {
              // 获取图标(小圆点)颜色，并且自定义样式为正方形，即要改变小圆点，只需重写marker的html片段，并修改样式即可
              // 获取series中data
              // 获取seriersName
              console.log('item', item)
              dataStr += `<div>
                <div style="font-size:14px; color:#666; margin-top:10px;">
                  <span style="display:inline-block;margin-right:0px;width:8px;height:8px;border-radius:4px;background-color:${item.color};"></span>
                  <span style="margin-right:5px;">${item.seriesName}</span>
                  <span>${item.data}个</span>
                </div>
              </div>`
            })
            return dataStr
          },
        },
        // 修改图示 图标 - 圆角矩形
        legend: {
          itemHeight: 4,
          itemWidth: 12,
          data: [
            {
              name: '折线图1',
              icon: 'roundRect',
            },
            {
              name: '折线图2',
              icon: 'roundRect',
            },
          ],
          left: '200', // 距离左边
        },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            show: false, //是否显示刻度线 默认为true
            alignWithLabel: true,
          },
          axisLabel: {
            show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
            interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
            textStyle: {
              //textStyle里面写x轴下的字体的样式
              color: '#999',
              fontSize: 14,
            },
          },
          axisLine: {
            onZero: true, // 显示0刻度
            lineStyle: {
              //lineStyle里面写x轴那一条线的样式
              color: '#E6E6E6',
              width: 1, //轴线的粗细
            },
          },
        },
        yAxis: {
          name: '工单数',
          nameTextStyle: {
            padding: [0, 0, 0, -50], // 四个数字分别为上右下左与原位置距离
          },
          splitLine: {
            show: true,
            // 背景虚线
            lineStyle: {
              type: [4, 5],
              dashOffset: 5,
            },
          },
          //用于设置y轴的字体
          axisLabel: {
            show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle: {
              //textStyle里面写y轴下的字体的样式
              color: '#999',
              fontSize: 12,
            },
          },
        },
        series: [
          {
            name: '折线图1',
            type: 'line',
            //如果不想折线那么尖锐，可以加上smooth: true变为柔和曲线
            //smooth: true,
            //stack: '总量',
            symbolSize: 7, // 拐点大小
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(129,183,255, 1)',
                },
                {
                  offset: 1,
                  color: 'rgba(129,183,255, 0)',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#5393E7', //改变折线点的颜色
                lineStyle: {
                  width: 2, //折线宽度
                  color: '#5393E7', //改变折线颜色
                },
              },
              emphasis: {
                color: '#5393E7',
                lineStyle: {
                  width: 2,
                  color: '#5393E7',
                },
                borderColor: '#5393E7', //拐点边框颜色
                borderWidth: 6, //拐点边框大小
              },
            },
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
            zlevel: 11,
          },
          {
            name: '折线图2',
            type: 'line',
            //smooth: true,
            //如果想要y轴的数值不相加，就要去掉stack参数。否则数值就会相加。
            //stack: '总量',
            symbolSize: 7,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255,224,191, 1)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,224,191, 0)',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#F3912E',
                lineStyle: {
                  width: 2,
                  color: '#F3912E',
                },
              },
              emphasis: {
                color: '#F3912E',
                lineStyle: {
                  width: 2,
                  color: '#F3912E',
                },
                borderColor: '#F3912E',
                borderWidth: 6,
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
            zlevel: 11,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      //随着浏览器窗口大小改变而改变
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>