vue中使用Echarts利用watch做动态数据渲染
依旧直接上代码~首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了//引入echartsimport Vue from 'vue';import echarts from 'echarts';Vue.prototype.$echarts = echarts;<template><div class="demo-con...
·
依旧直接上代码~
首先安装引入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>
更多推荐
已为社区贡献4条内容
所有评论(0)