欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中echarts的封装

程序员文章站 2024-01-25 20:14:41
...

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>
相关标签: javascript