定制echarts3.0饼图
来源:互联网 发布:与朋友交而不信乎的与 编辑:程序博客网 时间:2024/05/21 07:14
/** * 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);}
0 0
- 定制echarts3.0饼图
- 浅谈Echarts3.0
- Echarts3.0使用心得
- echarts3 饼图 柱形图 显示数据
- echart2.0 Vs echarts3.0
- ECharts3.0 强大的统计图
- vue中echarts3.0自适应
- 使用Echarts3.0做图表
- Echarts3饼图01之南丁格尔玫瑰图
- Echarts3.0+Ajax请求数据柱状图实例
- 可视化篇:Echarts3.0引入百度地图
- 关于echarts3.0散点图的一点封装
- echarts3.0之关系图详解
- Echarts3.0引入百度地图-简单说
- Echarts2.0和Echarts3.0添加柱状图标签值
- Echarts3.0:实现一个页面放多个Echarts图表的方法
- Echarts3.0的简单使用,动态获取数据
- Echarts3.0加载和订正气象格点数据
- elasticsearch 5.x常见问题整理
- 将Eclipse代码导入到AndroidStudio的两种方式
- JS类的封装及实现代码
- 1048. Find Coins (25)-PAT甲级
- 好领导、严领导,你工作后哪类领导让你受益?
- 定制echarts3.0饼图
- Linux的inode的理解
- 分布式事务架构的五大演进 ,以交易系统为例
- 完全跨站点跨域名单点(SSO)同步登录和注销
- 深入理解Android L新特性之 页面内容&共享元素过渡动画
- Spring AOP ,面向切面
- vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
- Linux进程栈和线程栈
- threejs系列教程