Echarts-水球图笔记

Echarts一个基于 JavaScript 的开源可视化图表库

官方文档： https://github.com/ecomfe/echarts-liquidfill

第一步：安装依赖

npm install echarts
npm install echarts-liquidfill

版本选择

"echarts": "^5.3.0",
"echarts-liquidfill": "^3.1.0",

第二步：引入echarts 和 echarts-liquidfill

import * as echarts from 'echarts'
import 'echarts-liquidfill'

第三步：初始化echarts并配置echart;

const myEchart = echarts.init(document.getElementById('my-echart'));
const option = {series: {type: "liquidFill",data: [0.5]}
};
myEchart.setOption(option);

默认配置

option = {series: [{type: "liquidFill",data: [0.7], // 可以多个波浪，数大在前，数小在后，避免遮挡（不透明情况下)。// data中的元素也可以使用一个对象，单独设置某项样式 {//   value: 0.3,//   direction: 'left',  // 将单个波浪的移动方向设置为默认的反方向//   itemStyle: {//       color: 'red',//       opacity: 0.6//   },//   emphasis: {//       itemStyle: {//           opacity: 0.9//       }//   }// }color: ["#294D99", "#156ACF", "#1598ED", "#45BDFF"],center: ["50%", "50%"], // 球心到左/上边界的距离 百分数 或者 px（其他单位也按px计算）radius: "80%", // 调节球的大小，百分数或者pxamplitude: "7%", // 波浪幅度，振幅大小， 0为平面waveLength: "80%",phase: "auto",period: "auto",direction: "right",shape: "circle", // 形状设置 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'// 1.              // 形状设置 '圆形', '正方形', '带圆角的正方形', '正三角形', '菱形', '定位形状/钉', '箭头'// 2. container 时填充整个框框// 3. an SVG path starting with 'path://'.waveAnimation: true, // 开启或关闭波浪动画animationEasing: "linear",animationEasingUpdate: "linear",animationDuration: 1000, // 第一次波浪升起来时的动画时长； 设为0后直接切换animationDurationUpdate: 2000, // data数据变动时波浪升起或下降的动画时长，数据变动后需调用mychart.setOption(option)outline: {// 水球外侧默认有一个边框show: true, // 默认显示，false不显示borderDistance: 8,itemStyle: {color: "none",borderColor: "#294D99",borderWidth: 8,shadowBlur: 20,shadowColor: "rgba(0, 0, 0, 0.25)",},},backgroundStyle: {color: "#E3F7FF", // 水球背景色borderWidth: 3, // 水球内部圆形的边框宽度， 默认是没有的borderColor: "pink", // 设置了边框颜色才能看见边框；},itemStyle: {opacity: 0.95, // 波浪颜色透明度shadowBlur: 50,  // 波浪边缘的阴影shadowColor: "rgba(0, 0, 0, 0.4)",},label: {formatter: function () {// 可以自定义中心的文字 \n换行return "Echart \n\n\n Liquid Fill";// formatter: '{a}\n{b}\nValue: {c}',// a 代表 series.name , b 代表 series.data中第一个元素定义的name, c 代表 series.data中第一个元素定义的value;// b/c  data: [{name: 'First Data', value: 0.6}, 0.5, 0.4, 0.3],},show: true,color: "#294D99",insideColor: "#fff",fontSize: 50,fontWeight: "bold",align: "center",baseline: "middle",position: "inside",},emphasis: {// 鼠标悬停效果设置位置itemStyle: {opacity: 0.8, // 波浪填充色的hover style 的透明度， 鼠标放在波浪上的透明度color: "#f00",},},},],tooltip: {show: true  // 鼠标放上显示数据}
};

Echarts-水球图笔记相关推荐

vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
echarts 水球图
// ECharts 水球图插件,需要额外插件脚本,参见上方"脚本" // 完整配置参数参见:https://github.com/ecomfe/echarts-liquidfil ...
vue3+ts 之echarts 水球图 liquidFill 的使用
vue3+ts 之echarts 水球图 liquidFill 的使用前言一.echarts liquidfill.js水球图插件二.使用步骤 1.上代码总结前言项目框架使用的是 vben ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
ECHARTS 水球图
转载编辑. 原作者链接地址:https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776 水球图是一种适合于展现单个百分比数据的图 ...
微信小程序 ECharts 水球图
效果图: 水球图插件 git地址:https://github.com/ecomfe/echarts-liquidfill#api 下载后,将dist下面的echarts-liquidfill.min ...
Echarts 水球图设置基准线
*前言:最近的项目需求中,要求在水球图中加一条标准线(作为报警提示线). 1.效果如下: 2.思路: 注意:如果是直接在水球图上画标线是实现不了的. 所以我们换种思路(大佬指点了一下),在折线图 ...
echarts水球图
在项目当中我们可能会遇到这种图,这种叫水球图,但是我们如果要写的话,得安装 npm install echarts-liquidfill --save 安装好之后我们就可以在项目当中使用了,以下是代 ...
echarts 水球图自定义水球颜色
项目中有一个水球图表示电池电量的需求:电量20%以下时显示红色,20%-30%时显示为黄色,30%以上显示蓝色 var option = {series: [{type: 'liquidFill',d ...

Echarts-水球图笔记

Echarts-水球图笔记

Echarts-水球图笔记

第一步：安装依赖

版本选择

第二步：引入echarts 和 echarts-liquidfill

第三步：初始化echarts并配置echart;

默认配置

Echarts-水球图笔记相关推荐

最新文章

热门文章