echarts 自定义仪表盘设置背景图片

Cookie686

已于 2022-08-02 14:02:32 修改

阅读量3.6k

点赞数 3

文章标签： echarts 前端 javascript

于 2022-08-02 11:31:56 首次发布

本文链接：https://blog.csdn.net/Cookie686/article/details/126118968

版权

echarts仪表盘使用插件 vue-echarts

代码示例

HTML部分

<v-chart ref="heartMap" class="heartMap" :option="option"></v-chart>

js部分

// 配置项
options: {
        // 背景图片设置
        graphic: [
          {
            type: "image",
            left: "0",
            top: "0",
            z: -10,
            bounding: "raw",
            rotation: 0, //旋转
            origin: [30, 55], //中心点
            scale: [0.9, 0.9], //缩放
            style: {
              // 背景图
              image: require("@/assets/images/11.png"),
              opacity: 1,
            },
          },
        ],
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            radius: "65%",
            center: [
              // 圆心
              "47%",
              "48%",
            ],
            pointer: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F86921", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FE9E27", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                borderWidth: 3,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                shadowOffsetX: 50,
                shadowOffsetY: 50,
                shadowBlur: 30,
              },
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 0,
                name: "Perfect",
                title: {
                  show: false,
                  offsetCenter: ["0%", "-30%"],
                },
              },
            ],
            detail: {
              fontSize: 20,
              color: "#FFF",
              borderColor: "auto",
              formatter: function() {
                return getischargeOptions();
              },
              offsetCenter: [5, -5],
            },
          },
        ],
      }
      // 数据格式化
      const getischargeOptions = () => {
      return Number(options.series[0].data[0].value).toFixed(2) + '%';
    };