在工作中老使用到echarts,在此记录一些,省的用到老查:
option = {
// tooltip: {
// formatter: '{a} <br/>{b} : {c}%',
// },
series: [
{
type: 'gauge',
pointer: {
show: false, //是否显示指针
},
progress: {
show: true,
roundCap: true,
},
min: 0,
max: 500,
itemStyle: {
color: '',
},
axisLine: {
roundCap: true,
lineStyle: {
color: [[1, '#5A5A89']],
},
},
splitLine: {
show: false, //是否显示分隔线。
},
clockwise: true, //仪表盘刻度是否是顺时针增长。
axisTick: false, //是否显示刻度
splitNumber: 1, //分割线之间的刻度
// 起始点和最终点距离设置
axisLabel: {
show: true,
distance: -40,
color: '#5A5A89',
},
detail: {
// 仪表盘文字。
formatter: '{value}',
color: '#fff',
// show : false // title下面的文字(53)
},
title: {
// 仪表盘标题。
show: true,
offsetCenter: [0, '-10%'], // title圆环中心的距离
fontSize: 15,
color: '',
},
data: [
{
value: forecastWeatherQualityArr.value.aqi, // 后台返回的数据
name: '', // 根据后台数据定义名称(优,良)
},
],
},
],
};
const series = option.series[0];
const data = option.series[0].data[0];
if (data.value <= 50) {
series.itemStyle.color = '#43B643';
series.title.color = '#43B643';
data.name = '优';
}
if (data.value <= 100 && data.value > 50) {
series.itemStyle.color = '#FFFF00';
series.title.color = '#FFFF00';
data.name = '良';
}
效果: