avatar

echarts在Vue中使用的的基本框架

基本框架

data

1
2
3
4
5
6
7
8
data() {
return {
// echarts实例
chartInstance: null,
// 服务器请求到的数据
allData: null
}
}

mounted

1
2
3
4
5
6
7
8
9
10
11
mounted() {
// 根据相应容器div以及initOption初始化echarts
this.initChart()
// 向服务器请求数据并赋给this.allData
// 同时利用updateChart处理请求到的数据,并更新数据设置
this.getData()
// 监听窗口改变,调用编写的自适应事件
window.addEventListener('resize', this.screenAdapter)
// 一开始也应该调用,以便图表适合于初始窗口
this.screenAdapter()
}

destroyed

1
2
3
4
destroyed() {
// 避免造成内存泄漏
window.removeEventListener('resize', this.screenAdapter)
}

methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
methods: {
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.gy)
const initOption = {}
this.chartInstance.setOption(initOption)
},
async getData() {
const res = await this.$http.get()
this.allData = res
this.updateChart()
},
updateChart() {
// 处理数据的代码
const dataOption = {}
this.chartInstance.setOption(dataOption)
},
screenAdapter() {
const adapterOption = {}
this.chartInstance.setOption(adapterOption)
this.chartInstance.resize()
}
}

设置分离

initOption

  • 主要有标注,主题,样式等设置

dataOption

  • 主要对数据进行一个设置

adapterOption

  • 主要设置标题,图表的大小,因为窗口大小发生变化时,相应的大小也要发生改变,进行动态计算
文章作者: Gy
文章链接: http://sgyat.cn/2021/04/01/echarts/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 年轻没有梦
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论