1、options.js数据文件
(1)series中data置空,数据从后端获取
(2)其他界面设置信息在前端写定
2、echartsCloud.vue
1)推荐使用ref
(2)chart指向ref, 初始化视图
(3) 向后端发送请求获取数据
每次数据更改都需要执行setOption()操作
(4)执行初始化数据
(5)在mounted()中执行
3、显示效果
4、 注意事项
(1)不推荐使用id绑定DOM,使用ref
(2)this.nextTick()
(3)初始化视图和数据的顺序
(4)数据更改后setOption()
5、echartsCloud.vue 全部代码
<template>
<div>
<div ref="myChart" class="containEcharts"></div>
</div>
</template>
<script>
let baseURL = "http://localhost:8888";
import { optionThird } from "../../../../static/staticData/options";
export default {
name: "echartsCloud",
data() {
return {
chart: null
};
},
mounted() {
this.$nextTick(function() {
this.initView();
this.initData();
});
},
methods: {
initData() {
this.selectEchartsCloud();
},
initView() {
this.chart = this.$echarts.init(this.$refs.myChart);
},
// 查询云词
selectEchartsCloud() {
this.$http({
url: baseURL + "/echartsCloud/selectEchartsCloud",
methods: "post"
})
.then(response => {
optionThird.series[0].data = response.data;
console.log(optionThird);
this.chart.setOption(optionThird);
})
.catch(function(error) {
console.log(error);
});
}
}
};
</script>
<style scoped>
.containEcharts {
float: left;
width: 550px;
height: 250px;
border: 1px solid #eee;
border-radius: 5%;
}
</style>