1.安裝依賴
sudo cnpm install echarts --s
2.main.js引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.需要的頁面引入
import echarts from 'echarts'
4.methods自定義方法
// 折線圖
getLine () {
// 基于準(zhǔn)備好的dom啃奴，初始化echarts實例
let myChart1 = echarts.init(document.getElementById('myChart1'));
//或者this.myChart1 = echarts.init(document.getElementById(id))
// 繪制圖表销凑，this.echarts1_option是數(shù)據(jù)
myChart1.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
y: 'bottom',
x: 'center',
data:['當(dāng)前房價','區(qū)域房價'],
padding:[0,0,0,0],
//圖例文字的樣式
textStyle: {
// color: '#fff',
fontSize: 22
}
},
xAxis: {//橫坐標(biāo)
type: 'category',
boundaryGap: false,
data: this.xAxisData,
// 改變x軸字體顏色和大小
axisLabel: {
textStyle: {
// color: '#62B4BB',
fontSize:'22'
},
},
},
yAxis: {
type: 'value',
// 改變x軸字體顏色和大小
axisLabel: {
textStyle: {
// color: '#62B4BB',
fontSize:'22'
},
},
},
series: [
{
name:'當(dāng)前房價',
type:'line',
// stack: '總量',
data: [11, 90, 15, 13, 11, 13, 10],
},
{
name:'區(qū)域房價',
type:'line',
// stack: '總量',
data: [11, 22, 15, 13, 98, 13, 19],
}
]
})
}
5.初始化echarts,調(diào)用(視情況而定恭垦，活數(shù)據(jù)一般在ajax方法成功后調(diào)用)
//放在mounted里面
mounted(){
this.getLine()
},
//或者在axios/ajax成功后調(diào)用echarts
that.getLine()
可以去官網(wǎng)替換類型 https://echarts.apache.org/zh/index.html
