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>
运行结果