echarts 折線圖漸變

npm install echarts --save
//main.js 引用
import Vue from "vue";
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
           

let data=[
       {
          value: "2",
          time: "1588140332028"
        } ,
        {
          value: "4",
          time: "1588140332028"
        } ,
        {
          value: "2",
          time: "1588140332028"
        } ,
        {
          value: "1",
          time: "1588140332028"
        } ,
        {
          value: "3",
          time: "1588140332028"
        } ,
]
 // 基于準備好的dom，初始化echarts執行個體
  let myChart = this.$echarts.init(document.getElementById("chartLine"));
  const value = data.map(item => item.value);
  const time = data.emotionWave.map(item => item.time);
  let option = {
    grid: {
      left: "30",
      right: "40",
      bottom: "0",
      top: "20",
      position: "center",
      containLabel: true
    },
    xAxis: {
      type: "category",
      show: true,
      name: "時間",
      nameGap: 15,
      axisTick: { show: false },
      axisLine: {
        symbol: ["none", "arrow"],
        // symbol: "path://M250 150 L150 350 L350 350 Z",
        lineStyle: {
          color: "rgba(230,232,235,1)"
        },
        symbolSize: [10, 15]
      },
      boundaryGap: false,
      data: time,
      axisLabel: {
        margin: 10,
        interval: 100000,
        showMinLabel: false,
        showMaxLabel: false
      }
    },
    yAxis: {
      type: "value",
      minInterval: 1, //設定成1保證坐标軸分割刻度顯示成整數。
      min: 1,
      axisLine: {
        lineStyle: {
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(255,39,102, 1)" },
            { offset: 0.5, color: "rgba(255,173,11, 1)" },
            { offset: 1, color: "rgba(60,230,255, 1)" }
          ])
        }
      },
      axisLabel: {
        align: "center",
        fontSize: 12,
        margin: 10,
        verticalAlign: "middle",
        lineHeight: 10,
        formatter: function(value) {
          if (value == 1) {
            return "{a|}";
          }
          if (value == 2) {
            return "{b|}";
          }
          if (value == 3) {
            return "{c|}";
          }
          if (value == 4) {
            return "{d|}";
          }
          if (value == 5) {
            return "{e|}";
          }
        },
        rich: {
          a: {
            backgroundColor: {
              image: "/images/emotion_01.png"  //public 裡的圖檔
            }
          },
          b: {
            backgroundColor: {
              image: "/images/emotion_02.png"
            }
          },
          c: {
            backgroundColor: {
              image: "/images/emotion_03.png"
            }
          },
          d: {
            backgroundColor: {
              image: "/images/emotion_04.png"
            }
          },
          e: {
            backgroundColor: {
              image: "/images/emotion_05.png"
            }
          }
        }
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(230,232,235,1)"
        }
      },
      axisTick: {
        show: false
      }
    },
     visualMap: { //折線圖漸變色對應Y軸漸變色
          show: false,
          dimension: 1,
          type: "continuous",
          min: -4,
          max: 4,
          pieces: [], //pieces的值由動态資料決定
           inRange: {
             color: [
              "rgba(60,230,255, 1)",
              "rgba(255,173,11, 1)",
              "rgba(255,39,102, 1)",
            ],
          },
        },
    series: [
      {
        type: "line",
        symbol: "none",
        smooth: true,
        itemStyle: {
          normal: {
           // lineStyle: {   
           //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
           //     { offset: 0, color: "rgba(255,39,102, 1)" },
            //    { offset: 0.5, color: "rgba(255,173,11, 1)" },
            //    { offset: 1, color: "rgba(60,230,255, 1)" }
            //  ])
         //   }
          }
        },
        data: value.map(Number),
        markLine: {
          silent: true,
          lineStyle: {
            color: "rgba(230,232,235,1)",
            type: "solid"
          },
          label: {
            formatter: "目前",
            textStyle: 15,
            color: "rgba(230,232,235,1)"
          },
          symbol: ["none", "none"],
          data: [{ xAxis: time[time.length - 1] }]
        },
        markPoint: {
          symbolSize: [30, 30], //圖檔寬、高
          symbol: `image:///images/emotion_0${this.newEmotionState}.png`,
          //public 裡的圖檔
          silent: true,
          data: [
            {
              type: "max",
              valueDim: "x",
              label: {
                show: false
              }
            }
          ]
        }
      }
    ]
  };
     折線圖漸變色對應Y軸漸變色
      option.series[0].data = value;
      //-4以上,4以下顯示的顔色
      option.visualMap.pieces[0] = {
        gte: -4,
        lte: 4,
        color: "rgba(255,39,102, 1)",
      };
  myChart.setOption(option);
           

效果圖如下：