效果如下:
0-20%是绿色,20%-80%橙色,80%以上是红色
只需要在series配置项里添加如下代码:
// 根据y轴区间不同设置不同颜色
itemStyle: {
normal: {
color: function (params) {
var index_color = params.value;
if (index_color < 20) {
return "rgb(14, 186, 131)"
} else if (index_color >= 20 && index_color < 80) {
return 'rgb(254, 185, 112)';
} else {
return 'red'
}
}
}
},
全部代码如下:
<template>
<div class="container">
<div ref="chart" style="width:60%;height:310px;"></div>
<el-table :header-cell-style="headerStyle" :cell-style="cellStyle" :data="performanceData"
style="width: 100%">
<el-table-column prop="cycle" label="周期" width="170">
</el-table-column>
<el-table-column prop="oldranknum" label="排名" width="170">
</el-table-column>
<el-table-column prop="score" label="得分">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: ["chartData"],
data() {
return {
activeWidth: "",
performanceData: [],
// 单元格样式
cellStyle: {
fontSize: '16px'
},
// 表格头样式
headerStyle: {
fontSize: '16px'
},
}
},
created() {
this.performanceData = this.chartData.performance.sort((a, b) => {
return b.cycle - a.cycle
})
},
mounted() {
const that = this;
this.$nextTick(function () {
that.init();
});
},
watch: {
chartData: {
handler() {
const that = this;
that.$nextTick(() => {
that.init();
});
},
deep: true,
}
},
methods: {
init() {
console.log(this.chartData, 112);
let chart = this.$refs.chart
let myChart = this.$echarts.init(chart)
let option = {
//你的代码
tooltip: {
// trigger: 'axis',
// formatter: this.chartData.ranknum,
// formatter: (params) => {
// let index = params.dataIndex
// console.log(index, 'params', this.chartData.performance);
// let performance = this.performanceData
// let arr = performance.sort((a, b) => {
// return a.cycle - b.cycle
// })
// let obj = arr[index]
// let str = `排名:${obj.oldranknum}`
// return str
// },
// axisPointer: { // 坐标轴指示器,坐标轴触发有效
// type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
// },
// confine: true
show: false
},
grid: {
left: '2%',
right: '8%',
bottom: '17%',
top: '16%',
containLabel: true
},
xAxis: {
type: 'category',
name: '',
data: this.chartData.xAxisData,
nameTextStyle: {
fontSize: 18,
// padding: [0, 50, 10, 0],
color: '#666666',
},
axisLine: {
show: true,
lineStyle: {
color: '#ECECEC'
}
},
axisTick: {
show: true,
},
axisLabel: {
// interval: 0,
// rotate: 40,
show: true,
textStyle: {
fontFamily: 'Microsoft YaHei',
color: '#666666',
fontSize: "40px"
}
},
},
yAxis: {
type: 'value',
name: '排名占比',
// data: this.chartData.xAxisData,
// nameLocation: "end",
max: 100,
min: 0,
nameTextStyle: {
fontSize: 18,
padding: [0, 38, 10, 0],
// fontFamily: 'Alimama DongFangDaKai'
},
axisLine: {
show: false,
lineStyle: {
color: '#666666',
}
},
axisLabel: {
formatter: (value) => {
if (value == 60 || value == 40) {
return ""
} else {
return value + "%"
}
},
textStyle: {
fontFamily: 'Microsoft YaHei',
fontSize: 18,
}
},
axisTick: { //x轴刻度线
show: false
},
},
series: [{
name: '得分',
type: 'scatter',/* 设置为散点图 */
symbolSize: 13,/* 散点大小 */
// barWidth: '28%',
color: "rgb(112, 162, 252)",
label: {
show: false,
formatter: '排名前' + this.chartData.data + '%',
position: "top", // 展示在柱子的上方
color: "#000",
fontSize: 18
},
// 根据y轴区间不同设置不同颜色
itemStyle: {
normal: {
color: function (params) {
var index_color = params.value;
if (index_color < 20) {
return "rgb(14, 186, 131)"
} else if (index_color >= 20 && index_color < 80) {
return 'rgb(254, 185, 112)';
} else {
return 'red'
}
}
}
},
data: this.chartData.data,
markLine: {
symbol: 'none', // 去掉箭头
data: [
{
type: 'average',
yAxis: 20,
// yAxis: 0.252000,
name: '平均值',
// 单独配置每条线的样式
lineStyle: {
color: 'rgb(123, 178, 255)',
type: 'solid'
}
},
{
type: 'average',
yAxis: 80,
// yAxis: '0.25000',
name: '平均值',
// 单独配置每条线的样式
lineStyle: {
color: 'rgb(123, 178, 255)',
type: 'solid',
}
}
],
label: {
normal: {
formatter: '' // 这儿设置安全基线
}
}
},
// data: [90, 44.5, 80]
},
]
};
myChart.setOption(option)
window.addEventListener("resize", function () {
myChart.resize()
})
}
}
}
</script>
<style scoped lang="scss">
.container {
display: flex;
}
.header_rum {
display: flex;
align-items: center;
justify-content: space-between;
// width: 48%;
margin: 0 auto -20px;
}
</style>