前言
背景：vue寫的后台管理，需要將表格數據繪制成圖表（折線圖，柱狀圖），圖表數據都是通過接口請求回來的。
安裝
cnpm install echarts --s (我這里用了淘寶鏡像，不知道同學自行百度)
實例化
在已有的項目中下載好了echarts 之后，可以打開官方文檔，但是我覺得官方文檔對於實例化介紹的不夠清晰，這也是我為什么在這么多的文章中還要寫的原因，前輩寫的太模糊了，我決定好好給后來人，需要在項目中引用圖表的人，一些實用，快捷的東西。
官方文檔：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
不廢話，貼代碼
1.在需要用圖表的地方引入 例如：hello.js
import echarts from 'echarts'
2.hello.vue 中寫個容器
|
1
2
|
<div id=
'myChart'
style=
'width：600px;height:600px'
>
</div>
|
3.在hello.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
export
default
{
name:
'hello'
,
data () {
return
{
msg:
'Welcome to Your Vue.js App'
}
},
mounted(){
this
.drawLine();
},
methods: {
drawLine(){
// 基於准備好的dom，初始化echarts實例
let myChart =
this
.$echarts.init(document.getElementById(
'myChart'
))
// 繪制圖表
myChart.setOption({
title: { text:
'在Vue中使用echarts'
},
tooltip: {},
xAxis: {
data: [
"襯衫"
,
"羊毛衫"
,
"雪紡衫"
,
"褲子"
,
"高跟鞋"
,
"襪子"
]
},
yAxis: {},
series: [{
name:
'銷量'
,
type:
'bar'
,
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
|
這樣就調用好了視力了，在頁面刷新就可以了
效果如圖：
這樣是很簡單的方法，嗯重點來了，我的數據又不是寫死的~數據都是后台給我的呀（官方，還真的沒有怎么說，示例也是ajax異步請求的）
項目一開始是有完整的一個表格數據，也就是我要把表格數據繪制成圖表，還有一堆的篩選條件，有點懵逼~
感覺問題很多啊，給我五分鍾，分析分析，分解分解一下
1.數據我都是有的，我需要繪制四條折線，表格數據循環復制給新的四個數組（篩選條件一變，四組數據也跟着變）
2.橫坐標也是動態，項目是時間（剛開始我還想偏了，自動填充日期的那種），表格的第一行就是日期，同樣用新數組儲存
3.數據重新請求了，我的圖表也要跟着變才對呀（圖表重新繪制）
再次貼代碼（廢話再多，不如一行代碼）
1.在調用篩選條件的方法那里，創建五個新的數組（四條折線），橫坐標（日期）
這里沒有代碼
2.橫坐標動態的：
|
1
2
3
4
5
|
xAxis: {
type:
'category'
,
boundaryGap:
false
,
data:
this
.xData,
//xData 就是日期這個數組
},
|
3.series （四條折線的數據）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
series : [{
name:
this
.tooltipData[0],
type:
'line'
,
stack:
'總量'
,
data:
this
.new_userData,
},
{
name:
this
.tooltipData[1],
type:
'line'
,
stack:
'總量'
,
data:
this
.new_deviceData,
},
{
name:
this
.tooltipData[2],
type:
'line'
,
stack:
'總量'
,
data:
this
.active_userData,
},
{
name:
this
.tooltipData[3],
type:
'line'
,
stack:
'總量'
,
data:
this
.active_deviceData,
}]
|
4.隨着篩選數據，重新繪制圖表
調用篩選條件方法的時候再調用這個實例化 drawline 方法就可以了
this.drawLine();
