const seriesData = [
{ color: `#72D5FF`, value: 20, name: '防疫工作' },
{ color: `#72A2FF`, value: 30, name: '安全管理' },
{ color: `#72FFA2`, value: 14, name: '机具设备'},
{ color: `#FFE872`, value:11, name: '现场安全' },
{ color: `#FFC772`, value:5, name: '消防安全' },
{ color: `#FF7272`, value: 34, name: '临时用电'},
{ color: `#E372FF`, value: 62, name: '文明施工' },
];
option = {
polar: {
center: ['50%', '50%'],
radius: [50, '80%'],
},
angleAxis: {
min:0,
max: 100,
startAngle: 90,
clockwise:false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
clockWise: false,
splitLine: {
show: false,
},
z:10,
},
radiusAxis: {
type: 'category',
inverse: false,
axisLabel: {
inside: true,
formatter(value, index) {
return `${seriesData[index].value }%`;
},
align: 'left',
margin: -5,
interval: 0, // 强制显示所有
},
axisTick: {
show: false, // 是否显示坐标轴刻度
},
axisLine: {
show: false, // 是否显示坐标轴轴线
},
z: 100,
data: seriesData.map(item => item.name),
},
series: [
{
type: 'bar',
data: seriesData.map(item => item.value),
coordinateSystem: 'polar',
itemStyle: {
color(params) {
return seriesData[params.dataIndex].color;
},
},
labelLayout(params) {
return {
x: 150,
y: 150,
verticalAlign: 'middle',
align: 'center'
}
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold',
formatter:(params)=>{
return `{name|${seriesData[params.dataIndex].name}}\n{value|${seriesData[params.dataIndex].value}%}`;
},
rich: {
value: {
color: 'inherit',
},
name: {
color: 'inherit',
},
},
},
},
stack: 'a',
},
{
type: 'bar',
data: seriesData.map(item => 75- item.value),
coordinateSystem: 'polar',
itemStyle: {
color: '#E3F0FF',
},
emphasis: {
disabled : true
},
stack: 'a'
}
]
};
echarts实现多进度环状图
转载请注明出处或者链接地址:https://www.qianduange.cn//article/355.html
相关文章
-
纯js判断文件流格式类型:pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定!
-
three.js 场景中如何彻底删除模型和性能优化
-
uniapp使用md5加密 js使用md5加密
-
Vue项目引入translate.js 国际化自动翻译组件
-
【筛选方法汇总】js简单实现多条件过滤数组对象,返回新的数组,根据一个数组内的元素,过滤另一个数组对象【持续更新】
-
华为OD机试 - 推荐多样性(Java & JS & Python & C)
-
自适应插件autofit.js使用(这里演示vue项目)
-
Error: module ‘pages下某.js‘ is not defined 微信小程序
-
【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建
-
Ajax学习(3rd)
发布的文章
纯js判断文件流格式类型:pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定!
2024-02-04 21:02:58
three.js 场景中如何彻底删除模型和性能优化
2024-02-04 21:02:58
uniapp使用md5加密 js使用md5加密
2024-02-04 21:02:56
Vue项目引入translate.js 国际化自动翻译组件
2024-02-04 21:02:55
【筛选方法汇总】js简单实现多条件过滤数组对象,返回新的数组,根据一个数组内的元素,过滤另一个数组对象【持续更新】
2024-02-04 21:02:55
华为OD机试 - 推荐多样性(Java & JS & Python & C)
2024-02-04 21:02:54
自适应插件autofit.js使用(这里演示vue项目)
2024-02-04 21:02:54
Error: module ‘pages下某.js‘ is not defined 微信小程序
2024-02-04 21:02:49
【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建
2024-02-04 21:02:37
jQuery的表格插件jqGrid 使用记录
2024-02-04 11:02:44
大家推荐的文章