echart水滴_echarts水球图编写

// 前提条件需要引入这个插件

// 代码

let Chart = echarts.init(document.getElementById('Chart'));

let option = {

title: { // 水球图标题样式

text: '日',

left: 'center',

bottom: '10%',

textStyle: {

color: '#ffffff',

fontSize: 14

}

tooltip: {

show: true

series: [

{

name: '日',

type: 'liquidFill', // 水球图样式

center: ['50%', '45%'], // 水球图位置

amplitude: 3, // 波浪波动起伏大小

waveLength: '100%', // 波浪长度

color: ['#3399cc'], // 波浪颜色

backgroundStyle: {

color: '#ffffff', // 内部球背景颜色

borderWidth: 2, // 内部球边框宽度

borderColor: '#e3e3e3' // 内部球边框颜色

label:{

normal:{

formatter: '234', // 内部文字内容

textStyle: {

color: '#ffffff', // 在波浪上方时的文字颜色

insideColor: '#ffffff', // 在波浪下方时的文字颜色

fontSize: 10 // 文字大小

}

outline: {

borderDistance: 0, // 外边框与内边框间的距离

itemStyle: {

borderWidth: 5, // 外边框的宽度

borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面 // 外边框的颜色(渐变色)

offset: 0,

color: '#1b6491'

}, {

offset: 1,

color: '#3399cc'

}]),

}

data: [0.6] // 水球的注满度 60%

}

]

};

Chart.setOption(option);

这个水球内部的背景，没办法调成纯白色，设置成白色背景还是发灰，不知哪位会调

echart水滴_echarts水球图编写相关推荐

echart水滴_echarts 水球图
转载编辑. 原作者链接地址:https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776 水球图是一种适合于展现单个百分比数据的图 ...
echarts代码格式化_echarts水球图格式化Format使用
上周有一个需求,echarts的水球图要做展示,因为后台数据有可能值会返回'-' ,所以需要动态展示,首先返回值会有四个,分别表示本周/本月百分率以及本周/本月具体数值所以,产品提了一个需求当后端接口 ...
echarts 球形水波_ECharts 水球图教程
ECharts 水球图教程羡辙 2017-02-21 水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们 ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
echaarts水滴(水球图)波浪效果
效果图首先放盒子 <div class="wtChartBall_box"><div class="d_flex"><div i ...
echarts社区水球图、echart水球图动态水球图
目录普通水球图 3/4环形图 4层波浪水球图普通水球图 var value = 0.45; var value1 = 0.76; var data = [value, value1]; var o ...
使用思维导图编写测试用例
场景:手机号登录设计工具:表格.思维导图等价类划分法包括了边界值分析法: 1.手机号11位数字是有效等价类 2.手机号10位/12位数字是无效等价类,且10.12是边界值使用表格编写测试用例使 ...
python画动图-Python绘制动态水球图过程详解
先来看看绘制的动态水球图: 没有安装PyEcharts的,先安装PyEcharts: # 安装pyecharts模块,直接安装就是最新的版本pip install pyecharts 安装好PyEch ...
Pyecharts：pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表
Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表目录 ...

echart水滴_echarts水球图编写

echart水滴_echarts水球图编写相关推荐

最新文章

热门文章