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数组，在后台可以将字符串转换为jsonArray
var 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);         
        }
    );
}