关于前端:echarts表盘配置

echarts 表盘配置

1. 开发环境 vue+echarts
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们常常会应用到 echarts 中的表盘, 效果图如下:

4.template 中代码如下:

<div id="yibiaopan" style="width: 100%; height: 300%;position:relative;top:30px;left:4px"></div>

5. 数据配置如下:

let ybp: any = {
        title: {
          text: "设施综合效率 OEE",
          left: "center",
          bottom:30,
          textStyle: {
            color: "#83c7e3",
            fontWeight: 800,
          },
        },
        
        legend: { },
        tooltip: {formatter: "{a} <br/>{b} : {c}%",
          position: ['100%', '100%'],
        },
        series: [
          {
            // axisLabel: {
            //     backgroundColor: 'auto',
            //     borderRadius: 2,
            //     color: '#eee',
            //     padding: 3,
            //     textShadowBlur: 2,
            //     textShadowOffsetX: 1,
            //     textShadowOffsetY: 1,
            //     textShadowColor: '#222'
            // },
            name: "",
            radius: '100%',
            type: "gauge",
            detail: {formatter: "{value}%" },
            // data: [50],
            data: oeeArr,
          },
        ],
      };

6. 如何调整表盘的大小呢?

 次要是：批改 series 上面的  radius 的值

7. 本期的教程到这这里就完结啊啦, 是不是很 nice, 让咱们一起致力走向巅峰!