1.實現的效果

2.引用Echarts

本地：<script src="../lib-v3/echarts/echarts.min.js"></script>

線上：<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

3.Html頁面

 <div class="chart-1"  id="test"  style="width:800px;height:400px;"> </div>

4.封裝外掛

 .factory('chartFactory', function () {
            var service = {
                xjData:xjData
            };

            return service;

          
            /**
             *echart圖表封裝函式,矩形圖，支援最大支援一組12個矩形不同顏色
             * @ labelData, 例項ID陣列
             * @ XArr, X軸資料
             *@ YArr, Y軸資料
             *@ divId,圖表所在DIV的ID
             *@ titleText ,Y軸標題
             *@ ubtext ,Y軸標題
             *@ unit ,Y軸單位刻度
             */
            function xjData(labelData, XArr, YArr, divId, titleText, subtext,unit) {
                var lineColor = ['#3C72C4', '#DD2292', '#F79709', '#2BD56F', '#666699',];
                var seriesDataArr = [];
                var countFor = 0;
                for (var i = 0; i < labelData.length; i++) {
                    var seriesObj = {
                        name:labelData[i],//y軸上的滑鼠事件顯示
                        type: 'bar',
                        data: YArr[i],//y軸資料
                        itemStyle: {
                            normal:{
                                color: function (params){
                                    var colorList = ['#3C72C4','#DD2292','#F79709','#ffc032','#2BD56F','#f47e39','#4D2292','#879709','#f0c032','#9BD56F','#147e39','#947e39'];
                                    return colorList[params.dataIndex];
                                }
                            },
                        },
                    };
                    seriesDataArr.push(seriesObj);
                    countFor++;
                    if (countFor == labelData.length) {
                        XJRequire(labelData, XArr, seriesDataArr, divId, titleText, subtext ,unit)
                    }
                }
            };

            /**
             *echart載入模組函式
             * @ labelData, 例項ID陣列
             * @ XArr, X軸資料
             *@ YArr, Y軸資料
             *@ divId,圖表所在DIV的ID
             *@ titleText ,Y軸標題
             *@ subtext ,Y軸標題
             *@ unit ,Y軸單位刻度
             */
            function XJRequire(labelData, XArr, seriesDataArr, divId, titleText, subtext,unit ) {

                var option2 = {
                    title: {
                        text: titleText,//y軸大標題
                        subtext: subtext//y軸小標題
                    },
                    tooltip: {
                        show: true
                    },
                  /*  legend: {
                        data: labelData//可以選擇是否顯示
                    },*/
                    grid: {
                        containLabel: true
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: XArr  //x軸座標值
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel : {
                                formatter: '{value}'+ unit//y軸單位刻度
                            }
                        }
                    ],
                    series: seriesDataArr,
                };
                echarts.init(document.getElementById(divId)).setOption(option2, true);
            }
           

        })
 

5.呼叫Echarts

                vm.Id = [];
                vm.Id[0] = "深圳";
                vm.x = [];
                vm.x = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
                vm.y = [];
                vm.y[0] = [];vm.y[0] = [5, 8, 12, 10, 10, 35, 20, 40, 10, 10, 2,10];
                chartFactory.xjData(vm.Id, vm.x, vm.y, 'test', "平均溫度", '', '℃');
 

6.Echarts 外掛下載，適用於本地載入Echarts圖表外掛