如何实现动态水球图 --》 echars结合echarts-liquidfill实现

1）项目中作为项目依赖，安装到项目当中(注意必须要结合echars)

npm install echarts vue-echarts --save

npm install echarts-liquidfill --save

2）在需要使用水晶球的组件里引入liquidFill.js

import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入

3）在模板中加入挂载水晶球的DOM节点

 <div id="echarts" :style="{width: '340px', height: '220px',}"></div>

4）在方法methods中添加liquidFill调用方法，如

initWhater() {

var value = this.score

let myChart = this.echarts.init(document.getElementById('myChartWhater'))

var data = []

data.push(value)

myChart.setOption({

backgroundColor: 'white', //容器背景颜色

title: {

text: '',

textStyle: {

fontWeight: 'normal',

fontSize: 25,

color: 'rgb(97, 142, 205)'

}

series: [

{

type: 'liquidFill',

radius: '80%', //水球的半径

data: data,

backgroundStyle: {

color: 'white'

label: {

normal: {

formatter:

(value * 100).toFixed(0) +

'\n' + //换行

'\n' +

this.healthyName, //良好？差？优秀

textStyle: {

fontSize: 50 //字体大小

}

outline: {

show: true, //是否显示轮廓布尔值

borderDistance: 0, //外部轮廓与图表的距离数字

itemStyle: {

borderColor: '#edf2f6', //边框的颜色

borderWidth: 1 //边框的宽度

//shadowBlur: 5 , //外部轮廓的阴影范围一旦设置了内外都有阴影

//shadowColor: '#000' //外部轮廓的阴影颜色

}

color: [

'rgba(118,216,255,0.3)',

'rgba(0,206,255,0.5)',

'rgba(0,148,255,0.3)'

] //水波的颜色对应的是data里面值

}

]

})

}

})

4）在mounted（）{}中调用 initWater方法页面完成效果如：大功告成！！！！

转载于:https://www.cnblogs.com/wangqi2019/p/10978804.html

如何实现动态水球图 --》 echars结合echarts-liquidfill实现相关推荐

python画动图-Python绘制动态水球图过程详解
先来看看绘制的动态水球图: 没有安装PyEcharts的,先安装PyEcharts: # 安装pyecharts模块,直接安装就是最新的版本pip install pyecharts 安装好PyEch ...
可视化 | Python精美动态水球图
文章目录 1. 准备工作 1.1 pyechars安装 1.2 导入模块 2. 绘制水球图 2.1 基本水球图 2.2 增加边框,改变形状 2.3 多波浪 2.4 增加标注,改变字体大小,改变填充颜色 ...
【如何实现一个简单的canvas动态水球图】
** 如何实现一个简单的canvas动态水球图. ** 由于在项目中遇到有个制作一个水球图需求,在网上查找相关资料比较少,样式又不符合预期,在这样的情况下封装了一个自己可更改.定制化的水球图动效组件. ...
echarts社区水球图、echart水球图动态水球图
目录普通水球图 3/4环形图 4层波浪水球图普通水球图 var value = 0.45; var value1 = 0.76; var data = [value, value1]; var o ...
vue3+ts 之echarts 水球图 liquidFill 的使用
vue3+ts 之echarts 水球图 liquidFill 的使用前言一.echarts liquidfill.js水球图插件二.使用步骤 1.上代码总结前言项目框架使用的是 vben ...
CSS实现个性化水球图
在可视化应用中,水球图也是一种常见的数据展示形式,关于使用CSS实现个性化水球,在相当长的一段时间并没有找到比较简洁的实现方式,因此在以往的可视化作品中,大多采用echarts插件-Liquid Fi ...
vue3+ts项目中使用水球图
下载水球图 npm install echarts npm install echarts-liquidfill 在对应组件中引入也可在main.ts中引入水球图 import * as echart ...
echarts-liquidfill（水球图）
vue项目里使用echarts-liquidfill(水球图)步骤 echarts水球图并不在echarts常用图表里,是作为插件使用的,因此使用echarts水球图需要先安装echarts和水球图. ...
echarts代码格式化_echarts水球图格式化Format使用
上周有一个需求,echarts的水球图要做展示,因为后台数据有可能值会返回'-' ,所以需要动态展示,首先返回值会有四个,分别表示本周/本月百分率以及本周/本月具体数值所以,产品提了一个需求当后端接口 ...

如何实现动态水球图 --》 echars结合echarts-liquidfill实现

如何实现动态水球图 --》 echars结合echarts-liquidfill实现相关推荐

最新文章

热门文章