vue+echarts实现动态绘制图表及异步加载数据的方法
时间: 2023-05-10 17:01:23 浏览: 84
在Vue中使用Echarts实现动态绘制图表及异步加载数据的方法,主要分为两个步骤:
第一步,安装Echarts和vue-echarts
1.在项目中安装Echarts,使用npm命令:npm install echarts --save
2.安装vue-echarts,使用npm命令: npm install vue-echarts --save
第二步,实现动态绘制图表及异步加载数据的方法
1.定义一个“echarts”组件,该组件是vue-echarts提供的一个图表组件,用于绘制图表。
2.在“echarts”组件中定义一个“chartMixin”对象,用于定义图表的数据和属性。
3.在“created”生命周期中,使用Echarts提供的异步加载数据的方法“echarts.init(dom).setOption(option);”加载数据。
4.使用vue-watch监听数据的变化,当数据发生变化时,重新绘制图表。
示例代码:
<template>
<div class="echarts-container" ref="chartDom"></div>
</template>
<script>
import echarts from 'echarts'
import VueECharts from 'vue-echarts'
export default {
name: 'echarts',
components: {
VueECharts
},
mixins: [
{
data() {
return {
option: {
//定义图表的属性
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}
]
}
}
}
}
],
data() {
return {
chartDom: null //定义图表的dom
}
},
created() {
this.chartDom = this.$refs.chartDom
this.drawChart()
},
watch: {
//监听数据的变化,重新绘制图表
option: function() {
this.drawChart()
}
},
methods: {
drawChart() {
//使用Echarts提供的异步加载数据的方法加载数据
const chart = echarts.init(this.chartDom)
chart.setOption(this.option)
}
}
}
</script>