echart-水球图

Echarts学习之——水球图(echarts-liquidfill)

水球图(Liquid Fill Chart)是填充仪表盘的一种,适合于展现单个百分比数据的图表类型。一般用以于显示利润,回款等财务指标。

安装

npm i echarts
npm i echarts-liquidfill

注意：`echarts-liquidfill@3`版本匹配`echarts@5`版本，`echarts-liquidfill@2`版本匹配`echarts@4`版本

举个栗子

import echarts from "echarts";
import "echarts-liquidfill";initChart(){let myLiuqiud = this.$echarts.init(document.getElementById("liqiud"));var value = 0.54;let option = {backgroundColor: "#000", //背景色title: {text: value + "%",textStyle: {fontSize: 20,fontFamily: "Microsoft Yahei",fontWeight: "normal",color: "#fff",},x: "center",y: "48%",},series: [{type: "liquidFill", //配置echarts图类型radius: "60%",center: ["50%", "50%"],//  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形data: [0.5, 0.5],  //设置波浪的值 //waveAnimation:false, //静止的波浪backgroundStyle: {borderWidth: 1,color: "transparent",//水球图内部背景色},outline: { borderDistance: 10, itemStyle: {borderWidth: 4,borderColor: "#5acef2",},},color: [ //波浪颜色{type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: "rgba(6, 187, 112, 0.3)", //下},{offset: 0,color: "rgba(11, 201, 199, 0.3)",},],globalCoord: false,},{type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: "rgba(6, 187, 112, 1)", //下},{offset: 0,color: "rgba(11, 201, 199, 1)",},],globalCoord: false,},],label: {normal: {formatter: "",},},},],};myLiuqiud.setOption(option);}

echart-水球图相关推荐

echarts社区水球图、echart水球图动态水球图
目录普通水球图 3/4环形图 4层波浪水球图普通水球图 var value = 0.45; var value1 = 0.76; var data = [value, value1]; var o ...
echart水滴_echarts 水球图
转载编辑. 原作者链接地址:https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776 水球图是一种适合于展现单个百分比数据的图 ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
echart水滴_echarts水球图编写
// 前提条件需要引入这个插件 // 代码 let Chart = echarts.init(document.getElementById('Chart')); let option = { ti ...
python画动图-Python绘制动态水球图过程详解
先来看看绘制的动态水球图: 没有安装PyEcharts的,先安装PyEcharts: # 安装pyecharts模块,直接安装就是最新的版本pip install pyecharts 安装好PyEch ...
Pyecharts：pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表
Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表目录 ...
echarts代码格式化_echarts水球图格式化Format使用
上周有一个需求,echarts的水球图要做展示,因为后台数据有可能值会返回'-' ,所以需要动态展示,首先返回值会有四个,分别表示本周/本月百分率以及本周/本月具体数值所以,产品提了一个需求当后端接口 ...
带着canvas去流浪系列之七绘制水球图
[摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明使用原生canvasAPI绘制 ...
vue使用echarts-liquidfill水球图不生效
水球图官方链接: https://www.npmjs.com/package/echarts-liquidfill 安装命令: npm install echarts --save npm insta ...
echaarts水滴(水球图)波浪效果
效果图首先放盒子 <div class="wtChartBall_box"><div class="d_flex"><div i ...

echart-水球图

Echarts学习之——水球图(echarts-liquidfill)

安装

注意：`echarts-liquidfill@3`版本匹配`echarts@5`版本，`echarts-liquidfill@2`版本匹配`echarts@4`版本

举个栗子

echart-水球图相关推荐

最新文章

热门文章

echart-水球图

Echarts学习之——水球图(echarts-liquidfill)

安装

注意：echarts-liquidfill@3版本匹配echarts@5版本，echarts-liquidfill@2版本匹配echarts@4版本

举个栗子

echart-水球图相关推荐

最新文章

热门文章

注意：`echarts-liquidfill@3`版本匹配`echarts@5`版本，`echarts-liquidfill@2`版本匹配`echarts@4`版本