Echarts绘制极坐标系下的多色柱状图

效果图：

关键点1：为了显示X轴的文本，将最大值100向左偏移

设置方法：设置最大值为120，最小值0，间隔25

关键点2：设置柱状图的多个颜色

设置方法：

完整代码：

        let xData = ['粥', '小笼包', '八宝粥', '炸酱面']
        let yData = ['28', '35', '38', '49']
        myChart = this.$echarts.init(document.getElementById(this.chartId))
        myChart.setOption(
          {
            angleAxis: {
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#00567D'
                }
              },
              axisLabel: {
                color: '#fff'
              },
              splitLine: {
                lineStyle: {
                  color: '#00567D'
                }
              },
              min: 0,
              max: 120,
              interval: 25
            },
            radiusAxis: {
              type: 'category',
              data: xData,
              z: 100,
              axisLabel: {
                color: '#fff'
              }
            },
            polar: {
            },
            tooltip: {
              trigger: 'item',
              formatter: function (params, ticket, callback) {
                return params.name + ' : ' + _that.toolTipData[params.dataIndex] + ' (' + params.data + '%)'
              }
            },
            series: [{
              type: 'bar',
              data: yData,
              coordinateSystem: 'polar',
              name: 'A',
              stack: 'a',
              itemStyle: {
                normal: {
                  // 定制显示（按顺序）
                  color: function (params) {
                    var colorList = ['#97e7ff', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf']
                    return colorList[params.dataIndex]
                  }
                }
              }
            }]
          }
        )
        $(window).resize(function () {
          myChart.resize()
        })