Echarts 图表插件学习（3）-- 给柱形图的每个柱子设置不同颜色

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图表插件

链接: https://pan.baidu.com/s/1GCM4H4E5F0L-ni4R5boIvQ 密码: w7pw