一.横向的带有色彩的柱状图

zzt.png

          var option = {
            color: ['#3398DB'],
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: '{a1} <br/>{b} : {c1} %'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: [{
              type : 'value',
              show: false,

              min:0,
              max: 100,
            }],

            yAxis: [{
              type : 'category',
              data:['9%','11%','12%','18%','21%','29%'],
              position:'right',
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel:{
                color:'#3398DB',
              },
            },
              {
                type : 'category',
                data : ['公共设施','绿地广场','物流仓储', '教育用地', '交通运输', '居住用地'],
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false
                },
                axisLabel:{
                  color: '#3977E6',
                  fontSize: 12,
                  fontWeight: 'bolder',
                },
              }
            ],
            series : [
              {
                type: 'bar',
                itemStyle: {
                  normal: {color: '#003366'}
                },
              //运用两个柱叠加而成，如果添加数据，必须在这里也添加一个
                barGap:'-100%',
                barWidth: '10',
                barCategoryGap:'40%',
                data: [100,100,100,100,100,100],
              },
              {
                type:'bar',
                name:"用地分析",
                barWidth: '10',
                data:[9,11,12,18,21,29],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 5, 5, 0],
                    color: function(params) {
                      var colorList = [
                        '#64BD3D',
                        '#0AAF9F',
                        '#B74AE5',
                        '#EE9201',
                        '#EFE42A',
                        '#29AAE3',
                      ];
                      return colorList[params.dataIndex]
                    }
                  }
                }
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);

二.渐变的柱状图

jbs.png

 var option = {
            color: ['#3398DB'],
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                data : ['南林市', '桂林市', '柳州市', '贵港市', '河池市', '来宾市', '百色市'],
                axisTick: {
                  alignWithLabel: true
                },
                // x轴的字体样式
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize:'12'
                  }
                },
                // x轴的颜色和宽度
                axisLine:{
                  lineStyle:{
                    color:'#0A1733',
                    width:2,   //这里是坐标轴的宽度,可以去掉
                  }
                }
              }
            ],
            yAxis : [
              {
                type : 'value',
                // y轴的字体样式
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize:'12'
                  }
                },
                axisLine:{
                  show: false,
                  lineStyle:{
                    color:'#111739',
                    width:1,   //这里是坐标轴的宽度,可以去掉
                  }
                },
                splitLine: {
                  show:true,
                  //  改变轴线颜色
                  lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#111739']
                  }
                },
              }
            ],
            series : [
              {
                name:'直接访问',
                type:'bar',
                barWidth: '10%',
                data:[28, 38, 49, 30, 20, 39, 60],
                itemStyle: {
                  normal: {
                    barBorderRadius: [6, 6, 6, 6],
                    /*
                     解释下这个渐变
                   new echarts.graphic.LinearGradient(
                     0, 0, 0, 1,--->就是从0开始到结束1,只是纵向渐变
                     0, 0, 1, 0,--->就是从0开始到结束1,只是横向渐变
                      startX, startY, endX, endY,[
                        {offset: 0, color: '开始的颜色'},
                        {offset: 0.5, color: '中间颜色'},
                        {offset: 1, color: '结束的颜色'}
                      ])
                     */
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#E86330'},
                        {offset: 0.5, color: '#967681'},
                        {offset: 1, color: '#378EF1'}
                      ]
                    )
                  }

                }
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);