ECharts图表整合----折线图、柱状图、扇形图

ECharts包含了许多图表，ECharts网址：http://echarts.baidu.com/echarts2/doc/doc.html；

本文是主要对常用的折线图、柱状图、扇形图三种图进行封装到一个js里；

折线图的效果图如下：



柱状图的效果图如下：



扇形图的效果图如下：



myChart.js封装后的ECharts代码：

/*

*

    需要的参数：

    myChartName:统计图名称

    myChartId:统计图id

    formatterFun:格式化tooltip

    xAxisData:数组，横坐标

    legendData: 数组，纵坐标代表意义

    seriesType: 图表类型//line,'bar'

    barGap:80%

    barCategoryGap:80%

    seriesData:数组

*/

require.config({

    paths: {

        echarts: 'echarts'

    }

});

function getChart(myChartId,option){

    require(

        [        'echarts',

                'echarts/chart/bar',

                'echarts/chart/line',

                'echarts/chart/pie',

                'echarts/chart/funnel'

        ],function (ec) {

            var myChart = ec.init(document.getElementById(myChartId));

            myChart.setOption(option);

        }

    );

}

function myChart(myChartId,myChartName,formatterFun,legendData,xAxisData,seriesType,barGap,barCategoryGap,seriesData){

    var series=[];

    for(var i=0,len=legendData.length;i<len;i++){

        series[i]={

            name:legendData[i],

            type:seriesType,

            barGap:barGap,

            barCategoryGap:barCategoryGap,

            itemStyle: {

                normal: {

                    label: {

                        show: true,

                        position: 'top',

                        formatter: '{b}\n{c}'

                    }

                }

            },

            data:seriesData[i]

        }

    }

    var option={

        title : {

            text: myChartName

        },

        tooltip : {

            trigger: 'axis',

            formatter: formatterFun

        },

        legend: {data:legendData},//data:['最高气温','最低气温'

        toolbox: {

            show : true,

            feature : {

                mark : {show: false},

                dataView : {show: true, readOnly: false},

                magicType : {show: true, type: ['line', 'bar']},

                restore : {show: true},

                saveAsImage : {show: true}

            }

        },

        calculable : true,

        animationDuration :5000,

        xAxis : [

              {

                    type : 'category',//category  time  value  log  

                    position: 'bottom',

                    boundaryGap: true,

                    axisLine : {    // 轴线

                        show: true,

                        lineStyle: {

                            type: 'solid',

                            width: 1

                        }

                    },

                    axisTick : {    // 轴标记

                        show:true,

                        length: 10,

                        lineStyle: {

                            color: 'red',

                            type: 'solid',

                            width: 2

                        }

                    },

                    axisLabel : {

                        show:true,

                        interval: 'auto',    // {number}

                        rotate: 30,

                        margin: 6,

                        formatter: '{value}',

                        textStyle: {

                            fontFamily: 'Arial',

                            fontStyle: 'italic',

                            fontWeight : 'normal',

                        }

                    },

                    splitLine : {

                        show:true,

                        lineStyle: {

                            color: '#483d8b',

                            type: 'dashed',

                            width: 1,

                            type: 'solid',

                        }

                    },

                    splitArea : {

                        show: true,

                        areaStyle:{

                            color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']

                        }

                    },

                    data : xAxisData

                }

        ],

        yAxis : [{type : 'value'}],

        series : series

    };

    getChart(myChartId,option);

}

/*

*

    需要的参数：

    myChartName:统计图名称

    myChartId:统计图id

    max：funnel的最大值

    formatterFun:格式化tooltip

    legendData: 数组，纵坐标代表意义

    seriesData:数组

*/

function myChartPie(myChartId,max,myChartName,formatterFun,legendData,seriesData){

    option = {

        title : {

            text: myChartName,

            x:'center'

        },

        tooltip : {

            trigger: 'item',

            formatter: formatterFun

        },

        legend: {

            orient : 'vertical',

            x : 'left',

            data:legendData

        },

        toolbox: {

            show : true,

            feature : {

                mark : {show: false},

                dataView : {show: true, readOnly: false},

                magicType : {

                    show: true,

                    type: ['pie', 'funnel'],

                    option: {

                        funnel: {

                            x: '25%',

                            width: '50%',

                            funnelAlign: 'left',

                            max: max

                        }

                    }

                },

                restore : {show: true},

                saveAsImage : {show: t
aecb
rue}

            }

        },

        calculable : true,

        series : [

            {

                name:myChartName,

                type:'pie',

                radius : '55%',

                center: ['50%', '50%'],

                data:seriesData

            }

        ]

    };

    getChart(myChartId,option);

}

Html代码及JS代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Demo</title>

        <script src="echarts/echarts.js"></script>

        <script src="myChart.js"></script>

        <script>

        var myChartId='chartsId';

        var myChartName='统计图-折线图';

        var formatterFun=function (params,ticket,callback) {

                    var res = params[0].name;

                    for (var i = 0, l = params.length; i < l; i++) {

                        if(params[i].value==0){

                            res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;

                        }else{

                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value*100).toFixed(5)+"%";

                        }

                    }

                    return res;

        };

        var legendData=['次日留存率','三日留存率','七日留存率','三十日留存率'];

        var xAxisData=["2017-03-01","02","03","04","05","06"];

        var seriesType='line';

        var barGap='80%';

        var barCategoryGap='50%';

        var seriesData=[];

        seriesData[0]=[0.0499494,0.0732613,0.0757541,0.075925,0.0477412,0.0588606];

        seriesData[1]=[0.041512,0.0320729,0.0356896,0.0252499,0.0250543,0.0361977];

        seriesData[2]=[0.0202497,0.0168805,0.0128943,0.0191127,0.0293944,0.0217186];

        seriesData[3]=[0,0,0,0,0,0];

        myChart(myChartId,myChartName,formatterFun,legendData,xAxisData,seriesType,barGap,barCategoryGap,seriesData);

        </script>

        <script>

        var myChartId='chartsId1';

        var myChartName='统计图-柱状图';

        var formatterFun=function (params,ticket,callback) {

                    var res = params[0].name;

                    for (var i = 0, l = params.length; i < l; i++) {

                        if(params[i].value==0){

                            res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;

                        }else{

                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value*100).toFixed(5)+"%";

                        }

                    }

                    return res;

        };

        var legendData=['次日留存率'];

        var xAxisData=["2017-03-01","02","03","04","05","06"];

        var seriesType='bar';

        var barGap='80%';

        var barCategoryGap='50%';

        var seriesData=[];

        //seriesData[0]=[0.0499494,0.0732613,0.0757541,0.075925,0.0477412,0.0588606];

        seriesData[0]=[0.499494,0.732613,0.757541,0.75925,0.477412,0.588606];

        myChart(myChartId,myChartName,formatterFun,legendData,xAxisData,seriesType,barGap,barCategoryGap,seriesData);

        </script>

        <script>

        var myChartId='chartsId2';

        var max=525;

        var myChartName='统计图-扇形图';

        var formatterFun= "{a} <br/>{b} : {c} ({d}%)";

        var legendData=['演唱会','MV','KTV'];

        var seriesData=[

                {value:435, name:'演唱会'},

                {value:525, name:'MV'},

                {value:335, name:'KTV'}

            ];

        myChartPie(myChartId,max,myChartName,formatterFun,legendData,seriesData);

        </script>

    </head>

    <body>

        <div id="chartsId" class="main" style='width:1000px;height:500px;'></div>

        <div id="chartsId1" class="main" style='width:1000px;height:500px;'></div>

        <div id="chartsId2" class="main" style='width:600px;height:400px;'></div>

    </body>

</html>

代码下载：http://pan.baidu.com/s/1kVHlIRX。