Echarts 饼图动态数据比例处理干货

前段时间想做一个统计数据人气指数高低，打算做一个饼图，可以一目了然很直观的看出报名，点击…高低之分
这个处理只是自己涉及到的层面，简单了然没有深入
详细见官网开发文档饼图开发文档
官方实例饼图实例
JS插件：（****有人上传我没权限在上传，各位自己找吧）
从两方面一个PHP动态数据层一个是从HTML饼图展示（直接代码）

PHP

数据需要自己整合，说白了就是所占比列，查询数据方面自己处理，但是一定要处理一下数据占总数的比例是多少！涉及到的函数有
//叠加处理总和简单（怕自己忘了写上了） $sum = 0; $sum += $val['num'];

//第二块是 四舍五入保留两位小数 单个数据占比 上层是foreach循环 数据格式下边贴出来
 $bl_lv = round($value['num']/$sum,2)*100;

暂且命名这个数组叫data PHP处理一下 json_encode($data);

//二维数组 bl_lv 就是扇形占比
Array
(
    [0] => Array
        (
            [cate_id] => 57
            [cate_name] => aa
            [num] => 86
            [bl_lv] => 15
        )
    [1] => Array
        (
            [cate_id] => 16
            [cate_name] => bb
            [num] => 65
            [bl_lv] => 11
        )

    [2] => Array
        (
            [cate_id] => 14
            [cate_name] => cc
            [num] => 36
            [bl_lv] => 6
        )
 )

HTML CSS JQ

引入好插件

//html很简单有地方展示就行
<div class="chart1">
	<div id="chart"></div>
</div>

<style>
    .chart1{
        width: 95%;
        height: 400px;
    }
</style>

JQ 这里边看我的注释

</script>
	//json数据后台 assign传过来的
	var datas = '<{$js_data}>';
	//处理一下json 数据（没啥可说的）
	var json_data = JSON.parse(datas);
	//创建多个 空数组 接受处理使用
	var NameData = [];
	var AllData = [];
	var Other = 'Other';
	var count = 0;
	var data_num = 0;
	//遍历数据 类似foreach 循环处理 item等同于value，index类似于key键值
	json_data.forEach(function(item,index) {
		//这个数据需要 因为我只需要排名前19位的，其余用other代替，整合后边所有的lilv
		//（比如一共30条数 我只要前20 后10个 用other代替也不显示具体名字，利率归总为（100减 前19名利率和））
		if(index < 19){
			NameData.push(item.cate_name);
		    AllData.push({
		        value: item.bl_lv,
		        name: item.cate_name
		    });	
		}else{
			count += item.bl_lv; 
		}
	})
	//如果count存在 代表数据多余19条 多余单独处理 注意使用push增添数据
	//标准的数据格式是这样的 
	//       	  {value:335, name:'直接访问'},
     //           {value:310, name:'邮件营销'},
     //           {value:234, name:'联盟广告'},
     //           {value:135, name:'视频广告'},
     //           {value:1548, name:'搜索引擎'}
	if(count > 0){
		NameData.push(Other);
	    AllData.push({
	        value: count,
	        name: Other
	    });
	}	
	drawCharts(NameData, AllData);
    function drawCharts(NameData, AllData){
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}:({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data: NameData,
            },   
            //颜色 注重说下 我20条数据 默认是10条数据中颜色不会重复 没办法我自己设置了20个色卡 这个注意下 颜色别重叠
            color:['#c23531', '#2f4554','#61a0a8','#d48265','#91c7ae','#ca8622','#bda29a','#6e7074','#546570','#749f83','#ffb74d','#ff7043','#bcaaa4','#efebe9','#424242','#78909c','#ef9a9a','#f8bbd0','#263238','#e88769'
            ],
            series: [
                {
                    name:'人气指数',
                    type:'pie',
                    radius: ['50%', '70%'],
                    //官方文档解释是 这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                    avoidLabelOverlap: false,
                    label: {
                    	//字体处理样式 居中...
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                            	//圈内字体大小 
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: AllData
                }
            ]
        };
        //chart 就是上边html的id
        echartsPacking('chart', option);
    }
	//这一堆 是为了页面自适应处理的 不用刻意理解 知道 id是啥 option是就行
    function echartsPacking(id, option){
        //图表id  设置function
        var worldMapContainer = document.getElementById(id);
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = '100%';
            worldMapContainer.style.height = '100%';
        };
        resizeWorldMapContainer();
        var myChart = echarts.init(worldMapContainer);
        myChart.setOption(option);
        window.onresize = function () {
            resizeWorldMapContainer();
            myChart.resize();
        };
    }
</script>

效果图
Echarts 饼图动态数据比例处理干货
大概就这些上边也有官方文档和实例注意事项看代码注释，为了数据活起来！！！

Echarts 饼图 动态数据比例 处理干货

PHP

HTML CSS JQ

相关推荐

Echarts 饼图动态数据比例处理干货