<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="echarts.js"></script><!-- 引用echartsJS -->
<title>清心醉-echarts.js</title>
</head>
<body>
<div id="show" style="width: 1200px;height:500px;"></div> <!-- 饼状图形区域 -->
</body>
<script>
var maxSum = 50; //总数量
var maxData = 0; //百分比计算需要
function genData() {
const nameList = [];
const legendData = [];
const seriesData = [];
var selectData = {};
for(var i = 0 ; i<= maxSum ; i ++){
legendData.push("demo"+i); //创建对应的名称数据
maxData = (maxData+ (100-i));
seriesData.push({ //结构数据体
name: "demo"+i,
value: (100-i),
});
//因为饼状显示的数量问题,为了避免过多,前面的30个显示出来,后面的20个默认不勾选
if(i<=30){
selectData["demo"+i] = true; //选重状态
} else {
selectData["demo"+i] = false; //非选中状态
}
}
return {
legendData: legendData,
seriesData: seriesData,
selectData: selectData
};
}
const data = genData();
var chartDom = document.getElementById('show');
var myChart = echarts.init(chartDom);
var option;
//注意:
//百分比的问题,因为业务需求不同,比如作者的项目中,百分比是需要当前的除所有的,但是如果取消了对应名称selected事件之后,系统会默认按照对应数值从新计算百分比
//formatter: '{a} <br/>{b} : {c} ({d}%)'的方式,为饼图内所有数据综合的当前百分比
//formatter:function(obj)方法,为根据总的数量,来获取实际的总百分比,就算只保留1个其他全部取消显示(selected=false),一样只显示其在对应真是总数的百分比
//所以如果需要系统计算已显示的,则使用formatter: '{a} <br/>{b} : {c} ({d}%)方法,否则则使用formatter:function(obj)回调方法进行处理
//还有排序的问题,可以参考更多echarts文档,代码中的一样为作者项目动态数据中已经按大到小已排列
option = {
title: {
text: '类型统计',
subtext: '总数量['+ maxSum +']',
left: 'center'
},
tooltip: { //鼠标移动到对应区域的数据
trigger: 'item',
//formatter: '{a} <br/>{b} : {c} ({d}%)', //这里的方法为实际占用的动态方法
formatter:function(obj){
var tarValue; //当前名字的占比
var list = data.seriesData;
for(var i = 0 ; i<list.length; i++){
if(list[i].name == obj.data.name){
tarValue = list[i]['value'];
break;
}
}
//其实可以直接使用obj.data.value,因为后面也有需要获取百分比的,所以统一这种方式.
var p = ((tarValue/maxData)*100); //
return obj.data.name + ":"+ tarValue+ "("+p.toFixed(2)+"%"+")";
},
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: data.legendData,
selected:data.selectData,
//show:true,
//利用回调函数来获取百分比
formatter:function(name){ //这里因为获取的不是obj,所以只能通过循环来获取,这里获取的是右边显示的对应名称
//console.log(name);
var total = maxSum ; //总数
var tarValue; //当前名字的占比
var list = data.seriesData;
for(var i = 0 ; i<list.length; i++){
if(list[i].name == name){
tarValue = list[i]['value'];
break;
}
}
//如果可以,建议这里进行tarValue和maxSum是否为0的动作,不知道JS内除0是否会有异常
//因为该代码是从作者项目中动态扣出来的,已经确保seriesData.value保证>0
var p = ((tarValue/maxData)*100);
return name + ":"+p.toFixed(2)+"%";
}
},
series: [ //饼图的分布区域及占比
{
name: '总数量',
type: 'pie',
radius: '60%',
center: ['40%', '60%'],
data: data.seriesData,
selected: data.selectData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</html>
通过清心醉
关于作者