网站代码优化目的,云南昆明百度推广公司,WordPress搭建在线电影,做网站就找喇叭人在数据可视化领域#xff0c;环形图是一种非常有效的图表类型#xff0c;它能够清晰地展示各部分与整体的关系。今天#xff0c;我们将通过ECharts来创建一个带百分比标注的环形图#xff0c;并详细解释如何实现这一效果。 1. 数据准备
首先#xff0c;我们定义了一些基础…在数据可视化领域环形图是一种非常有效的图表类型它能够清晰地展示各部分与整体的关系。今天我们将通过ECharts来创建一个带百分比标注的环形图并详细解释如何实现这一效果。 1. 数据准备
首先我们定义了一些基础数据
dashedPic一个base64编码的图片用作Y轴标签的背景。color一个颜色数组用于环形图各部分的填充颜色。chartData包含活动名称、价值和单位的对象数组。
2. 数据处理
接下来我们对chartData进行处理提取名称和值并计算总和价值
chartData.forEach((v, i) {arrName.push(v.name);arrValue.push(v.value);sum sum v.value;
})3. 构建环形图系列
我们使用双重循环来构建环形图的系列每个活动对应两个环形图系列一个用于显示实际数据另一个用于创建间隔效果
chartData.forEach((v, i) {pieSeries.push({name: 课外活动,type: pie,clockWise: false,hoverAnimation: false,radius: [65 - i * 15 %, 57 - i * 15 %],center: [30%, 50%],label: {show: false},data: [{value: v.value,name: v.name}, {value: sum - v.value,name: ,itemStyle: {color: rgba(0,0,0,0)}}]});pieSeries.push({name: ,type: pie,silent: true,z: 1,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [65 - i * 15 %,57 - i * 15 %],center: [30%, 50%],label: {show: false},data: [{value: 7.5,itemStyle: {color: #E3F0FF}}, {value: 2.5,name: ,itemStyle: {color: rgba(0,0,0,0)}}]});
})每个系列都设置了radius和center属性来定义环形的大小和位置并且通过data属性来绑定具体的数据。
4. 百分比和Y轴标签
我们为每个活动计算百分比并创建Y轴标签
v.percent (v.value / sum * 100).toFixed(1) %;
lineYAxis.push({value: i,textStyle: {rich: {circle: {color: color[i],padding: [0, 5]}}}
});5. 完整的ECharts配置
最后我们将所有配置整合到ECharts的option对象中
let dashedPic data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEXKysrk5OTj4TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC;
let color [#FCC667, #8693F3, #89C3F8, #F2A695];
let chartData [{name: 剪纸,value: 132,unit: 间},{name: 篮球,value: 421,unit: 人},{name: 声乐,value: 817,unit: 人},{name: 舞蹈,value: 121,unit: 人}
];
let arrName [];
let arrValue [];
let sum 0;
let pieSeries [],lineYAxis [];// 数据处理
chartData.forEach((v, i) {arrName.push(v.name);arrValue.push(v.value);sum sum v.value;
})// 图表option整理
chartData.forEach((v, i) {pieSeries.push({name: 课外活动,type: pie,clockWise: false,hoverAnimation: false,radius: [65 - i * 15 %, 57 - i * 15 %],center: [30%, 50%],label: {show: false},data: [{value: v.value,name: v.name}, {value: sum - v.value,name: ,itemStyle: {color: rgba(0,0,0,0)}}]});pieSeries.push({name: ,type: pie,silent: true,z: 1,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [65 - i * 15 %,57 - i * 15 %],center: [30%, 50%],label: {show: false},data: [{value: 7.5,itemStyle: {color: #E3F0FF}}, {value: 2.5,name: ,itemStyle: {color: rgba(0,0,0,0)}}]});v.percent (v.value / sum * 100).toFixed(1) %;lineYAxis.push({value: i,textStyle: {rich: {circle: {color: color[i],padding: [0, 5]}}}});
})option {backgroundColor: #0A2E5D,title: {text: 学生课外选修情况,textAlign: center,left: 49%,textStyle: {color: #fff,fontSize: 22,fontWeight: 400}},color: color,grid: {top: 15%,bottom: 54%,left: 30%,containLabel: false},yAxis: [{type: category,inverse: true,axisLine: {show: false},axisTick: {show: false},axisLabel: {formatter: function(params) {let item chartData[params];console.log(item)return {line|}{circle|●}{name| item.name }{bd||}{percent|item.percent}{value| item.value}{unit|人}},interval: 0,inside: true,textStyle: {color: #333,fontSize: 14,rich: {line: {width: 170,height: 10,backgroundColor: {image: dashedPic}},name: {color: white,fontSize: 14,},bd: {color: white,padding: [0, 5],fontSize: 14,},percent:{color: white,fontSize: 14,},value: {color: white,fontSize: 16,fontWeight: 500,padding: [0, 0, 0, 20]},unit: {fontSize: 14}}},show: true},data: lineYAxis}],xAxis: [{show: false}],series: pieSeries
};
6. 应用配置
将配置应用到ECharts实例上就可以看到最终的环形图效果
myChart.setOption(option);7. 总结
通过以上步骤我们创建了一个带百分比标注的环形图它不仅展示了各部分的比例关系还通过Y轴标签提供了更详细的信息。这种图表非常适合展示分类数据的比例和分布情况。你可以根据自己的需求调整颜色、大小和样式以达到最佳的展示效果。希望这篇文章能够帮助你掌握ECharts环形图的创建技巧为你的数据可视化项目增添亮点。如果有任何问题欢迎在评论区交流。
