关于echart方法的一些打开方式

科技前沿 • 2025-03-16 22:25 • 阅读 56

大家好，我是讯享网，很高兴认识大家。

相信很多小伙伴在使用echart的时候，有时候数据需要更新，图表需要加载绘制，又或者视图改变需要重新绘制，下面总结了一些方法echart的常用方法

1、初始化echarts实例对象

this.barChart = echarts.init(document.getElementById('barChart3D')) this.barChart = echarts.init(this.$refs.barChart)

讯享网

2、实例化图表，绘制ecahrt

讯享网this.barChart.setOption(option)

3、清除或销毁图表

①、refresh()
刷新图表，图例选择、数据区域缩放，拖拽状态均保持
②、restore()
还原图表，各种状态均被清除，还原为最初展现时的状态
③、clear()
清空绘画内容，清空后实例可用
④、dispose()
释放图表实例，释放后实例不再可用

常用③跟④
如果要不停清空再绘制，则用③，对浏览器负载小一些。
如果是直接销毁不需要重新绘制，则用④直接释放图表实例

讯享网

4、重新制定Echarts大小

resize()
运用在需要图表完成自适应的场景，比如浏览器页面窗口宽高改变时让图表自适应放大缩小
通常需要给window绑定监听事件

echart的一些扩展

echart修改默认字体
main.js 添加以下代码

Vue.prototype.$echarts.registerPreprocessor(function (option) {   option.textStyle = option.textStyle || {}   option.textStyle.fontFamily = 'AlibabaPuHuiTi55' })

监听dom元素尺寸变化resize echarts

讯享网activated() {     setTimeout(() => {       this.init()     }, 100)   }, init() {       const echartArr = []       const myChartArr = []       if (this.barChart) {         echartArr.push(document.getElementById('barChart3D'))         myChartArr.push(this.barChart)       }       if (this.pieChart) {         echartArr.push(document.getElementById('pieChart'))         myChartArr.push(this.pieChart)       }       this.resizeEcharts(echartArr, myChartArr)     }, resizeEcharts(echartArr, myChartArr) {       // echartArr id为'xxx'的元素数组       // myChartArr id为'xxx'的echart实例       const elementResizeDetectorMaker = require('element-resize-detector') // 引入监听dom变化的组件       const erd = elementResizeDetectorMaker()       // 遍历数组，监听每个元素 大小变化       echartArr.forEach((item, index) => {         erd.listenTo(item, function (element) {           myChartArr[index].resize()         })       })     },

扩展：window.addEventListener的运用

1、addEventListener()添加事件监听

addEventListener(event, function, useCapture)
①、参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。
②、参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数。
③、参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。

mounted(){ window.addEventListener('resize',()=>{ console.log('处理窗口缩放时要处理的逻辑操作！'); this.barChart.resize() }); },

2、注意事项

讯享网beforeDestroy() { // 移除绑定的事件监听 window.removeEventListener("resize",绑定的事件方法名称); }