echarts折线图实现渐变效果

先看下效果图是这个样子的，和普通的折线图最明显的区别就是需要做成渐变效果。

1、官网找例子

1、官网找例子

样例地址：https://echarts.apache.org/examples/zh/editor.html?c=area-basic

官网初始option

复制到项目中，得到的效果如下图（width: 424px; height: 200px;）：

2、初步改造示例，有个雏形

数据替换成要展示数据，这一步之后，折线图效果是这样的

3、细节改造和优化

接下来就开始精修之路^_^

去掉折线上的小圆点
y坐标轴样式变成虚线并且颜色改变
设置对应的折线颜色
折线面积展示区域颜色改外渐变效果

代码改动要点如下

4、全部代码

<template>
    <!-- 折线图对比 -->
    <div class="con_bg">
        <div class="lineChart" ref="lineChart">
        </div>
        <!--echarts实例代码-->
        <div class="lineDemo" ref="lineChartDemo">
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";

var chart = "";
var chartDemo = "";
var lineChart = "";
export default {
    name: "",
    data() {
        return {};
    },
    mounted() {
        this.showlineChart();
        this.showlineChartDemo();
    },
    methods: {
        showlineChart() {
            if (
                lineChart != null &&
                lineChart != "" &&
                lineChart != undefined
            ) {
                lineChart.dispose();
            }
            lineChart = echarts.init(this.$refs.lineChart);

            let option = {
                xAxis: {
                    type: "category",
                    //boundaryGap: false,//坐标轴两边留白策略,默认为true
                    data: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月",
                    ],
                },
                yAxis: {
                    type: "value",
                    //设置分割线虚线效果
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#013A3F",
                        },
                    },
                    interval: 100, //默认会根据数据自动分割，因为此处要现实的数据在0-200之间，设为100则只显示两条分割线
                },
                series: [
                    {
                        data: [
                            100, 200, 80, 105, 85, 150, 90, 120, 70, 190, 95,
                            140,
                        ],
                        showSymbol: false, //去掉折线上的小圆点
                        type: "line",
                        //设置折线颜色和粗细
                        lineStyle: {
                            width: 2,
                            color: "#44E2F0",
                        },
                        //设置面积区域为渐变效果
                        areaStyle: {
                            color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0.4,
                                    color: "#010C17",
                                },
                                {
                                    offset: 1,
                                    color: "#44E2F0",
                                },
                            ]),
                        },
                    },
                ],
            };

            lineChart.clear();
            lineChart.setOption(option);

            window.addEventListener("resize", () => {
                lineChart.resize();
            });
        },
        showlineChartDemo() {
            if (
                chartDemo != null &&
                chartDemo != "" &&
                chartDemo != undefined
            ) {
                chartDemo.dispose();
            }
            chartDemo = echarts.init(this.$refs.lineChartDemo);

            let demoOption = {
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: "line",
                        areaStyle: {},
                    },
                ],
            };

            chartDemo.clear();
            chartDemo.setOption(demoOption);

            window.addEventListener("resize", () => {
                chartDemo.resize();
            });
        },
    },
};
</script>
<style scoped>
.con_bg {
    /* background-color: #010c17; */
    background-image: url("/img/bg.png");
    width: 490px;
    height: 590px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
}
.lineChart {
    width: 420px;
    height: 200px;
    /* background-image: url("/img/ld.png");*/
    margin: 20px auto;
}

.lineDemo {
    width: 424px;
    height: 200px;
    margin: 20px auto;
}
</style>

5、原始效果和完成效果对比

碎碎念：

x轴没有完全还原效果图，觉得数据展示的东西还是不能做的太抽象，也不能一味追求效果，而丧失了图表分析见图知义的目的。

以前我也是不太热衷做效果图，感觉太麻烦，因为需要查一堆东西来实现想要的效果。现在却觉得完成一种挑战还是很有成就感的，并且在实现过程中，也是对api说明文档融会贯通的过程（我自己写代码可能就是在网上东拼西凑达成效果就好了，但是我在把它整理成文章时，很多时候是去对照api文档的，鱼和渔的过程无形中我也有了进步，所以这也是我一有时间就把工作中值得注意的点整理成文章的原因之一），对于各种样式的修改思路理顺了，能看懂api了，基本就能做到随机应变了。可惜我们公司美工也走了，一时半会儿也找不到配合契合的人了………

对于任何一个项目，前端和美工如果配合好了，绝对是锦上添花的事！

所有前端不要老觉得是美工给你出难题

原文链接：https://blog.csdn.net/rear0312/article/details/122405709