G2/Echarts
小胖龙
仅仅只是接受不了那些人只粘贴复制的东西,所以把经过自己亲手实践的问题记录下来……
展开
-
vue复用封装的G2组件图形被绘制在同一个div中的问题(echarts同样原理)
距离发现原因是查找渲染完的do时,发现第一个col的div里面渲染了2个canvas,而第2个col里面只绘制了一个空的div,里面没有包有canvas,原理就是g2根据div的id去查找绘制在那个div里面,所以组件内不能写固定id,解决方法: 意思就是很简单: 在组件内动态生成一个字符串来做id ...原创 2019-05-06 11:37:58 · 1358 阅读 · 0 评论 -
G2封装图形组件在vue中进行数据更新,组件重载问题
先看一下官方文档 更新数据 G2 更新数据的方式主要有三种: 仅仅是更新图表的数据 清理所有,重新绘制 使用 DataView 时的更新 更新数据 如果需要马上更新图表,使用 chart.changeData(data) 即可 chart.changeData(newData); view 也支持 view.changeData(data) 如果仅仅是更新数据,而不需要马上...原创 2019-05-10 17:07:31 · 10682 阅读 · 5 评论 -
G2实现南丁格尔图添加中心文字以及legend百分比
先看效果: 中心文字设置 this.chart.guide().html({ position: ['50%', '50%'], html: `<div style="color:#fff;font-size: 25px;text-align: center;width: 10em;">${total}<br><div s...原创 2019-05-24 16:40:44 · 1790 阅读 · 0 评论 -
G2环形图legend图例使用滚动条可滑动
先看效果: this.chart.legend({ // marker: 'square', position: 'right-center', // textStyle: { fill: '#a3a9c1' }, // offsetX: 20, itemFormatter(val) { ...原创 2019-05-24 16:46:37 · 5742 阅读 · 1 评论