echarts半圆进度条

    技术2022-07-13  84

    initEcharts(dataArr) { var echarts = require('echarts'); // 基于准备好的dom,初始化echarts实例 var myChart1 = echarts.init(document.getElementById(dataArr.id)); let options1 = { tooltip: { formatter: "{a} <br/>{b} : {c}%" }, series: [{ name: "内部进度条", type: "gauge", radius: '100%', startAngle: 180, //开始角度 endAngle: 0, //结束角度 axisLine: { lineStyle: { color: [ [dataArr.value / 100, dataArr.color], [1, "rgba(240, 242, 248, 1)"] ], width: 30 } }, axisLabel: { show: false, }, axisTick: { show: false, }, splitLine: { show: false, }, itemStyle: { show: false, }, detail: { formatter: function(value) { if (value !== 0) { var num = Math.round(value); return parseInt(num).toFixed(0) + "%"; } else { return '0%'; } }, offsetCenter: [0, -30], textStyle: { padding: [0, 0, 0, 0], fontSize: 18, fontWeight: '700', color: dataArr.color } }, title: { //标题 show: true, offsetCenter: [0, 0], // x, y,单位px textStyle: { color: "#fff", fontSize: 14, //表盘上的标题文字大小 fontWeight: 400, fontFamily: 'PingFangSC', color:"rgba(102, 102, 102, 1)" } }, data: [{ name: dataArr.name, value: dataArr.value, }], pointer: { show: false }, animationDuration: 4000, }, ] } // 绘制图表 myChart1.setOption(options1); } //调用 let dataArr = { value:0, id:"echarts1", color:'rgba(67, 207, 39, 1)', name:"CPU利用率" } this.initEcharts(dataArr)

    Processed: 0.011, SQL: 9