1、使用npm安裝
npm install echarts --save
npm install echarts -S
以上兩種都可以，也可以使用淘寶cnpm安裝
2、將echarts組件全部引入
在main.js中添加
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
使用示例（HelloWorld.vue）
<template>
<div>
<div ref="testChart" style="height:500px;width:100%;border:1px solid black"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
cahrt: null,
inpMessage: '',
clickData: '',
option: {
title: {
text: '南丁格爾玫瑰圖',
subtext: '純屬虛構',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [{
name: '半徑模式',
type: 'pie',
radius: [20, 110],
center: ['25%', '50%'],
roseType: 'radius',
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data: [{
value: 10,
name: 'rose1'
},
{
value: 5,
name: 'rose2'
},
{
value: 15,
name: 'rose3'
},
{
value: 25,
name: 'rose4'
},
{
value: 20,
name: 'rose5'
},
{
value: 35,
name: 'rose6'
},
{
value: 30,
name: 'rose7'
},
{
value: 40,
name: 'rose8'
}
]
},
{
name: '面積模式',
type: 'pie',
radius: [30, 110],
center: ['75%', '50%'],
roseType: 'area',
data: [{
value: 10,
name: 'rose1'
},
{
value: 5,
name: 'rose2'
},
{
value: 15,
name: 'rose3'
},
{
value: 25,
name: 'rose4'
},
{
value: 20,
name: 'rose5'
},
{
value: 35,
name: 'rose6'
},
{
value: 30,
name: 'rose7'
},
{
value: 40,
name: 'rose8'
}
]
}
]
}
}
},
methods: {
handleClick() {
//賦值
this.clickData = this.inpMessage
},
},
mounted() {
this.cahrt = this.$echarts.init(this.$refs.testChart)
this.cahrt.setOption(this.option)
this.cahrt.resize()
}
}
</script>
<style></style>
運行結果
3、按需引入
在main.js中添加
// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
使用示例（HelloWorld.vue）
<template>
<div>
<div ref="testChart" style="height:500px;width:100%;border:1px solid black"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
cahrt: null,
inpMessage: '',
clickData: '',
option: {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
methods: {
handleClick() {
//賦值
this.clickData = this.inpMessage
},
},
mounted() {
console.log(this.$echarts)
this.cahrt = this.$echarts.init(this.$refs.testChart)
this.cahrt.setOption(this.option)
this.cahrt.resize()
}
}
</script>
<style></style>
運行結果
