vue中echarts的封装

在html中

<template>
  <div>
    <!-- 准备一个局别宽和高的容器 -->
    <div ref="box" style="height: 600px; background-color: #fff"></div>
  </div>
</template>

在js中

<script>
//引入echarts
const echarts = require("echarts");
export default {
  // 接收外部传入的数据
  props: {
    // 标题
    title: {
      type: String,
      default: () => [],
    },
    //数据
    value: {
      type: String,
      default: () => [],
    },
  },
  // 方法
  methods: {
    // 绘制报表
    drawCharts() {
      // 1. 初始化echarts
      let myCharts = echarts.init(this.$refs.box);
      // 2. 配置
      let option = {
        series: [
          {
            type: "gauge",
            startAngle: 225, //开始角度
            endAngle: -45, //结束角度
            min: 0,
            max: 100,
            splitNumber: 10, //每个间隔
            itemStyle: {
              color: "#58D9F9", //主题颜色
              //shadowColor: "rgba(0,138,255,0.45)", //阴影颜色
              //shadowBlur: 10, //羽化面积
              //shadowOffsetX: 2,
              //shadowOffsetY: 2,
            },
            progress: {
              show: true, //是否显示环形进度
              roundCap: false, //环形进度是否圆角
              width: 9, //环形宽度
            },
            pointer: {
              //指针icon
              color: "#58D9F9",
              icon:"path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              length: "60%", //长度
              width: 6, //指针宽
              offsetCenter: [0, "5%"], //指针位置
            },
            axisLine: {
              //背后阴影
              roundCap: false,
              lineStyle: {
                width: 18,
                color: [
                  [0.8, "#7CFFB2"],
                  [1, "#FF6E76"],
                ],
              },
            },
            axisTick: {
              //小刻标
              splitNumber: 2,
              distance: -18,
              lineStyle: {
                width: 1,
                color: "#fff",
              },
            },
            splitLine: {
              //大刻标
              length: 8,
              distance: -18,
              lineStyle: {
                width: 3,
                color: "#fff",
              },
            },
            axisLabel: {
              //大刻标上数字
              distance: -5, //数字位置
              color: "#999",
              fontSize: 12,
            },
            title: {
              fontSize:16,
              offsetCenter: [0, "100%"],
            },
            detail: {
              //中间文字
              // backgroundColor: "#fff",
              // borderColor: "#999",
              // borderWidth: 2,
              width: "60%",
              lineHeight: 10,
              height: 10,
              // borderRadius: 8,
              offsetCenter: [0, "60%"],
              valueAnimation: true,
              formatter: function (value) {
                return "{value|" + value.toFixed(0) + "}{unit|分}";
              },
              rich: {
                value: {
                  fontSize: 16,
                  color: "#777",
                },
                unit: {
                  fontSize: 16,
                  color: "#999",
                },
              },
            },
            data: [
              {
                value: this.value,
                name: `- ${this.title} -`
              },
            ],
          },
        ],
      };
      // 3. 使用配置 创建报表
      myCharts.setOption(option);
    },
  },
  mounted() {
    setTimeout(() => {
      // 调用绘制报表函数
      this.drawCharts();
    }, 1000);
  },
  watch: {
    value() {
      this.drawCharts();
    },
  },
};
</script>