从0到有，教你实现渐变色echarts 折线图

 先在模板中写一个div盒子

<template>

<div id="trendChart"></div>

</template>

 可以在生命周期函数mounted里面加载，也可以封装为一个函数，然后在mounted里面调用；

var chartDom = document.getElementById("trendChart");    //获取节点

var myChart = echarts.init(chartDom);    //初始化图表

var option;

option = {

xAxis: {

axisTick: { show: false },

type: "category",

data:['11-1','11-2','11-3','11-4','11-5','11-6',],

axisLabel: {

       // 设置x轴文字颜色、字体大小、字体风格

    color: "#b3b3b3",

    fontSize:  11,

    fontFamily: "SourceHanSansCN-Light",

},

axisLine: {

//设置x轴线条的粗细

    lineStyle: {

        height: 1,

     },

},

},

yAxis: {

type: "value",

data: moneyArr,

axisLabel: {

    // 设置y轴文字颜色

    color: "#b3b3b3",

    fontSize: 11,

    fontFamily: "SourceHanSansCN-Light",

},

axisLine: {

    lineStyle: {

        height: 1,

    },

},

// 设置y轴网格线

splitLine: {

    show: true,

    lineStyle: {

        color: ["rgb(235,235,235)"],

        width: 1,

        type: "solid",

    },

},

},

grid: {

//设置表格偏移量

top: "2.5%",                      

left: "5%",

right: "8%",

bottom: "7%",

containLabel: true,

},

series: [

{

data:[50,-500,500,500,-1500,1200],

type: "line",

symbol: "circle",

symbolSize: 6,

itemStyle: {

     color: "blue", //折点的颜色

     shadowColor: "blue",

     normal: {

          lineStyle: {

         // 系列级个性化折线样式

                width:  2, //线条宽度

                type: "solid",

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                {  offset: 0,  color: "rgb(83,194,61)" },

                {  offset: 0.5,  color: "rgb(147,168,14)"},

                {  offset: 1,  color: "rgb(239,38,36)" },

            ]), 

       },

   },

},

},

],

tooltip: {

show: true,

trigger: "axis", //触发方式

axisPointer: {

    type: "line",

},

textStyle: {

    align: "left",

    fontSize: 12,

},

formatter: "日期: {b0}<br />收益: {c0}",

position: "left",

show: true,

},

visualMap: {

// lt（小于，less than），

// gt（大于，greater than），

// lte（小于等于 less than or equals），

// gte（大于等于，greater than or equals）

//大于0的为绿色，小于0的为红色

show: false,

pieces: [

{  gt: 0,  color: "rgb(83,194,61)" },

{  lt: -0, color: "rgb(239,38,36)"},

],

seriesIndex: 0,

},

};

//将数据点显示为光圈

let effectScatter = {

type: "effectScatter",

coordinateSystem: "cartesian2d",

data: effectScatterData, //2d坐标系

symbol: "circle",

symbolSize: 6,

showEffectOn: "render",

rippleEffect: {

    brushType: "stroke",

},

hoverAnimation: true,

itemStyle: {

    normal: {

       shadowBlur: 10,

       color: function (params) {

            return colors[params.dataIndex];

        },

    },

},

// zlevel: 1,

};

for (let item in option.series) {

let data = option.series[item].data;

for (let i = 0; i < data.length; i++) {

    effectScatterData.push([option.xAxis.data[i], data[i]]);

    if (data[i] >= 0) {

         colors[i] = "rgb(83,194,61)";

        symbolAdd++;

    } else {

        colors[i] = "rgb(239,38,36)";

       symbolReduce++;

    }

}

}

if (symbolAdd == 0) {

//全为负数，颜色为红色

option.series[0].itemStyle = {

    normal: {

         lineStyle: {

         // 系列级个性化折线样式

        width: 2, //线条宽度

        type: "solid",

        color: "rgb(239,38,36)",

    },

},

   };

} else if (symbolReduce == 0) {

//全为正数，颜色为绿色

option.series[0].itemStyle = {

     normal: {

         lineStyle: {

         // 系列级个性化折线样式

         width:  2, //线条宽度

         type: "solid",

         color: "rgb(83,194,61)",

       },

    },

};

}

option.series.push(effectScatter);

option && myChart.setOption(option);

//根据窗口大小自动调整图表大小

window.addEventListener("resize", function () {

myChart.resize();

})

显示效果如下：

当数据都为正数时，全为绿色

当数据有正有负时为红绿渐变

当数据全为负数时，全为红色

以上就是全部分享结果了，如有疑问，欢迎留言！！！