echarts官方的api文档：Apache ECharts

1、引入echarts的方式

• 从 Apache ECharts 官网下载界面 获取官方源码包后构建。

• 在 ECharts 的 GitHub 获取。

• 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

• 通过 jsDelivr 等 CDN 引入

image.png

对应的package.json文件会有对应echarts版本号，表明安装成功了

2、引入echarts的方式

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

基本的echarts图表的使用流程官方api中全面的展示了，接着就需要去理解每个部分的配置项的作用以及如何去配置

image.png

3、开始封装echarts图表

<template>
  <Card>
    <div id="chartmainbar"></div>
  </Card>
</template>

<script>
import { dangerNumStatistics } from "@/api/user";
export default {
  name: "chart",
  // props: ["complatedData", "overData", "totalData"],
  data() {
    return {
      complatedData: [], //已完成隐患数量
      overData: [], // 逾期隐患
      totalData: [], //全部隐患
      timer: null, //设置定时器
      optionbarline: {},// echarts图表的配置项设置
    };
  },
  mounted() {
    // 获取隐患数据
    this.timer = setTimeout(() => {
      this.handleData();
    });
    this.drawLine();
    this.resizeEcharts = () => {
      this.$echarts.init(document.getElementById("chartmainbar")).resize();
    };
    window.addEventListener("resize", this.resizeEcharts);
  },
  methods: {
    handleData() {
      dangerNumStatistics().then((res) => {
        if (res.code == 0) {
          this.complatedData = res.data.map((item) => {
            return item.completeNum;
          });
          this.overData = res.data.map((item) => {
            return item.overNum;
          });
          this.totalData = res.data.map((item) => {
            return item.totalNum;
          });
          this.drawLine();
        }
      });
    },
    drawLine() {
      //基于准本好的DOM，初始化echarts实例
      let chartmainbar = this.$echarts.init(
        document.querySelector("#chartmainbar")
      );
      // 初始化数据
      (this.optionbarline = {
        title: {
          text: "隐患数量统计",
          x: "10px",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "0px",
          // itemGap设置主副标题纵向间隔，单位px，默认为10，
          itemGap: 20,
          backgroundColor: "#EEE",
          // 主标题文本样式设置
          textStyle: {
            fontSize: 16,
            fontWeight: "500",
            color: "#000000",
          },
        },
        legend: {
          data: ["完成的隐患数量", "逾期的数量", "总数"],
          x: "right",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "top",
          textStyle: {
            color: "#666", // 图例文字颜色
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            show: false,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: "完成的隐患数量",
            data: this.complatedData,
            type: "line",
            smooth: true,
            symbol: "none",
          },
          {
            name: "逾期的数量",
            data: this.overData,
            type: "line",
            smooth: true,
            symbol: "none",
          },
          {
            name: "总数",
            data: this.totalData,
            type: "line",
            smooth: true,
            symbol: "none",
          },
        ],
        color: ["#10AB89", "#E97B13", "#0d427e"],
      }),
        //绘制图表
        chartmainbar.setOption(this.optionbarline);
    },
  },
  destroyed() {
    // 清除定时器
    clearTimeout(this.timer);
  },
};
</script>
<style scoped>
#myChart > div {
  margin: 0px 60px;
}
#chartmainbar {
  width: 80% !important;
  height: 300px !important;
  float: left;
}
/* #chartmainbar > div {
  width: 80%;
} */
</style>

图表的效果展示.png