echarts折线图背景颜色渐变

原创已于 2023-08-25 11:01:47 修改 · 5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

于 2023-08-25 10:59:02 首次发布

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在ECharts官方文档中使用areaStyle属性为折线图的面积区域设置渐变色，提供了详细的代码实例，包括HTML、JavaScript和CSS部分。

在这里插入图片描述
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;
  	}
}