开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情

---

写在前面

上篇文章介绍了在vite+vue的后台项目中实现面积图的颜色渐变，本篇文章介绍如何在vite+vue项目中实现双折线图的线性渐变

完整源码：项目gitee地址

在线演示：演示地址

账号：admin
密码：admin

面积图的颜色渐变

实现过程记录：

我们已经实现了单折线图的线性渐变，我们现在在他的基础上实现双折线图的线性渐变，原理是一样的，同样是设置series-itemStyle来实现。

实现线性渐变的代码片段如下：

color用来设置渐变的属性，下面的片段中设置了type为linear，即线性渐变，设置了x:0,y:0,x2:1,y2:0，这会使我们的图表横向线性渐变，即从左往右颜色渐变，我们可以通过改变 x ,y ,x2 ,y2 的值来改变渐变的方向。

colorStops字段是一个数组，通过设置offset的值来进行渐变颜色的配置，offset取值范围为[0，1]，是一个百分数，分别表示0% ~ 100%的颜色，例子中设置了0%、33%、66%和100%处的颜色

itemStyle: {
    color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
            offset: 0, color: 'rgba(255, 179, 0, 0.3)' // 0% 处的颜色
        }, {
            offset: 0.33, color: 'rgba(255, 160, 0, 1)' // 33% 处的颜色
        }, {
            offset: 0.66, color: 'rgba(254, 219, 0, 1)' // 66% 处的颜色
        }, {
            offset: 1, color: 'rgba(254, 196, 0, 0.3)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    }
},

下面是我写的一个例子，在单折线图的线性渐变的基础上，做了以下改变：

1、加了图例legend，通过series-name设置对应的图表

2、平滑曲线变成折线smooth: false

3、显示标注并设置标注的大小showSymbol: true,symbolSize: 6

<template>
    <div ref="main3" class="main3"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

onMounted(() => {
    initChart3()
})

const main3 = ref()

const initChart3 = () => {
    let myChart = echarts.init(main3.value);

    let option = {
        title: [
            {
                left: 'center',
                text: '双折线图的线性渐变',
                textStyle: {
                    color: '#fff'
                }
            }
        ],
        tooltip: {
            trigger: 'axis'
        },
        // 图例
        legend: {
            top: '9%',
            data: ['售价', '进价'],
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
            boundaryGap: false, // x轴两边是否留白
            // 坐标轴轴线
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    opacity: 0.6
                }
            },
            // 坐标轴刻度
            axisTick: {
                show: false
            },
            // 坐标轴文本
            axisLabel: {
                show: true,
                color: "rgba(255, 255, 255, 0.6)"
            }
        },
        yAxis: {
            // 坐标轴分割线
            splitLine: {
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.1
                }
            },
            // 坐标轴文本
            axisLabel: {
                show: true,
                color: "rgba(255, 255, 255, 0.6)"
            }
        },
        grid: {
            top: '20%',
            left: '10%',
            right: '5%',
            bottom: '10%'
        },
        series: [
            {
                name: '售价',
                type: 'line',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                symbolSize: 6,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: 'rgba(255, 179, 0, 0.3)' // 0% 处的颜色
                        }, {
                            offset: 0.33, color: 'rgba(255, 160, 0, 1)' // 33% 处的颜色
                        }, {
                            offset: 0.66, color: 'rgba(254, 219, 0, 1)' // 66% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(254, 196, 0, 0.3)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
            {
                name: '进价',
                type: 'line',
                data: [900, 832, 701, 834, 1090, 1500, 1120],
                symbolSize: 6,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: 'rgba(0, 243, 255, 0)' // 0% 处的颜色
                        }, {
                            offset: 0.33, color: 'rgba(0, 241, 255, 1)' // 33% 处的颜色
                        }, {
                            offset: 0.66, color: 'rgba(0, 147, 254, 1)' // 66% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(0, 228, 254, 0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            }
        ]
    };

    myChart.setOption(option);
}

</script>

<style lang="less" scoped>
.main3 {
    display: inline-block;
    width: 500px;
    height: 300px;
    background-color: #102A49;
    margin: 10px;
}
</style>

最终效果：

写在最后

以上就是在vite+vue项目中实现双折线图线条的线性渐变的所有代码和说明