參考 https://www.jianshu.com/p/cf0a54374419
由於cnpm構建的vue項目安裝各種依賴，所以文件夾比較大，此處無法保存
安裝echarts依賴
npm install echarts -S
或者使用淘寶的鏡像先安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后 cnpm install echarts -S
在main.js中全局引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在components文件加下新建組件Echarts.vue
template標簽中加入
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
script標簽中加入
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
]
}
]
}
)
;
}
}
}
在router下的index.js中引入組件並配置路由
多個路由根據定義不同的的path來訪問
cnpm install
cnpm run dev 執行項目命令后
