g2plot 水滴图，包含数据更新时渲染问题

官网地址：https://g2plot.antv.vision/zh/docs/manual/introduction

第一步: vue安装对应插件（网上很多，可以百度一下）

npm install @antv/g2plot --save

第二步：引入

import { Liquid } from '@antv/g2plot'

创建对应的div

<div id="linechart" />

data定义一个 linePlot

加载

mounted() {var v = thisthis.$nextTick(() => {v.drawChart()})},

在methods里面加载方法:

drawChart() {this.linePlot = new Liquid('linechart', {percent: 0.88,width: 120,height: 120,outline: {border: 2,distance: 2},wave: {length: 128},statistic: {content: {style: ({ percent }) => ({fontSize: 20,lineHeight: 1,fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)'})}}})this.linePlot.render()}

数据更新时，调用此方案

changeEchart() {if (this.linePlot) {this.linePlot.chart.changeData(0.66)} else {this.drawChart()}},

第一次整理有问题请见谅

g2plot 水滴图，包含数据更新时渲染问题相关推荐

G2自定义图例，数据更新时渲染问题。
这是问题解决后的样式,顶部还有一个筛选条件,筛选之后图片数据更新.第一次会通过 new Chart 获得图表对象,第二次触发的改变的时候是用对象调用changeData放法来改变. 但是这里自定义 ...
如何使 SAP UI5 SmartField 在运行时渲染成超链接的形式并支持跳转的试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
echarts 水滴图去掉波浪阴影
如图所示箭头所指的灰色阴影本案例不包含水滴图的引入请自行百度 let text = '平均睡眠时长:9h'; option = {title: [{text: text,textStyle: ...
UE官方教程笔记01-实时渲染基础上
对官方教程视频[官方培训]01-实时渲染基础上 | 陈拓 Epic的笔记部分没听懂的地方就按自己的理解瞎写了介绍实时渲染(Real-Time Rendering,RTR)是指在计算机上快速生成图 ...
UE官方教程笔记02-实时渲染基础下
对官方教程视频[官方培训]02-实时渲染基础下 | 陈拓 Epic的笔记没听懂的地方就瞎写反射实时渲染中反射是一个非常有挑战的特性 UE中有多种不同的方案,各有各的优势和缺点反射捕获屏幕空间 ...
axure 8 表格合并_规范交互原型图包含哪些要素？ | 附Axure 模版源文件
按照常规且科学的产品设计流程,我们在产品设计之初,先要理清楚用户任务流程.从而搭建起信息结构图.再具象化为页面流程图(仅描述每个页面需要包含的信息).进而通过手绘将页面的具体呈现样式描绘在纸上形成纸面 ...
Echarts漂亮水滴图
ECharts提供了水滴图插件echarts-liquidfill, from @Ovilia 在学习Echarts的时候看到了一款非常漂亮的图形liquidfill,记录了Echarts-liqui ...
echarts 水滴图实现方式。
项目中需要实现水滴图的应用搞了一下,效果还可以,感觉做的还是比较全面的有渐变色,颜色更改等措施. 效果图: 直接上代码: <!DOCTYPE html> <html>< ...
Vue使用快速使用Echarts图标以及使用水滴图
组件aaaa.vue <template> <div class="aaaa"><!-- <button @click="refres ...

g2plot 水滴图，包含数据更新时渲染问题

g2plot 水滴图，包含数据更新时渲染问题相关推荐

最新文章

热门文章