Echars-折线图

最新推荐文章于 2025-05-19 11:38:42 发布

原创最新推荐文章于 2025-05-19 11:38:42 发布 · 291 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍使用ECharts进行图表初始化及配置的过程，包括图表显示条件设置、数据系列定义、颜色样式设定及区域填充效果实现。通过具体代码示例，展示如何在Vue环境下创建并定制动态响应的数据可视化图表。

<!-- 图表 -->
<div class="chartdiv bg-white border">
    <div v-if="currentData.length===0" class="no-data" style="height:300px;">
        暂无数据
    </div>
    <div v-show="currentData.length>0" ref="netValueChart" style="height:300px;"></div>
</div>

//初始化图表
        chartInit() {
            if (!this.lineArt) this.lineArt = echarts.init(this.$refs["netValueChart"]);
            const option = {
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.fundNavChartDate
                },
                yAxis: {
                    type: "value"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: [第一组数据,第二组数据]
                },
                series: [{
                    data: this.dataOne,
                    name: "第一组数据",
                    type: "line",
                    smooth: true,
                    symbol: "none",
                    lineStyle: { normal: { width: 2 } },
                    itemStyle: {
                        normal: {
                            color: "#e99400",
                            lineStyle: {
                                color: "#e99400"
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 0,
                                [
                                    { offset: 0, color: "#e99400" },
                                    { offset: 0.7, color: "#FFE2C6" },
                                    { offset: 1, color: "#ffffff" }
                                ]
                            )
                        }
                    }
                },{
                    data: this.dataTwo,
                    name: "第二组数据",
                    type: "line",
                    smooth: true,
                    symbol: "none",
                    lineStyle: { normal: { width: 2 } },
                    itemStyle: {
                        normal: {
                            color: "#409EFF",
                            lineStyle: {
                                color: "#409EFF"
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 0,
                                [
                                    { offset: 0, color: "#409EFF" },
                                    { offset: 0.1, color: "#409EFF" },
                                    { offset: 1, color: "#ffffff" }
                                ]
                            )
                        }
                    }
                }]
            };
            this.lineArt.setOption(option);
        }