本文主要是介绍定制echarts3.0饼图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
/*** Customized Pie(定制饼图)* @param obj* @param data* @param params*/
function getCustomizedPie(obj,data,params){// 定制饼图默认参数var params_pie = {isTitle : true,titleLeft : "center",titleMaginTop : 20,isVisualMapShow :false,visualMapMin : 10,visualMapMax : 1000,isLegend : false,legendOrient : "horizontal",legendLeft : "center",legendTop : "bottom",isToolbox : false,toolboxOrient : "horizontal",toolboxLeft : "right",toolboxTop : "top", radius : "55%",left : "50%",top : "50%",labelLineSmooth : 0.2,labelLineLength : 10,labelLineLength2 : 20,// 回调函数func : null};// 处理参数if (typeof params == "object") {if (params == null) {params = params_pie;} else {params = mix(params_pie, params, true);}} else {params = params_pie;}var num = "[" + data.data + "]";var legend = "[" + data.legend + "]";num = eval(num);legend = eval(legend);var option = {backgroundColor: '#2c343c',title: {show : params.isTitle,text : data.title,subtext : '',left: params.titleLeft,top: params.titleMaginTop,textStyle: {color: '#ccc'}},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},visualMap: {show: params.isVisualMapShow,min: params.visualMapMin,max: params.visualMapMax,inRange: {colorLightness: [0, 1]}},legend : {show : params.isLegend,orient : params.legendOrient,// vertical/horizontalleft : params.legendLeft,top : params.legendTop,data : legend},toolbox : {show : params.isToolbox,orient : params.toolboxOrient,left : params.toolboxLeft,top : params.toolboxTop,feature : {dataView : {readOnly : false},restore : {},saveAsImage : {}}},series : [{name:'访问来源',type:'pie',radius : params.radius,center: [params.left, params.top],data: num.sort(function (a, b) { return a.value - b.value}),roseType: 'angle',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: params.labelLineSmooth,length: params.labelLineLength,length2: params.labelLineLength2}},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]};var myChart = echarts.init(document.getElementById(obj));if(params.func){myChart.on('click', function(para) {// 下面写回调函数params.func(para.data.data_id);});}myChart.setOption(option);
}
这篇关于定制echarts3.0饼图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!