echarts柱狀圖單組數據配置

var option = {
    //標題欄
    title: {
      text: '客戶總體分析',
      bottom: '0',
      left: '35%'
    },
    //選中時彈出的懸浮框
    tooltip: {
      trigger: 'axis', //'item'，數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。'axis'，坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
      axisPointer: { // 坐標軸指示器，坐標軸觸發有效
        type: 'shadow', // 默認為直線，可選為：'line' | 'shadow'
      },
      formatter: '{b}: {c}%', //需要展示的數據，b為名稱，c為數值
      confine: true //是否將懸浮框限定在特定區域
    },
    //繪圖網格
    grid: {
      left: '10%', //距離左邊界
      right: '10%',
      bottom: '10%',
      top: '20%',
      containLabel: true //為true是可防止溢出
    },
    // grid 中的 x 軸
    xAxis: [{
      type: 'category', //'value' 數值軸，'category' 類目軸，'time' 時間軸，'log' 對數軸
      //name:'這是x軸',//坐標軸名稱
      //show：true,//是否顯示x軸
      //position:'bottom',//x軸的位置
      //boundaryGap:false,//數據點和標簽會在兩個刻度的中間
      //min:'',//最小值
      //max:'',//最大值
      data: ['廣東', '江蘇', '北京', '浙江'], //x軸的類目
      axisTick: { //刻度
        show: true, //展示
        //alignWithLabel: false,boundaryGap 為 true 的時候有效，可以保證刻度線和標簽對齊
        //interval: 'auto',坐標軸刻度的顯示間隔
        //inside: false,坐標軸刻度是否朝內，默認朝外
        //length: 5,坐標軸刻度的長度。
        lineStyle: { //刻度樣式
          //color: ...,刻度線的顏色
          //width: 1,坐標軸刻度線寬。
          //type: 'solid',坐標軸刻度線的類型。'solid''dashed''dotted'
          //shadowBlur: ...,圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。
          //shadowColor: ...,
          //shadowOffsetX: 0,
          //shadowOffsetY: 0,
          //opacity: ...圖形透明度
        }
      },
      axisLine: {
        lineStyle: { //這里可以調節一些坐標軸線的樣式
          opacity: 1
        }
      },
      axisLabel: { //坐標軸標簽的設置
        show: true,
        //interval: 'auto',坐標軸刻度標簽的顯示間隔
        //inside: false,刻度標簽是否朝內，默認朝外。
        //rotate: 0,旋轉的角度從 -90 度到 90 度。
        //margin: 8,刻度標簽與軸線之間的距離。
        //formatter: null,刻度標簽的內容格式器，支持字符串模板和回調函數兩種形式。
        //showMinLabel: null,是否顯示最小 tick 的 label。可取值 true, false, null。
        //showMaxLabel: null,是否顯示最大 tick 的 label。可取值 true, false, null。
        //color: ...,刻度標簽文字的顏色，
        //fontStyle: 'normal',文字字體的風格
        //fontWeight: normal,
        //fontFamily: 'sans-serif',
        //fontSize: 12,
        //align: ...,
        //verticalAlign: ...,
        //lineHeight: ...,
        //backgroundColor: 'transparent',
        //borderColor: 'transparent',
        //borderWidth: 0,
        //borderRadius: 0,
        //padding: 0,
        //shadowColor: 'transparent',
        //shadowBlur: 0,
        //shadowOffsetX: 0,
        //shadowOffsetY: 0,
        //width: ...,
        //height: ...,
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      type: 'bar',
      data: [17.2, 9.53, 7.98, 7.05],
      itemStyle: {
        normal: {
          color: function (params) {
            //首先定義一個數組 
            var colorList = [
              '#fc8d52', '#48cfae', '#ec87bf', '#a0d468'
            ];
            return colorList[params.dataIndex]
          },
          lineStyle: {
            color: '#ff6300'
          }
        }
      },
      label: { //柱狀圖常顯示標簽
        normal: {
          show: true,
          position: 'top',
          color: '#333',
          formatter: function (params) { //通過“formatter”實現內容自定義；
            for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
              if (option.xAxis[0].data[i] == params.name) {
                var val1 = params.value || 0;
                return '{color1|' + option.xAxis[0].data[i] + '}:{color2|' + val1 + '}';
              }
            }
          },
          rich: { //通過“rich”項控制內容樣式；
            color1: {
              color: '#f7ba0e'
            },
            color2: {
              color: '#42a1fe'
            }
          },
          textStyle: {
            color: '#333'
          }
        }
      },
      barWidth: '50%'
    }],
 
  }

結果：