效果圖：
關鍵點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: '{b} : {c}%'
},
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]
}
}
}
}]
}
)