标签部分
<Tabs v-model="showtab" @on-click="showdata">
<TabPane label="HTTPCODE" name="httpcode">
<Card style="font-weight: 900;text-align:center " v-if="JSON.stringify(barData) == '{}'">No Data</Card>
<div id="myChart" style="height: 400px;" v-show="barDataX != []"></div>
js部分 这里将获取到的数据放进图表中。
这上方可以写接口和获取数据。
let myChart = ''
myChart = echarts.init(document.getElementById('myChart'))
let option = {
color: ['#3398DB'],
title: {
text: 'HTTPCODE',
subtext: 'Second'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 默认为直线,可选为:'shadow' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],// x轴数据
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
type: 'bar',
barWidth: '60%',
data: [] // y轴数据
}
]
}
myChart.setOption(option)
on(window, 'resize', this.resize)
created() {},
// 销毁前执行
beforeDestroy() {
off(window, 'resize', this.resize)
}
以上可以直接用
出现的问题:
1.当 id=“myChart” 的元素使用图标的时候,不能使用if 否则可能会导致myChart.setOption(option) 方法找不到,即是 myChart为空。
参考:examples柱状图