需要给echarts定义宽高
<template>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" class="echarts"></div>
</template>
<script>
export default {
data() {
return {
// 柱状图数据
answer: "",
// 指定图表的配置项和数据
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: [], // 异步加载后台获取到的数据
type: "bar",
// 改变颜色
itemStyle: {
normal: {
color: "#D4B594"
}
}
}
]
}
}
},
// echarts
// 此时,页面上的元素,已经被渲染完毕了
async mounted() {
var myChart = echarts.init(document.getElementById("main"));
// 获取柱状图数据
const data = await this.$http.get("getQu");
this.answer = data.data;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option);
// 异步加载 动态实现data的数据
let that = this;
function fetchData(cb) {
cb({
data: [
Number(that.answer.number1),
Number(that.answer.number2),
Number(that.answer.number3),
Number(that.answer.number4),
Number(that.answer.number5),
Number(that.answer.number6),
Number(that.answer.number7),
Number(that.answer.number8),
Number(that.answer.number9)
]
});
}
fetchData(function(data) {
myChart.setOption({
series: [
{
// 根据名字对应到相应的系列
data: data.data
}
]
});
});
}
}