之前以为只要在created里面请求回来数据然后在mounted里面渲染图表就行了，试了一下竟然没成功，然后就百度了一下，发现在请求回来数据之后使用this.$nextTick函数渲染表格就行了，代码如下（仅仅就是个demo示例哈） 本人是个菜鸡，嘿嘿嘿
<template>
<div>
<div id="main" ref="ech"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
data() {
return {
arr: [],
brr: [],
crr: [],
drr: [],
err: [],
frr: [],
// option: {
// xAxis: {
// type: 'category',
// data: []
// },
// yAxis: {
// type: 'value'
// },
// series: [
// {
// data: [],
// type: 'line'
// },
// {
// data: [],
// type: 'line'
// }
// ]
// }
option: {
legend: {
// data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
inactiveColor: '#777'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
xAxis: {
type: 'category',
data: [],
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: {
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: { show: false }
},
grid: {
bottom: 80
},
dataZoom: [
{
textStyle: {
color: '#8392A5'
},
handleIcon:
'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
brushSelect: true
},
{
type: 'inside'
}
],
series: [
{
type: 'line',
name: 'Day',
data: [],
smooth: true,
itemStyle: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
},
{
name: 'MA5',
type: 'line',
data: [],
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA10',
type: 'line',
data: [],
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA20',
type: 'line',
data: [],
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA30',
type: 'line',
data: [],
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
}
]
}
};
},
created() {
this.getData();
},
mounted() {
// this.init();
},
methods: {
getData() {
// var res = [
// [1, 'grgr', 6],
// [6, 'grgrrg', 9],
// [8, 'grwgg', 5],
// [10, 'hthhh', 3],
// [4, 'gdrarg', 7],
// [5, 'ahrett', 9],
// [1, 'gfdgdn', 5]
// ];
axios.get('../../../a.json').then(res => {
console.log(res.data)
var res1 = [];
res1 = res.data
for (var i in res1) {
this.arr.push(res1[i][0]);
this.brr.push(res1[i][1]);
this.crr.push(res1[i][2]);
this.drr.push(res1[i][3]);
this.err.push(res1[i][4]);
this.frr.push(res1[i][5]);
}
this.option.series[0].data = this.brr
this.option.series[1].data = this.crr
this.option.series[2].data = this.drr
this.option.series[3].data = this.err
this.option.series[4].data = this.frr
this.option.xAxis.data = this.arr
this.$nextTick(() => {
this.init()
})
})
// var res1 = [
// ['2015/12/31', 1, 4, 6, 8],
// ['2015/10/31', 9, 7, 7, 1],
// ['2015/1/31', 4, 3, 1, 9],
// ['2015/2/31', 9, 5, 7, 2],
// ['2015/6/31', 6, 9, 5, 3],
// ]
},
init() {
var chartDom = this.$refs.ech;
var myChart = echarts.init(chartDom);
myChart.setOption(this.option);
}
}
};
</script>
<style lang="scss" scoped>
#main {
width: 800px;
height: 500px;
border: 1px solid deepskyblue;
}
</style>
