关于前端: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,让咱们一起致力走向巅峰!