效果图:
关键点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()
})