echarts官网 指出,除了可以在折线图面积区域填充纯色背景
,也支持设置为渐变色
和纹理填充
,通过修改 series 配置项中的 areaStyle 属性即可。
设置背景颜色为渐变色,主要代码如下:
series: [
{
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#48C78E" },
{ offset: 0.5, color: "rgba(182,229,187,0.3)" },
{ offset: 1, color: "rgba(182,229,187,0.1)" },
]),
},
},
],
完整代码:
【html】
<template>
<div class="container">
<div class="title">本周销售额</div>
<div class="chart" id="myChart"></div>
</div>
</template>
【js】
<script>
export default {
data() {
return {
chartData: {
seriesName: "销售额",
xAxisData: ["8-14", "8-15", "8-16", "8-17", "8-18", "8-19", "8-20"],
yAxisData: [2300, 6756, 3335, 7237, 5436, 7825, 3735],
}
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
let chartDom = document.getElementById("myChart");
let myChart = this.$echarts.init(chartDom);
let option;
const { seriesName, xAxisData, yAxisData } = this.chartData;
option = {
grid: {
left: "8%",
top: "10%",
width: "88%",
height: "75%",
},
tooltip: {
trigger: "item",
formatter: function (params) {
let str = "<div><p>" + params.name + "</p></div>";
str += params.marker + params.seriesName + ":" + params.data;
return str;
},
textStyle: {
fontSize: 12,
},
},
xAxis: {
type: "category",
data: xAxisData,
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#A0AEC0",
type: "dashed",
},
},
axisLabel: {
color: "#A0AEC0",
fontSize: 12,
margin: 30,
},
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "#A0AEC0",
type: "dashed",
},
},
splitNumber: 5,
axisLine: {
show: false,
},
axisLabel: {
color: "#A0AEC0",
fontSize: 12,
margin: 15,
},
},
series: [
{
name: seriesName,
data: yAxisData,
type: "line",
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#48C78E" },
{ offset: 0.5, color: "rgba(182,229,187,0.3)" },
{ offset: 1, color: "rgba(182,229,187,0.1)" },
]),
},
lineStyle: {
color: "#48C78E",
width: 3,
},
itemStyle: {
color: "#48C78E",
},
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
},
};
</script>
【css】
.container {
height: 490px;
border: 1px solid #fff;
border-radius: 15px;
background: rgba(255, 255, 255, 0.65);
box-shadow: 0px 3.5px 5.5px 0px rgba(0, 0, 0, 0.02);
.title {
height: 70px;
line-height: 70px;
padding-left: 20px;
font-size: 18px;
border-bottom: 1px solid #fff;
}
.chart {
width: 100%;
height: 420px;
}
}
效果展示: