echarts常用功能封装|抽象为mixin
目前已解锁以下功能:
// charts.js
import echarts from 'echarts'
export default {
computed: {
// 初始化echarts
getChart () {
return this.$echarts.init(this.$refs.echart)
}
},
watch: {
chartData: {
handler (val) {
val && this.initChart()
}
}
},
mounted () {
this.getChart.showLoading()
window.addEventListener('resize', this.chartResize)
// 移除resize事件
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.chartResize)
})
},
methods: {
initChart () {
this.getChart.setOption(this.getOption())
this.getChart.hideLoading()
},
chartResize () {
this.getChart.resize()
}
}
}
example:
<template>
<div>
<div ref="echart" style="height: 600px"></div>
</div>
</template>
<script>
import Charts from '@/components/Charts.js'
export default {
// 混入Charts
mixins: [Charts],
data () {
return {
chartData: []
}
},
mounted () {
// 模拟ajax请求
setTimeout(() => {
this.chartData = [0, 1, 2, 3]
}, 2000)
},
methods: {
getOption () {
// 配置options
return {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
// 代码块...
}
}
}
}
</script>
ps:详情请查看examples
希望对大家有帮助哈~
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验