在vue中使用Echarts利用watch做动态数据渲染操作
(编辑：jimmy 日期: 2024/11/25 浏览：3 次 )
依旧直接上代码～
首先安装引入Echarts，我是直接把Echarts挂到VUE全局变量上了
//引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts;
<template>
<div class="demo-container">
<div ref="chart_wrap" class="chart_wrap"></div>
</div>
</template>
<script>
export default {
name: "demo",
computed: {},
data() {
return {
seriesData: []
};
},
created() {},
mounted() {
this.initCharts();
setTimeout(() => {
this.seriesData.push({
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
});
}, 5000);
},
watch: {
seriesData(val, oldVal) {
console.log(1111, val, oldVal);
this.setOptions(val);
}
},
methods: {
initCharts() {
this.chart = this.$echarts.init(this.$refs.chart_wrap);
this.setOptions();
},
setOptions(series) {
console.log(22222,this.chart,series);
this.chart.setOption({
title: {
text: "ECharts 入门示例"
},
tooltip: {},
legend: {
data: ["销量"]
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: series
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.chart_wrap {
height: 400px;
}
</style>
补充知识：echarts-循环生成图
1、问题背景
利用for循环生产多个气泡图，并且每个气泡都可以点击
2、实现源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-循环生成图</title> <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">3、实现结果
以上这篇在vue中使用Echarts利用watch做动态数据渲染操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
下一篇：vue-router之解决addRoutes使用遇到的坑