echarts柱状图详解

getLchart(){
          var profitData = [100,200,300,400,500]

          var option12 = {
              //鼠标悬浮提示框
              tooltip: {
                  trigger: 'axis',
                      formatter: function (datas) {
                          var res = datas[0].name + "：" + datas[0].value + "%"
                          return res
                      }
              },
              xAxis: {
                  type: 'category',
                  data: ['保洁', '维修', '搬家','保姆','母婴'],
                  //轴坐标名称(x,y轴通用)
                  name:'种类', 
                  //坐标轴名称样式(x,y轴通用)
                  nameTextStyle:{             
                      color:"#ffffff",
                      //坐标轴名称相对位置
                      padding:[5,0,0,5],  
                  },
                  //改变坐标轴字体颜色和大小(x,y轴通用)
                  axisLabel: {
                      textStyle: {
                          color: '#6E88C9',
                          fontSize: '11'
                      }
                  },
                  //坐标轴横线样式(x,y轴通用)
                  axisLine: {
                      lineStyle: {
                          color: '#6E88C9',
                      }
                  },
              },
              yAxis: {
                type: 'value',
                name: "利润占比",
                nameTextStyle:{
                    color:'#F7F7F7',
                    fontSize:11,
                    align:'left'
                },
                axisLine: {
                    onZero:false,
                    lineStyle: {
                        color: '#6E88C9' ,
                    }
                },
                //背景网格横线
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#20273A' ,
                    }
                },
                axisLabel: {
                  formatter: '{value} %',
                  color: '#6E88C9'
                }
              },
              series: [{
                    itemStyle:{
                        normal:{
                            //对应柱状条颜色
                            color: function(params) {
                                //只有一个值就是每个柱状条都是该颜色；多个值就和每个柱状条一一对应
                                var colorList = [
                                '#6E88C9',
                                ];
                                return colorList[params.dataIndex]
                            },
                            //显示对应柱状条数据
                            //label: {
                            //    //具体值
                            //    formatter:function (value) {
                            //        return value.value + '%'
                            //    },
                            //    show: true, //开启显示
                            //    position: 'right', //在上方显示
                            //    textStyle: { //数值样式
                            //        color: '#10DFE9',
                            //        fontSize: 12
                            //    }
                            //}
                        },
                    },
                    //柱状图的真实数据，是一个数组
                    data: profitData,
                    //柱状条颜色
                    barWidth: "40%",
                    type: 'bar',
              },]
          };
          //true,是清除上一个echart的缓存
          myChart9.setOption(option12,true);
        },