如何用vue-echarts实现面积图？

原创

喵喵侠

修改于 2024-07-23 18:18:42

1350

修改于 2024-07-23 18:18:42

前言

大家好，我是喵喵侠。Echarts是百度官方推出的一种常见的图表开发库，可以让前端开发快速的构建各式各样的图表。而Vue-Echarts是官方推出的Vue版本的Echarts，你可以直接在Vue项目中更好的创建图表。最近我经常接到图表开发相关的需求，在开发的过程中，发现很多配置都是公用的，个别地方稍微改下就好了，因此我用Vue-Echarts封装了组件，可以让其他页面模块，更快速的开发相应的图表。今天给大家带来的是面积图的开发，我会贴上完整可运行的代码，以及一些需要注意的点。

面积图实现

实现效果

实现思路

其实vue-echart的配置写法，跟普通的echarts大同小异。从上图可以看出，面积图的基本组成部分，包括轴线、网格线、刻度、折线图、面积区域等。简单说，只要你会写折线图，面积图自然也不在话下。

面积图需要额外写一个配置，那就是areaStyle。比方说我要设置面积区域是一个红色半透明，那么可以这样写：

areaStyle: {
  color: 'red', //颜色
  opacity: 0.5  //透明度
}

透明度也可以根据自身需要，设置更深或者更浅。

这里官方提供了一个demo，可以很快的对比出跟折线图的区别。

区域面积图 - 折线图 - 常用图表类型 - 应用篇 - 使用手册 - Apache ECharts

如果你想要面积从上至下渐变色的效果，比方说绿变红，可以这样写：

areaStyle: {
    color: new ets.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'green'
    }, {
        offset: 1,
        color: 'red'
    }])
}

完整代码

<!-- 折线图(支持一条或多条) -->
<template>
  <div class="vChartMultipleArea">
    <v-chart :auto-resize="true" autoresize :data="data" :option="defaultOption" />
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart from "vue-echarts";
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent]);
export default {
  name: "vChartMultipleArea",
  components: { VChart },
  props: {
    option: {
      type: Object,
      default: function () {
        return {};
      }
    },
    data: {
      type: Object,
      default: function () {
        return {
          categories: ["4时", "8时", "12时", "16时", "20时", "24时"],
          series: [
            {
              name: "工单量1",
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            },
            {
              name: "工单量2",
              data: [420, 632, 401, 434, 190, 530, 420]
            }
          ]
        };
      }
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {
    defaultOption() {
      let that = this;
      const colors = ["#FD6F3B", "#FFC300", "#8BC24A", "#4CAF50", "#00BCD4", "#039BE5", "#8E24AA", "#115488", "#F06292", "#E91E63"];
      const series = this.data.series.map((v, i) => ({
        name: that.data.series[i].name,
        data: that.data.series[i].data,
        type: "line",
        itemStyle: {
          borderWidth: 10,
          color: that.option.lineStyleColor ?? colors[i % 10]
        },
        symbol: "circle", //拐点样式
        symbolSize: 7, //拐点大小
        lineStyle: {
          color: that.option.lineStyleColor ?? colors[i % 10],
          width: 2,
          type: "solid"
        },
        areaStyle: {
          color: that.option.lineStyleColor ?? colors[i % 10],
          opacity: 0.5
        }
      }));
      var axisLabel = {};
      var xAxis = {
        type: "category",
        // boundaryGap: false,
        data: this.data.categories
      };
      // 展示全部x轴数据 并倾斜
      if (that.option.interval != undefined) {
        axisLabel = {
          interval: that.option.interval,
          rotate: that.option.rotate
        };
        xAxis.axisLabel = axisLabel;
      }
      return {
        grid: {
          left: "3%",
          right: "4%",
          top: that.option.top ? that.option.top : "15%",
          bottom: that.option.bottom ? that.option.bottom : "10%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: series.map(v => v.name),
          right: "0"
        },
        xAxis: xAxis,
        yAxis: [
          {
            type: "value",
            name: that.option.yAxisName ?? "",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: series.map(v => {
          return {
            ...v,
            label: { show: true } //顶部数字显示
          };
        })
      };
    }
  },
  watch: {},
  methods: {}
};
</script>
<style lang="less" scoped>
.vChartMultipleArea {
  width: 100%;
  height: 100%;
}
</style>

我的这个图表组件，支持多个面积图，会根据series来遍历出相应的配置。

代码中有个小技巧，我在上面52行，定义了一个colors数组，预制了10种颜色，接着在areaStyle.color里面，对数组索引进行了取余操作。这样保证了每一个折线和面积区域都有对应的颜色，而且尽可能不重复。

其他的配置，你可以在我的基础上进行修改，也可以参阅官方配置项文档，获取更详细的配置。

Documentation - Apache ECharts