echarts实现多进度环状图

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实现多进度环状图相关推荐

echarts 环状图中添加图片
echarts 环状图中添加图片由于业务需要,我们可以在饼图内加入图片.图标或文字等让单调的饼图变得美观,这里我是在环状图里添加图片. 代码如下: option = {graphic: {//图形中 ...
hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-line线图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置 1.认识使用可以参考之前文章,会使用直接跳过1 引入官网的南丁格尔玫瑰图效果如下: 使用函数配置分为三个部分:初始化=> 设置 ...
【echarts记录 -- 3d 饼状图实现】
echarts记录 -- 3d 饼状图实现实现效果效果1 效果2 代码实现效果效果1 效果2 代码 /************************* pie3D 尝试更新时间: 2020. ...

echarts实现多进度环状图

echarts实现多进度环状图相关推荐

最新文章

热门文章