echarts 插件开发柱状图、折线图、饼状图（具有详细的注释）

<div id="popInfoDriverTotal" class="popBox" style="left:50px; top:60px"><h2 class="gytitle"><em>分析图表</em><span onclick="HideDriverTotal()">关闭</span></h2><div class="Driver1" style="float:left; border:1px solid #ddd; margin-left:5px; margin-top:5px"><h2 class="NewTitle01">按分类统计次数</h2><div id="mainB" class="Driver3" style="float:left"></div></div><div class="Driver1" style="float:left; border:1px solid #ddd; margin-left:5px; margin-top:5px"><h2 class="NewTitle01">按时间统计次数</h2><div id="mainC" class="Driver3" style="float:left"></div></div><div class="Driver2" style="float:left; border:1px solid #ddd; margin-left:5px; margin-top:5px"><h2 class="NewTitle01">按时间统计量</h2><div id="mainD" class="Driver4" style="float:left"></div></div></div>/***  以下是js代码*/require.config({    paths: {        echarts: '../res/js/echarts/echartNew'//引入echarts的js文件    }});function ShowTuB(data){//饼状图data是一个json数组，在后台可以将字符串转换为jsonArrayvar res=data;var namestr=[];var piedata=[];for ( var i = 0; i < res.length; i++) {//遍历这个数组，取出数组中的每一个值然后放入一个集合中。namestr.push(res[i].WEIXIANPINFL);piedata.push({name:res[i].WEIXIANPINFL,value:res[i].YUNSHUCS});}require(        [            'echarts','echarts/chart/pie'// 使用柱状图就加载pie模块，即使没有这个路径        ],        function (ec) { //主函数，生成echart实例，绘制图表。其中ec是固定的            var myChart = ec.init(document.getElementById('mainB'));//基于准备好的dom，初始化echarts实例var option = {// 指定图表的配置项和数据title : {//标题text: '',//标题文本内容subtext: '',x:'center'},tooltip : {//提示信息trigger: 'item', //触发类型，默认数据触发。当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据formatter: "{b} : {c} ({d}%)"},legend: {//图例x : 'left',//图例水平靠左y : 'center',//图例竖直居中itemGap:8,//8个缺口orient : 'vertical',//标定方向：垂直，默认值为horizontal，图例 icon 的布局朝向。可选项为“horizontal”和“vertical”data:namestr//参数},toolbox: {//可视化工具箱show : false,//是否显示辅助工具feature : { //各工具配置项,除了各个内置的工具按钮外，还可以自定义工具按钮,注意:自定义的工具名字，只能以 my 开头mark : {show: true},dataView : {show: true, readOnly: false},//数据视图magicType : {//动态类型切换show: true, type: ['pie', 'funnel'],//切换类型：饼图，漏斗option: {//指定图表的配置项和数据funnel: {漏斗x: '25%',width: '50%',funnelAlign: 'left',max: 1548}}},restore : {show: true},//重置saveAsImage : {show: true}//保存图片}},calculable : false,//是否启用拖拽重计算特性，默认为false。series : [{name:'',type:'pie',//类型,饼状图radius : '80%',//半径center: ['50%', '50%'],//居中data:piedata,//饼状图上的数据itemStyle: {//系列级个性化normal: {//饼状图的标准labelLine:{//饼图不显示线条length:2,show:false},label:{//饼图不显示文字show:true,position : 'inner',//饼图图上显示百分比--内部formatter : function (params){ if((params.percent - 0).toFixed(0)<10){//判断如果小于多少就不显示  return ''; } return (params.percent - 0).toFixed(0) + '%';},textStyle:{//文本样式fontSize:16//字体大小},color: function(params) {var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B'];return colorList[params.dataIndex];}},} }}]   };             myChart.setOption(option);                 }    );}function ShowTuC(data){//柱状图var res=data;var namestr=[];var bardata=[];for ( var i = 0; i < res.length; i++) {namestr.push(res[i].YUEFEN);bardata.push({name:res[i].YUEFEN,value:res[i].YUNSHUCS});}require(        [            'echarts','echarts/chart/bar'        ],        function (ec) {            var myChartC = ec.init(document.getElementById('mainC'));var option = {grid:{//控制图表摆放位置x:'45px',y:'15px',x2:'15px',y2:'35px',borderWidth:1,backgroundColor:'#f7f7f7'},title : {//标题text: '',subtext: ''},tooltip : {//提示信息trigger: 'axis'//’axis’时显示该列下所有坐标轴所对应的数据axisPointer : {            // 坐标轴指示器，坐标轴触发type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'，即type类型为shadow时不显示指示线，如果不添加axisPointer这个条件则不显示指示线。}},legend: {data:[]//无图例},toolbox: {//工具栏show : false,feature : {mark : {show: true},dataView : {show: true, readOnly: false},//数据视图magicType : {show: true, type: ['line', 'bar']},//动态类型切换restore : {show: true},//重置saveAsImage : {show: true}//保存图片}},calculable : true,//是否启用拖拽重计算特性，默认为false。xAxis : [//x轴显示信息{type : 'category',//固定的data : namestr//x轴数据信息}],yAxis : [//y轴显示信息{type : 'value',//固定的axisLabel : {  //显示y轴数字的后缀                            formatter: '{value} °C'                          },splitNumber:10//可变，这样写就是显示y轴显示到数字10，其中splitNuber默认值为5。}],series : [{name:'运输次数',//提示信息中的数字type:'bar',//柱状图barWidth:15,//控制柱图单个宽度data: bardata//数据}]   };            myChartC.setOption(option);                 }    );}function ShowTuD(data){//折线图var res=data;var namestr=[];var linedata=[];for ( var i = 0; i < res.length; i++) {namestr.push(res[i].YUEFEN);linedata.push({name:res[i].YUEFEN,value:res[i].YUNSHUZL});}require(        [            'echarts','echarts/chart/line'        ],        function (ec) {            var myChartD = ec.init(document.getElementById('mainD'));var option = {grid:{//控制图表摆放位置x:'45px',y:'15px',x2:'15px',y2:'35px',borderWidth:1,backgroundColor:'#f7f7f7'},title : {//标题text: '',subtext: ''//标题下方显示内容},tooltip : {//提示信息trigger: 'axis'//’axis’时显示该列下所有坐标轴所对应的数据，},legend: {//图注data:[]},toolbox: {//工具栏show : false,//不显示工具栏feature : {//各工具配置项,除了各个内置的工具按钮外，还可以自定义工具按钮,注意:自定义的工具名字，只能以 my 开头mark : {show: true},//记号dataView : {show: true, readOnly: false},//数据视图magicType : {show: true, type: ['line', 'bar']},//动态类型切换restore : {show: true},//重置saveAsImage : {show: true}//保存图片}},calculable : true,//是否启用拖拽重计算特性，默认为false。xAxis : [//x轴显示信息{type : 'category',//x轴数据，固定的data : namestr//x轴数据信息}],yAxis : [//y轴显示信息{type : 'value',//固定的splitNumber:10///可变，这样写就是显示y轴显示到数字10，其中splitNuber默认值为5。}],series : [{name:'运输量',type:'line',barWidth:15,//控制柱图单个宽度itemStyle: {//系列级个性化normal: {barBorderColor:'#00A2E8',color: '#00A2E8'}},data: linedata//数据显示}]   };            myChartD.setOption(option);                 }    );}