直接看效果：

//饼图var echartB;//柱状图var echartZ;var countInfo1="countInfo1";$(function(){GainStatisticsData();});$(window).resize(function () {if(echartZ!=undefined){echartZ.resize();}if(echartB!=undefined){echartB.resize();}if(echartL!=undefined){echartL.resize();}});function GainStatisticsData() {if (echartZ != undefined) {echartZ.dispose();}echartZ = echarts.init(document.getElementById("chartZ"), "shine"); 基于准备好的dom，初始化echarts实例。init初始化var option = {tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend: {data:['唯丝普水氧焕颜美容仪','库存数']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'category',data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value'}],series : [{name:'唯丝普水氧焕颜美容仪',type:'bar',data:[1025]},{name:'库存数',type:'bar',data:[107]},]};echartZ.setOption(option, true);//扇形图if (echartB != undefined) {echartB.dispose();}echartB = echarts.init(document.getElementById("chartB"), "shine");option = {title : {text: '仪器销售用户访问来源',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data:['唯丝普水氧焕颜美容仪','库存数']},series : [{name: '唯丝普水氧焕颜美容仪销售库存',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:1025, name:'唯丝普水氧焕颜美容仪'},{value:107, name:'库存数'},{},],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};echartB.setOption(option, true);}

然后看效果图：

总结：

这个跟MVC的做法都相差无几，然后就是自己的灵活运用。