1、安装
npm install echarts --save
2、在vue中引入(全局引入)
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、在vue中的使用
需要用到echart的地方先设置一个div的id、宽高
提示:
使用div进行位置的排版放置
4、模板代码放在哪个位置
重点注意:其中const option = { }就是我们需要引进echart图表的代码
<template>
<div>
<div ref="chart" style="width:50%;height:376px"></div>
</div>
</template>
要在mounted生命周期函数中实例化echarts对象。确保dom元素已经挂载到页面中。
mounted(){
this.getEchartData()
},methods: {
getEchartData() {
const chart = this.$refs.chart
if (chart) {
const myChart = this.$echarts.init(chart)
const option = {...}
myChart.setoption(option)
window.addEventListener("resize",function() {
myChart.resize()
})
}
this.$on('hook:destroyed',()=>{
window.removeEventListener("resize",function() {
myChart.resize();
});
})
}
}
5、完整的一个vue页面实例:
<template>
<div>
<div ref="chart" style="width:50%;height:376px"></div>
<div ref="chart1" style="width:50%;height:376px"></div>
</div>
</template>
<script>
export default {
data() {
},mounted() {
this.getEchartData()
this.getEchartData1()
},methods: {
getEchartData() {
const chart = this.$refs.chart
if (chart) {
const myChart = this.$echarts.init(chart)
const option = { legend: {},tooltip: {},dataset: {
source: [
['订单',43.3,85.8],['订单1',83.1,73.4],['订单2',86.4,65.2],['订单3',72.4,53.9],['订单4',82.4,['订单5',42.4,['订单6',['订单7',53.9]
]
},xAxis: { type: 'category' },yAxis: {},series: [ { type: 'bar' },{ type: 'bar' }]}
myChart.setoption(option)
window.addEventListener("resize",function() {
myChart.resize()
})
}
this.$on('hook:destroyed',()=>{
window.removeEventListener("resize",function() {
myChart.resize();
});
})
},getEchartData1() {
const chart1 = this.$refs.chart1
if (chart1) {
const myChart = this.$echarts.init(chart1)
const option = {
title: {
text: 'Stacked Line'
},tooltip: {
trigger: 'axis'
},legend: {
data: ['Email','Union Ads','Video Ads','Direct','Search Engine']
},grid: {
left: '3%',right: '4%',bottom: '3%',containLabel: true
},toolBox: {
feature: {
saveAsImage: {}
}
},xAxis: {
type: 'category',boundaryGap: false,data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
},yAxis: {
type: 'value'
},series: [
{
name: 'Email',type: 'line',stack: 'Total',data: [120,132,101,134,90,230,210,120,230]
},{
name: 'Union Ads',data: [220,182,191,234,290,330,310,220,330]
},{
name: 'Video Ads',data: [150,232,201,154,190,410,150,{
name: 'Direct',data: [320,332,301,334,390,320,{
name: 'Search Engine',data: [820,932,901,934,1290,1330,1320,820,1330]
}
]
}
myChart.setoption(option)
window.addEventListener("resize",},watch: {},created() {
}
}
</script>
6、实现效果
7、可能遇到的问题,下载不成功。使用
cnpm install echarts --save
8、11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts
修改引入的方式
// 引入echarts
import *as echarts from 'echarts'
Vue.prototype.$echarts = echarts