当前位置：首页 > news >正文

echarts之双折线渐变图

news 来源：原创 2025/5/24 10:20:32

vue3+echarts实现双折线渐变图

echarts中文官网：https://echarts.apache.org/examples/zh/index.html

效果图展示：在这里插入图片描述
整体代码如下：

<template><div id="lineChart" style="width:100%;height:400px;"></div>
</template><script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";// 横坐标data数据
const xData = ["05-01","05-02","05-03","05-04","05-05","05-06","05-07","05-08","05-09","05-10","05-11","05-12","05-13","05-14","05-15","05-16","05-17","05-18","05-19","05-20",
];// 双折线渐变图data数据
const lineData = [[782, 859, 578, 564, 615, 787, 623, 606, 750, 610, 703, 501, 675, 598, 721,550, 767, 600, 692, 987,],[780, 589, 703, 510, 714, 503, 474, 621, 692, 512, 700, 876, 686, 780, 614,781, 489, 700, 621, 600,],
];onMounted(() => {const myLineChart = echarts.init(document.getElementById("lineChart"));const lineOption = {tooltip: {trigger: "axis",type: "line",axisPointer: {lineStyle: {color: "rgba(69, 173, 175, 1)",},},backgroundColor: "rgba(7,18,26, 1)",borderWidth: 0,textStyle: {color: "#fff",fontSize: 14,},},// 图例legend: {icon: "rect", // circle圆形;rect方形;roundRect圆角方形;triangle三角形;diamond菱形;pin定位点;arrow导航三角指针data: ["实际用量", "计划用量"],itemWidth: 8,itemHeight: 8,itemGap: 15, // 间隔right: "50%",top: "8%",textStyle: {fontSize: 12,color: "#fff",},},// 图表位置grid: {left: "1%",right: "2%",top: "27%",bottom: "3%",containLabel: true, // 是否包含坐标刻度},xAxis: [{type: "category",boundaryGap: false, // 散点图的留白策略axisLine: {lineStyle: {color: "#415264",width: 2,type: "solid",},},axisLabel: {color: "#A6C6E1",fontSize: 12,},axisTick: {show: false,},data: xData,},],yAxis: [{type: "value",axisTick: {show: false,},axisLine: {lineStyle: {color: "#284556",},},axisLabel: {//  改变y轴字体颜色和大小// formatter: '{value}间 ', //  给y轴添加单位color: "#9FA3A8",fontSize: 12,},splitLine: {lineStyle: {color: "#284556",type: "dashed",},},},],series: [{name: "实际用量",type: "line",smooth: true, // 是否为平滑曲线lineStyle: {width: 2,},symbol: "circle",symbolSize: 5,showSymbol: false, // 是否显示数据点areaStyle: {// 设置渐变色color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(18,166,254,0.6)",},{offset: 0.8,color: "rgba(7,18,26,0.1)",},],false),},itemStyle: {color: "#12A6FE",borderWidth: 1,},data: lineData[0],},{name: "计划用量",type: "line",smooth: true,symbol: "circle",symbolSize: 5,showSymbol: false,lineStyle: {width: 2,},areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(51,181,107,0.6)",},{offset: 0.8,color: "rgba(7,18,26,0.5)",},],false),},itemStyle: {color: "#33B56B",borderWidth: 1,},data: lineData[1],},],};myLineChart.setOption(lineOption);
});
</script>

Genuine effort turns challenges into stepping stones for real growth.‌