初始化echarts

一、初始化

<div ref="leftChart" id='cahrt' ></div>
const chartRef = this.$refs.leftChart
// 或者
const chartRef = document.getElementById.('#chart')
this.chart = echarts.init(refChart) //echarts需要先引入

二、渲染/画图

// 此处的option就是你要画的图的参数
this.chart.setOption(option)

// echart图表没有办法在用户手动放大缩小页面时自适应,所以需监听页面缩放进行resize
window.addEventListener('resize', () => {
   if (this.chart) this.chart.resize()
})

三、关于性能

echart在性能方面很不友好,所以在退出页面的时候一定要销毁echarts。否则会造成内存泄漏。在销毁时需判断this.chart是否存在,否则会报错

 this.chart.dispose()
 this.chart.clear()
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 刚开始用ECharts,看了百度的例子,是使用原生的方法获取div,然后再初始化Chart组件: 尝试用JQuer...
    pu_debug阅读 3,972评论 0 50
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,050评论 2 59
  • 日常学习知识点总结(JS篇) 1、闭包: 闭包就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量是内部...
    依稀_Sting阅读 2,112评论 0 1
  • eCharts总体架构: eCharts的底层库 Zrender,用面向对象的方式把实体抽象成为图形元素,调用 C...
    __凌阅读 3,134评论 0 1
  • 可以参考这个库https://github.com/Zhuyi731/echarts-for-wx-uniapp ...
    丶赤水断阅读 8,024评论 0 0