需要用到百度的报表控件 ,总结如下:
1,先引入开发包,以及主题包:
<%@ include file="./common/echarts_header.jsp"%>
2,普通初始化图表,通过调用开发包
eCharts0 = ec; myChart0 = eCharts0.init(document .getElementById(‘share‘), ‘default‘); myChart0.showLoading({ text : "图表数据正在努力加载..." }
require([ ‘echarts‘,‘echarts/chart/pie‘, // 使用饼图就加载pie模块,按需加载], DrawEChart0 //异步加载的回调函数绘制图表 );
3,设置option属性
//定义图表options var options0 = { title : { text : "共享分布统计", x : "center" }, tooltip : { show : false, trigger : ‘item‘, formatter : "{a} <br/>{b} : {c} ({d}%)" }, legend : { orient : ‘vertical‘, x : ‘left‘, y : ‘top‘ }, toolbox : { show : true }, calculable : false, series : [ { name : ‘共享类型‘, type : ‘pie‘, radius : ‘60%‘, center : [ ‘51%‘, ‘55%‘ ], itemStyle : { normal : { label : { position : ‘outer‘, formatter : function( params) { return params.name + ":" + params.value + "类(" + (params.percent - 0) .toFixed(0) + ‘%)‘ } }, labelLine : { show : true } }, emphasis : { label : { show : true, position : ‘inner‘, formatter : "{b}:{c}\n{d}%" } } }, } ] }; }
其中:title:表示标题,
tooltip:提示框,
legend图例,
calculable可设置是否拖拽,
series设置数据(data类型也为数组类型)
到这就算是基本完事。。。。。
剩下的优化自行百度。。。。
时间: 2024-12-28 19:34:37