echarts 仪表盘圆环配置数据解析（详解版）

option = {
            title: { // 标题组件，包含主标题和副标题
                text: '工作情况统计', // 主标题文本，支持使用 \n 换行。
                top: "8", // title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'
                left: "8", // title 组件离容器左侧的距离。 ...同上
                textStyle: { // 主标题文字的设置
                    fontSize: 16,
                    fontWeight: "normal",
                },
            },
            series: [
                {
                    type: 'gauge', // 测量仪
                    center: ['50%', '50%'], // 图形坐标位置 左, 右
                    radius: '60%', // 控制饼图的大小
                    startAngle: 90, // 开始位置
                    endAngle: -270, // 结束位置
                    pointer: { // 显示仪表盘指针
                        show: false // 是否显示仪表盘指针
                    },
                    progress: { // 展示当前进度。
                        show: true, // 是否展示进度条
                        overlap: false, // 是否重叠
                        roundCap: true, // 是否圆顶
                        clip: false, // 是否裁掉超出部分
                        itemStyle: {
                            // 设置圆形
                            color: '#1f78b4', // 设置进度条初期式样
                        }
                    },
                    axisLine: {
                        // 设置线条
                        lineStyle: {
                            width: 12, // 线条宽度
                            color: [[1, '#d2eef9']] // 不透明度, 线条设置背景色
                        }
                    },
                    splitLine: { // 分隔线样式。
                        show: false, // 是否显示分隔线。
                        distance: 0, // 分隔线与轴线的距离。
                        length: 1033 // 分隔线线长。支持相对半径的百分比。
                    },
                    axisTick: { // 刻度样式。
                        show: false // 是否显示刻度。
                    },
                    axisLabel: { //刻度标签。
                        show: false, // 是否显示标签。
                        distance: 50 // 标签与刻度线的距离。
                    },
                    data: [
                        {
                            value: 64, // 可写变量  此value 对应 formatter: '{value}%' 中的Value  64类型不对请用'64'
                            detail: {  // 仪表盘边框数据详情，用于显示数据。
                                valueAnimation: false, // 是否开启标签的数字动画。
                                offsetCenter: ['0%', '0%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                                fontSize: 20 // 文字的字体大小。
                            }
                        }
                    ],
                    detail: { //仪表盘详情，用于显示数据 仪表盘中间数字数据。
                        color: '#1f78b4', // 文本颜色，默认取数值所在的区间的颜色
                        formatter: '{value}%' // 格式化函数或者字符串  formatter: function (value) { return value.toFixed(0);}
                        // width: 20,
                        // height: 14,
                        // fontSize: 14,
                        // borderColor: 'auto',
                        // borderRadius: 20,
                        // borderWidth: 1,
                    },
                }
            ]
        }

上述配置实现效果图

// 通过npm 安装使用方法
// npm install echarts --save

// 封装echarts 并返回原型对象
// src\utils\echarts.js 文件


// 引入
import * as echarts from 'echarts'

export const echartsfn = (id, opt) => {
  // document.getElementById(id) 获取DOM
  const myChart = echarts.init(document.getElementById(id))
  myChart.setOption(opt)
  return myChart
}


// 组件内引入
// xxx.vue

import { echartsfn } from '@/utils/echarts'

methods: {
    setEcharts(val) {
        // 必须等真实DOM渲染完成，不然报错
        this.$nextTick(() => {
            // echartsfn('DOM的id', '上面代码配置的option对象')
            const echartsProto = echartsfn(val.id, {}) 
        })
    }
}

今天做项目过程中发现当前图表一个bug，使用版本为4.2.1  当圆环满360时，当前圆环全部消失，只留下文字。

解决办法：让圆环不满360°即可解决, 例如 359.99 °

在当前版本 data中detail配置不生效，

解决办法：把data中detail内容放到下面detail中就生效了