重要参数 inverse
inverse: true
drawLine() {
window.addEventListener("resize", this.drawLine);
let myChart = this.$echarts.init(this.$refs.echarts);
var option = {
tooltip: {
trigger: "axis",
show: false,
axisPointer: {
type: "shadow",
},
},
grid: {
top: "0%",
right: "0%",
left: "0%",
bottom: "0%",
},
xAxis: [
{
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期天",
],
axisLine: {
show: false,
lineStyle: {
color: "#FFFFFF",
},
},
axisLabel: {
margin: 0,
show: false,
color: "#e2e9ff",
textStyle: {
fontSize: 14,
},
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
axisLabel: {
formatter: "{value}",
color: "#e2e9ff",
},
inverse: true, //echarts Y轴翻转属性,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(0,186,255,.6)",
},
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
},
],
series: [
{
type: "bar",
data: [70, 100, 100, 100, 100, 100, 100],
barWidth: "70%",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0,244,255,1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,77,167,1)", // 100% 处的颜色
},
],
false
),
},
},
label: {
normal: {
show: true,
lineHeight: 30,
formatter: "{c}",
position: "top",
textStyle: {
color: "#00D6F9",
fontSize: 20,
},
},
},
},
],
};
myChart.clear();
myChart.resize();
myChart.setOption(option);
},