排名 锥形 柱状图(pictorialBar)

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            var obj = {
  0: '金斗营乡',
  1: '安乐镇',
  2: '西湖镇',
  3: '定水镇',
  4: '石佛镇'
};

option = {
   backgroundColor: '#061C2A',
   grid: [{
      left: "4%",
      right: "4%",
      bottom: "10%",
      height: "70%",
      containLabel: true,
   }],
   tooltip: {
      trigger: 'axis',
      borderColor: "#092B46",
      backgroundColor: "#092B46",
      textStyle: {
      color: "#ffffff",
      fontSize: 14,
      align: 'left'
      },
      axisPointer: {
      type: 'shadow'
      },
      formatter: function(params) {
      return params[0].name + ': ' + params[0].value;
      }
   },
   xAxis: {
      axisLabel: {
      textStyle: {
         color: '#A3CAE8',
         fontSize: 24,
         fontWeight: 700
      }
      },
      axisLine: {
      show:false
      },
      splitLine: {
      show:false
      },
      axisTick: {
      show:false
      },
      data: ['TOP1','TOP2','TOP3', 'TOP4', 'TOP5'],
   },
   yAxis: {
      splitLine: {
      show: false
      },
      axisTick: {
      show: false
      },
      axisLine: {
      show: false
      },
      axisLabel: {
      show: false
      }
   },
   series: [{
      name: 'hill',
      type: 'pictorialBar',
      barCategoryGap: '0%',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      label: {
      show: true,
      position: 'top',
      distance: 5,
      color: '#F4FAFF',
      fontWeight: 'bolder',
      fontSize: 24
      },
      itemStyle: {
      normal: {
         color: function(params) {
            let colorList = [
            { color0: '#ECA641', color1: 'rgba(236,166,65,0.00)' },
            { color0: '#2EFE95', color1: 'rgba(46,254,149,0.00)' },
            { color0: '#5A6AFF', color1: 'rgba(90,106,255,0.00)' },
            { color0: '#2BCEFF', color1: 'rgba(43,206,255,0.00)' },
            { color0: '#129BED', color1: 'rgba(18,155,237,0.00)' },
            ]
            return {
            type: "linear", x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
               { offset: 0, color: colorList[params.dataIndex].color0 },
               { offset: 1, color: colorList[params.dataIndex].color1 }
            ],
            globalCoord: false
            }
         }
      },
      emphasis: {
         opacity: 1
      }
      },
      data: [500, 400, 300, 200, 100], // 修改值
      z: 10
   }]
};