Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果

目录

1.图表数据过多导致浏览器卡顿

2.Y轴数据添加单位

3.带圆角及柱状背景的柱状图

4.legned 图例超出部分显示省略号

5.柱状图 / 拓扑图（气泡图）渐变色效果

1.图表数据过多导致浏览器卡顿

场景再现：

使用 Vue + Echarts 实现数据可视化

点击数据量大的组件时，Echarts 渲染比较快

但切换其他组件统计图时，会非常卡

原因分析：

切换其他组件时，Echarts 在当前页面被销毁，但内存中未必销毁，导致 Echarts 占用 CPU 高

解决方案：

在 mounted() 和 destroy() 之间，加一个 beforeDestroy() ，用于释放该页面的 chart 资源

beforeDestroy () { this.chart.clear() }

注意区分 dispose() 和 clear()：

dispose()：可以销毁 charts，但会导致 charts 的 resize() 启动；因为 charts 已经销毁了，没有 resize()，故会报错：缺少 resize()

clear()：清空 charts 数据，释放内存，不会影响 charts 及它的方法 resize()

2.Y轴数据添加单位

效果展示：

解决方案：在 yAxis 中，利用 formatter 配置 y轴单位
yAxis:{show: true,type: 'value',// 添加单位$axisLabel: {formatter: '{value}%'}}

3.带圆角及柱状背景的柱状图

效果展示：

        series: [{name: '系统数据',type: 'bar',barWidth: 20,showBackground: true,// 柱状图背景backgroundStyle: {color: '#53AAFF'},itemStyle:{normal: {//柱形图圆角，初始化效果barBorderRadius:[10, 10, 0, 0],// 柱状图高级渐变效果color: new echarts.graphic.LinearGradient(// 0,0,1,0表示从左向右，0,0,0,1表示从右向左1, 0, 0, 0,   [{offset: 1, color: '#7C9FF5'},  {offset: 0.5, color: '#E0F7FF'},{offset: 0, color: '#7C9FF5'}])}},// 实现数字展示在柱状图上方label: {show: true,position: 'top',color:'#fff'},data:[111,222,333,111,222,333,111]}]

4.legned 图例超出部分显示省略号

效果展示：

legend: {right: '10',bottom: '5',// 处理图例数据formatter: function(name) {return name.length > 10 ? name.substr(0,10) + "..." : name;}
}

5.柱状图 / 拓扑图（气泡图）渐变色效果

柱状图渐变效果展示：

气泡图渐变效果展示：

方法一：series - areaStyle - color

线性渐变（柱状图），前四个参数分别是 x0 y0 x2 y2，范围从 0 - 1，表示在图表盒子的位置百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置

径向渐变（拓扑图），前三个参数分别是圆心 x、y，半径 r，取值同线性渐变

纹理填充
// 线性渐变（柱状图），x0 y0 x2 y2，范围从 0 - 1，表示在 图表盒子 的位置百分比
// 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],globalCoord: false // 缺省为 false
}// 径向渐变（拓扑图），前三个参数分别是圆心 x、y，半径 r，取值同线性渐变
color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],globalCoord: false // 缺省为 false
}// 纹理填充
color: {image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
方法二：使用 echarts 内置的渐变色生成器 echarts.graphic.LinearGradient
{type: 'bar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(// 依次对应 右/下/左/上 四个方位// 0 0 0 1 代表渐变色从 正上方 开始0, 0, 0, 1,       [{offset: 0, color: '#000'},{offset: 0.5, color: '#888'},{offset: 1, color: '#ddd'}])}}
}

Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果相关推荐

Echarts 占用CPU高，导致浏览器卡顿问题。
页面中使用了大量的Echarts 图例,当操作页面时间久了后发现浏览器占用电脑CPU达到了30%,而电脑的配置是服务器级别的配置,这让人觉得奇怪. 使用chrome的profile调试工具记录了js脚 ...
vue Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
vue + Echarts 填坑记（Echarts数据量大，导致浏览器卡顿）
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
如题博主在开发过程中遇到了问题就是当数据量过大时浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据在一秒内快速渲染到页面上呢? 解决方案 ...
base编码图片导致浏览器卡顿页面加载特别慢怎么办
我们都知道浏览器本身支持直接显示base64编码的图片的例如 <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD ...
EasyPlayer播放H.265的HLS视频流，ts加载频繁导致浏览器卡顿是什么原因？
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定.播放流畅,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等,具备较高的可用性.同时还支持大码率 ...
Threejs实现3D场景浏览器内存消耗过高导致浏览器卡顿崩溃刷新等问题解决办法以及3D场景在手机浏览器中画质不高的原因
个人主页: 左本Web3D,更多案例预览请点击==> 在线案例个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例
解决el-select后台一次返回大数据量渲染慢导致页面卡顿的问题
场景一解决了一次性渲染大量数据问题业务场景是后台一次返回10万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我把这个改造了一下,直接上代码, 里面注释写的 ...

Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果

1.图表数据过多导致浏览器卡顿

2.Y轴数据添加单位

3.带圆角及柱状背景的柱状图

4.legned 图例超出部分显示省略号

5.柱状图 / 拓扑图（气泡图）渐变色效果

Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果相关推荐

最新文章

热门文章