Echarts饼状图

最新推荐文章于 2021-12-28 15:23:22 发布

原创最新推荐文章于 2021-12-28 15:23:22 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #pie

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用ECharts实现的SIM卡状态饼状图组件。该组件通过AngularJS指令定义，能够展示SIM卡的激活情况，并提供了详细的配置选项，如颜色、标题、图例等。

//sim卡 --- 饼状图
ddpApp.directive('simPieChart', function () {
return {
restrict: 'A',
link: function (scope, ele, attr) {
attr.$observe('serieData', function () {
if (attr.serieData.length) {
console.log(attr);
var myChart = echarts.init(document.getElementById(attr.id));
myChart.clear();
var option = {
title: {
text: 'SIM卡总数量' + attr.titleData,
textStyle: {
color: '#4e4b4e',
fontSize: 14,
fontWeight: 'normal'
},
x: 'center',
// left:'30%',
bottom: 15
},
legend: {
orient: 'vertical',
right: 10,
bottom: 30,
itemWidth: 16,
itemHeight: 16,
data: JSON.parse(attr.legendData)
},
// grid: {
// show: true,
// left: '5%',
// right: '5%',
// top: '10%',
// bottom: '5%',
// borderWidth: 1,
// containLabel: true,
// borderColor: '#000',
// },
color: ['#71b6f9', '#7f8dff', '#fcb247'],
series: [
{
name: '已激活sim卡使用情况',
type: 'pie',
// selectedMode: 'multiple',
// radius: [0, '50%'],
radius: '50%',
// radius: [0, '60%'],
center: ['50%', '45%'],
hoverAnimation: false,
avoidLabelOverlap: true,
selectedOffset: 0,
label: {
normal: {
show: true,
position: 'top',//orient
formatter: function (params) {
return params.percent + "% " + params.value;
},
emphasis: {
show: true
},
textStyle: {
fontSize: 14,
// color: '#535050'
}
}
},
data: JSON.parse(attr.serieData)
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
$(window).resize(function () {
myChart.resize();
myChart.setOption(option, true);
});
}
});
}
}
});