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