echarts柱形图去除x轴线y轴线,更改柱子颜色
程序员文章站
2022-07-13 14:25:07
...
<template>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" class="echarts"></div>
</template>
<script>
export default {
data() {
return {
// 指定图表的配置项和数据
option: {
xAxis: {
type: "category",
data: [
"平和",
"气虚",
"阳虚",
"痰湿",
"湿热",
"血瘀",
"特禀",
"气郁"
],
axisLabel: {
textStyle: {
fontSize: 11
}
}
},
yAxis: {
show: true,
type: "value",
splitLine: { show: false }, //去除网格线
nameTextStyle: {
color: "#abb8ce"
},
axisLabel: {
formatter: function() {
return "";
}
},
axisTick: {
//y轴刻度线
show: false
},
axisLine: {
//y轴
show: false
},
normal: {
color: "pink"
}
},
series: [
{
// 每个柱子的数据
data: [10,20,12,12,12,20,21,22],
type: "bar",
// 改变颜色
itemStyle: {
normal: {
// 柱子的颜色
color: "#D4B594"
}
}
}
]
}
}
}
}
</script>
需要给echarts定义宽高的