echarts折线图使用示例。包含颜色渐变，节点样式，图例legend样式等

2739人阅读 2020/6/21 18:57 总访问：4719931 评论：0 收藏：0 手机

分类: 前端

### 设计图如下

![](https://img.tnblog.net/arcimg/aojiancc2/3df9459969a241f79c0355b17317533b.png)

### 代码如下
```

<template>
    <div class="learnTrendChartContainer">
        <div style="position:absolute;right: 6px;z-index: 1000;">
            <select class="yearSelect">
                <option>2022</option>
                <option>2023</option>
            </select>
        </div>
        <div>
            <div id="labroom-trend-chart" class="labroom-trend-chart" />
        </div>
    </div>
</template>


<script lang="ts">

export default {
    // 组件名字
    name: 'LearnTrendChart',
    // 组件参数
    props: {

    },
    data() {
        return {
            nowPeopleCount: 2895,
            termPeopleCount: 1025905,//学期累计人次
        }
    },
    mounted() {
        this.createChartByDay()
    },
    methods: {
        createChartByDay() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('labroom-trend-chart'))
            const option = {
                // 图表颜色设置
                color: ['#F2C52A', '#23FFFC', '#1C8DFF', '#FF0087', '#FFBF00'],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(18,103,167,0.9)",
                    borderColor: "#01DCF3",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    },
                    icon: "rect",
                    symbol: "rect",
                    axisPointer: {
                        label: {
                            // y轴格式化函数官方文档：https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label.formatter
                            formatter: function (params) {
                                console.log(params)
                                return params.value + "月";
                            }
                        },
                    },
                    // 分别设置四个方向的内边距
                    padding: [
                        6,  // 上
                        10, // 右
                        9,  // 下
                        10, // 左
                    ],
                    valueFormatter: (value) => value + "人次",
                    // 这里使用了格式化函数，也可以不用，不用的话和设计图区别就是线的示例是原点，而不是长方形，没有找到直接设置成长方形的方法，为了和设计图一样就通过formatter自定义格式
                    formatter: function (params) {
                        var result = ''
                        var dotHtml = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#F2C52A"></span>'    // 定义第一个数据前的长方形颜色
                        var dotHtml2 = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#23FFFC"></span>'    // 定义第二个数据前的长方形颜色
                        var dotHtml3 = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#1C8DFF"></span>'    // 定义第二个数据前的长方形颜色

                        result += "<div>" + params[0].axisValue + "月" + "</div>" +
                            "<div style='margin-top:2px'>" + dotHtml + " 累计评估量: <span style='display:inline-block;margin-left:5px;'>" + params[0].data + "人次" + "</div>" +
                            "<div style='margin-top:3px'>" + dotHtml2 + " 累计实验量: <span style='display:inline-block;margin-left:5px;'>" + params[1].data + "人次" + "</div>" +
                            "<div style='margin-top:3px'>" + dotHtml3 + " 累计项目数: <span style='display:inline-block;margin-left:5px;'>" + params[2].data + "人次</span>" + "</div>";

                        return result
                    }
                },
                // 图例设置
                legend: {
                    // x:'right',      //可设定图例在左、右、居中
                    // padding:[0,50,0,0], 
                    // 只设置距离右边
                    right: 86,
                    // circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
                    //icon:"rect",
                    data: [{
                        name: "累计评估量",
                        // 单独设置图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
                        itemStyle: {
                            color: "#fff",
                            borderColor: '#F2C52A',
                            borderWidth: 1,
                        },
                        // 单独设置字体颜色
                        textStyle: {
                            color: "#F2C52A",
                        },
                    },
                    {
                        name: "累计实验量",
                        itemStyle: {
                            color: "#fff",
                            borderColor: '23FFFC',
                            borderWidth: 1,
                        },
                        // 单独设置字体颜色
                        textStyle: {
                            color: "#23FFFC"
                        }
                    },
                    {
                        name: "累计项目数",
                        // 图例空心圆，通过设置边框颜色+背景颜色白色实现空心圆
                        itemStyle: {
                            color: "#fff",
                            borderColor: '1C8DFF',
                            borderWidth: 1,
                        },
                        textStyle: {
                            color: "#1C8DFF"
                        }
                    }
                    ],
                    //data: ['累计评估量', '累计实验量', '累计项目数'],
                    // textStyle: {
                    //     color: "#fff"
                    // }
                },
                grid: {
                    //top: '0%',
                    left: '0%',
                    right: '16px',
                    // bottom: '6%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    //* ***************不留白，从原点开始**************
                    boundaryGap: false, // 不留白，从原点开始
                    data: ['Mon', 'Tue', 'Wed', 'Thu', "1", "3", "5", "7", "8", "9"],
                    axisLine: {
                        lineStyle: {
                            color: "#678DBA",
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    // echart 去掉网格线。去掉横坐标的线
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "#678DBA",
                        }
                    }
                },
                series: [
                    {
                        name: "累计评估量",
                        label: {
                            // 格式化输出
                            formatter: function (params) {
                                // console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
                                // console.log(params)
                                return params.value
                            },
                            show: false,
                            position: 'top'
                        },
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 1, //折线宽度
                                }
                            }
                        },
                        data: [131, 236, 191, 149, 159, 190, 150, 109, 123, 109],
                        type: 'line',
                        smooth: true,
                        symbol: "circle",
                        symbolSize: [8, 8],
                        // 黄色的图
                        areaStyle: {
                            normal: {
                                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(242, 197, 42,0.12)'
                                }, {
                                    offset: 0.34,
                                    color: 'rgba(242, 197, 42,0.10)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(242, 197, 42,0.02)'
                                }])
                            }
                        }
                    },
                    {
                        name: "累计实验量",
                        label: {
                            // 格式化输出
                            formatter: function (params) {
                                return params.value
                            },
                            show: false,
                            position: 'top'
                        },
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 1, //折线宽度
                                }
                            }
                        },
                        data: [108, 99, 108, 139, 165, 170, 150, 159, 166, 122],
                        type: 'line',
                        symbol: "circle",
                        symbolSize: [8, 8],
                        smooth: true,
                        // 显示出来折线图的面积
                        areaStyle: {
                            normal: {
                                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(35, 255, 252,0.16)'
                                }, {
                                    offset: 0.34,
                                    color: 'rgba(35, 255, 252,0.12)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(35, 255, 252,0.00)'
                                }])
                            }
                        }
                    },
                    {
                        name: "累计项目数",
                        label: {
                            // 格式化输出
                            formatter: function (params) {
                                // console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
                                // console.log(params)
                                return params.value
                            },
                            show: false,
                            position: 'top'
                        },
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 1, //折线宽度
                                },
                                // color: "#fff",
                                // borderColor: '#f58f23',
                                // borderWidth: 1,
                            }
                        },
                        data: [132, 191, 141, 149, 155, 160, 130, 139, 150, 122],
                        type: 'line',
                        smooth: true,
                        symbol: "circle",
                        symbolSize: [8, 8],
                        // 显示出来折线图的面积
                        areaStyle: {
                            normal: {
                                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(28, 141, 255,0.22)'
                                }, {
                                    offset: 0.34,
                                    color: 'rgba(28, 141, 255,0.16)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(28, 141, 255,0.00)'
                                }])
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>
  

<style lang="scss" scoped>
.learnTrendChartContainer {
    position: relative;

    .labroom-trend-chart {
        height: 296px;
        width: 100%;
    }

    .yearSelect {
        width: 69px;
        font-size: 14px;
        text-align: center;
        border: 1px solid #01F3FC;
        border-radius: 12px;
        background-color: rgba(20, 41, 68, 1);
        color: #01F3FC;
    }

}
</style>
```
引入组件:
```
import LearnTrendChart from '@/views/index/component/learnTrendChart.vue'
export default {
    components: {
        LearnTrendChart
    },
}
```
使用组件:
```
<LearnTrendChart></LearnTrendChart>
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

echarts折线图使用示例。包含颜色渐变，节点样式，图例legend样式等

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}