这个是基于Echarts3做的柱形图,折线图,饼形图,中间还有自定义图标<div style="margin-left: auto;margin-right: auto"><div id="mainleft" style="height:300px;border:1px solid #ccc;padding:10px;width: 550px;float: left;"></div><div id="mainright" style="height:300px;border:1px solid #ccc;padding:10px;width: 550px;float: right;">aaa</div></div><script src="${ctxStatic}/echarts/echarts.min.js"></script><script type="text/javascript">var workTodayCount;var myChart;$(document).ready(function() {workTodayCount = ${fns:toJson(workTodayCount)};pie(workTodayCount);bar(workTodayCount);});function bar(workTodayCount){myChart = echarts.init(document.getElementById('mainleft'));if(!workTodayCount){myChart.showLoading({text: '正在努力加载中...'});}myChart.setOption({title: {text: '今日工作',left:'left'},toolbox: {show : true,feature : {//折线,柱形magicType : {show: true, type: ['line', 'bar']},//自定义饼形myTool2: {show: true,title: '饼形图切换',icon: 'image://http://echarts.baidu.com/images/favicon.png',onclick: function (){pie(workTodayCount);}},//换原restore : {show: true},//保存saveAsImage : {show: true}}},xAxis: {data: [workTodayCount.pfsString,workTodayCount.zcpfsString,workTodayCount.bylasString,workTodayCount.hfsString,workTodayCount.hbsString]},yAxis : [{type : 'value',splitArea : {show : true}}],series: [{name: '今日工作',type: 'bar',data: [workTodayCount.pfs,workTodayCount.zcpfs,workTodayCount.bylas,workTodayCount.hfs,workTodayCount.hbs]}]});}function pie(workTodayCount){myChart = echarts.init(document.getElementById('mainright'));if(!workTodayCount){myChart.showLoading({text: '正在努力加载中...'});}myChart.setOption({title: {text: '今日工作'},tooltip : {trigger: '今日工作',formatter: "{a} <br/>{b} : {c} ({d}%)"},toolbox: {show : true,feature : {mark : {show: true},magicType : {show: true,type: ['pie', 'tiled']},myTool2: {show: true,title: '柱形图切换',icon: 'image://http://echarts.baidu.com/images/favicon.png',onclick: function (){bar(workTodayCount);}},restore : {show: true},saveAsImage : {show: true}}},series : [{name:'今日工作',type:'pie',radius : '65%',data:[{value:workTodayCount.pfs, name:workTodayCount.pfsString},{value:workTodayCount.zcpfs, name:workTodayCount.zcpfsString},{value:workTodayCount.bylas, name:workTodayCount.bylasString},{value:workTodayCount.hfs, name:workTodayCount.hfsString},{value:workTodayCount.hbs, name:workTodayCount.hbsString}]}]});}</script>
Echarts3简单图标是咧
最新推荐文章于 2024-06-04 14:15:06 发布