echart 数据点渐变颜色

问题描述

我正在尝试制作渐变折线图，问题在于工具提示图例颜色和数据点的颜色，它们显示为默认的棕色渐变。

我能够更改工具提示颜色，无论如何这不是实际的数据点颜色，但至少能够将其修复为一种颜色。而线上的点不会拾取线的颜色。

有人能指出我正确的方向吗？

 var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};


var option;



var data = [["2020-06-05",116],["2020-06-06",129],["2020-06-07",135],["2020-06-08",86],["2020-06-09",73],["2020-06-10",85],["2020-06-11",["2020-06-12",68],["2020-06-13",92],["2020-06-14",130],["2020-06-15",245],["2020-06-16",139],["2020-06-17",115],["2020-06-18",111],["2020-06-19",309],["2020-06-20",206],["2020-06-21",137],["2020-06-22",128],["2020-06-23",["2020-06-24",94],["2020-06-25",71],["2020-06-26",106],["2020-06-27",84],["2020-06-28",93],["2020-06-29",["2020-06-30",["2020-07-01",83],["2020-07-02",125],["2020-07-03",107],["2020-07-04",82],["2020-07-05",44],["2020-07-06",72],["2020-07-07",["2020-07-08",["2020-07-09",66],["2020-07-10",91],["2020-07-11",["2020-07-12",113],["2020-07-13",["2020-07-14",131],["2020-07-15",["2020-07-16",64],["2020-07-17",69],["2020-07-18",88],["2020-07-19",77],["2020-07-20",["2020-07-21",["2020-07-22",57],["2020-07-23",55],["2020-07-24",60]];

var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});

option = {
    color: {
                type: 'linear',x: 0,y: 1,x2:0,y2:0,colorStops: [{
                    offset: 0,color: '#00d4ff' // color at 0% position
                },{
                    offset: 1,color: '#090979' // color at 100% position
                }],global:true
            },// Make gradient line here
    visualMap: [{
        show: true,type: 'continuous',seriesIndex: 0,min: 0,max: 400
    }],title: [{
        left: 'center',text: 'Gradient along the y axis'
    }],xAxis: [{
        data: dateList,axisPointer: {
        label:{
            color:['#5470c6'],}
        },axisLabel: {
            formatter: function (value) {
                return moment(value).format("MMM YY");
                // And other formatter tool (e.g. moment) can be used here.
            }
        }
    }],yAxis: [{
            type: 'value',axisPointer: {
            label:{
                color:['#5470c6'],}
            }
    }],grid: [{
        width:'auto',height:'auto'
    }],tooltip : {
        trigger: 'axis',axisPointer: {
            animation: true,},formatter: function (params) {
            var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
            let rez = '<p>' + params[0].axisValue + '</p>';
            console.log(params); //quite useful for debug
            params.forEach(item => {
           //     console.log(item); //quite useful for debug
                var xx = '<p>'   + colorSpan('#00d4ff') + ' ' + item.seriesName + ': ' + item.data + '</p>'
                rez += xx;
            });
            console.log(rez);
            return rez;
        }        
    },series: [{
        color:['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],type: 'line',showSymbol: false,data: valueList,//  smooth: true,label:{
            show:true,position:'top'
        },linestyle:{
            color: {
                type: 'linear',global:false
            }
        }
    }]
};
console.log(myChart);
if (option && typeof option === 'object') {
    myChart.setoption(option);
}

解决方法

您需要在 echarts 选项中添加 gradientColor 数组。现在 echart 将负责更改工具提示和数据点的颜色。您还可以删除自定义工具提示格式的函数。

gradientColor: ["#00d4ff","#090979"]

这里是完整的选项对象：

var data = [];

var dateList = data.map(function(item) {
  return item[0];
});
var valueList = data.map(function(item) {
  return item[1];
});

option = {
  gradientColor: ["#00d4ff","#090979"],// Make gradient line here
  visualMap: [
    {
      show: true,type: "continuous",seriesIndex: 0,min: 0,max: 400
    }
  ],title: [
    {
      left: "center",text: "Gradient along the y axis"
    }
  ],xAxis: [
    {
      data: dateList,axisPointer: {
        label: {
          color: ["#5470c6"]
        }
      },axisLabel: {
        formatter: function(value) {
          return moment(value).format("MMM YY");
          // And other formatter tool (e.g. moment) can be used here.
        }
      }
    }
  ],yAxis: [
    {
      type: "value",axisPointer: {
        label: {
          color: ["#5470c6"]
        }
      }
    }
  ],grid: [
    {
      width: "auto",height: "auto"
    }
  ],tooltip: {
    trigger: "axis",axisPointer: {
      animation: true
    }
  },series: [
    {
      type: "line",showSymbol: false,data: valueList,//  smooth: true,label: {
        show: true,position: "top"
      }
    }
  ]
};