echarts眾所周知是一個非常非常好用的資料視覺化的一個工具，但是引數繁多，並且API並不是十分容易看懂，故在此記錄封裝之後的，以便於之後的使用與開發，版本，基於ehcarts4.0

//柱狀則線圖條形圖生成類，引數
//bardiv：div所在id
//titlename：標題
//legenddata：legeng(圖示)
//xAxisdate：非數值軸的資料（分類）
//bartypes：圖表型別 ,bar柱狀，line折線,tiao條形圖
//seriesdata:資料，如果是多柱或者多折線，則{分類名:資料}{實有人口:[19325, 23438,19325, 23438, 31000,19325, 23438, 31000, 31000,31000, 31000],實有房屋:[19325, 23438,19325, 23438, 31000,19325, 23438, 31000, 31000,31000, 31000]};
 

//stack:是否疊加,true疊加，false不疊加
//gridleft:展示區距離左邊的距離
//gridtop:展示區距離上面的距離
//gridheight展示區高度
//gridwidth展示區寬度
//colors:顏色組合
//itemGap:圖示之間的距離
//dataZoomarg:是否增加可移動時間軸
//rotate:x軸文字傾斜角度
//barWidth:柱子的寬度
//fontsize:字型大小全域性的
function createecharts(hzzchar) {
    this.bardiv = '',
    this.titlename = '標題',
    this.legenddata = [],
    this
 
.xAxisdate = [],
    this.bartypes = 'bar',
    this.seriesdata = [],
    this.stack = false,
    this.gridleft = '15%',
    this.gridtop = '10%',
    this.gridheight = '65%',
    this.gridwidth ='80%',
    this.colors =  ['#29c0ff', '#1bd7b4', 'yellow', '#fbcb7d'];
    this.itemGap = 5,
    this.dataZoomarg = false
 
,
    this.rotate = 0,//傾斜角度
    this.barWidth = 20,//柱子的寬度
    this.fontsize = 12;//字型預設大小
    this.bardiv = hzzchar.bardiv;//對應的Id
    this.titlename = hzzchar.titlename;//對應標題名
    this.legenddata = hzzchar.legenddata;//對應圖例
    this.xAxisdate = hzzchar.xAxisdate;//對應x軸欄位，也有可能是Y軸
    if(hzzchar.bartypes!=undefined) {
        this.bartypes = hzzchar.bartypes;//圖示型別
    }
    this.seriesdata = hzzchar.seriesdata;//資料
    this.stack = hzzchar.stack;//是否疊加
    if(hzzchar.gridleft!=undefined) {
    this.gridleft = hzzchar.gridleft;}
    if(hzzchar.gridtop!=undefined) {
    this.gridtop = hzzchar.gridtop;}
    if(hzzchar.gridheight!=undefined) {
    this.gridheight = hzzchar.gridheight;}
    if(hzzchar.gridwidth!=undefined) {
    this.gridwidth = hzzchar.gridwidth;}
    if(hzzchar.colors!=undefined) {
    this.colors = hzzchar.colors;}
    if(hzzchar.itemGap!=undefined) {
        this.itemGap = hzzchar.itemGap;//圖例間隔
    }
    this.dataZoomarg = hzzchar.dataZoomarg;//是否開啟滾動軸
    if(hzzchar.rotate!=undefined){
       this.rotate = hzzchar.rotate;//傾斜角度
    }
    if(hzzchar.barWidth!=undefined) {
        this.barWidth = hzzchar.barWidth;//柱狀寬度
    }
    if (hzzchar.fontsize != undefined) {//字型大小，預設12
        this.fontsize = hzzchar.fontsize;
    }

    this.bardiv = echarts.init(document.getElementById(this.bardiv));
    var tool = new tools();//呼叫工具類
    this.newseriesdae = [];
    for (var i in this.seriesdata) {
        var date = this.seriesdata[i];//資料所在
        var newdate = {};
        var type = '';
        if (this.bartypes == 'tiao') {
            type = 'bar';
        } else {
            type = this.bartypes;
        }
        if (this.stack && type != 'line') {
            newdate = {name: i, type: type, stack: 'one', data: date};
        } else {
            newdate = {name: i, type: type, data: date};
        }
        this.newseriesdae.push(newdate);
    }

    this.option = {
        title: {
            show: false,
            text: this.titlename,
            textStyle: {
                fontSize: this.fontsize
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 座標軸指示器，座標軸觸發有效
                type: 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
            },
            textStyle: {
                fontSize: this.fontsize
            }

        },
        textStyle: {
            color: 'white'
        },
        color: this.colors,
        legend: {
            itemGap: 14,
            //width:'100%',
            x: 'center',
            right: 1,
            y: 'top',
            width: '100%',
            orient: 'horizontal',
            // icon:'circle',
            align: 'right',
            textStyle: {
                fontSize: this.fontsize - 2,
                color: 'white'
            },

            data: this.legenddata
        },
        grid: {
            show: true,
            height: this.gridheight,
            top: this.gridtop,
            left: this.gridleft,
            width: this.gridwidth,
            borderColor: 'white'
        },
        xAxis: {
            type: 'category',
            data: this.xAxisdate,
            axisLabel: {

                textStyle: {
                    fontSize: this.fontsize
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'white'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'white'
                }
            },

            axisLabel: {
                fontSize: this.fontsize,

                formatter: function (value, index) {//這裡是標籤返回資料的內容,等級標籤不需要進行小數點的過濾
                    var val;
                    if (value >= 10000) {//假如大於10000
                        val = value / 10000 + '萬';
                    } else if (value >= 1000000) {//假如大於百萬
                        val = value / 1000000 + '百萬';
                    } else if (value >= 10000000) {//假如大於千萬
                        val = value / 10000000 + '千萬';
                    } else {
                        val = value;
                    }
                    return val;
                }
            },
            boundaryGap: [0, 0.01]
        },
        series: this.newseriesdae
    };
    if (this.bartypes == 'tiao') {
        var ydate = this.option.xAxis;
        var xdate = this.option.yAxis;
        this.option.yAxis = ydate;
        this.option.xAxis = xdate;
    }

    if (this.itemGap != 0) {
        this.option.legend.itemGap = this.itemGap;
    }


    if (this.dataZoomarg) {
        this.option.dataZoom = {
            show: true,
            height: 25,
            realtime: true,
            handleSize: 20,
            start: 100,
            textStyle: {
                color: 'white'
            },
            end: 70
        }
    }

    this.option.xAxis.axisLabel.rotate = this.rotate;//文字傾斜
    if (hzzchar.barWidth != 0) {
        $(this.option.series).each(function (index, el) {
            el.barWidth = hzzchar.barWidth;//柱子的寬度
        });

    }
    this.bardiv.setOption(this.option, true);
    window.onresize = this.bardiv.resize;
}