echart水滴_漂亮得不像实力派:ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果。
那么,今天我们就一起来学习一下,如何使用 ECharts 水球图。
第一步:引入 JavaScript 文件
ECharts 的水球图是一个插件类型的图表。这意味着,在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时,需要在引入 echarts.js 之后,另外引入水球图对应的 echarts-liquidfill.js,可以在 GitHub 找到最新版本。
// 使用水球图的代码
第二步:指定 DOM 元素作为图表容器
和创建 ECharts 的其他图表一样,我们需要指定 DOM 中的一个有高度和宽度的元素作为图表的容器——也就是图表将会绘制的位置。
传入该 DOM 元素,使用 ECharts 初始化图表:
var chart = echarts.init(document.getElementById('liquidfill-chart'));
第三步:设置水球图参数
和其他 ECharts 图表一样,水球图提供将系列的 type 指定为 'liquidFill'(注意大小写)来表明这是一个水球图类型。
一个简单的配置项可以是:
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3]
}]
};
chart.setOption(option);
这样,就能得到水球图效果了:
如果发现图表没有正确显示,你可以检查以下几种可能:
JS 文件是否正确加载;
echarts 变量是否存在;
控制台是否报错(如果报错显示 liquidFill 系列不存在,则很可能 echarts-liquidfill.js 没有正确加载);
DOM 元素在 echarts.init 的时候是否有高度和宽度。
可以发现,在上面的代码中,我们只指定了图表类型为 'liquidFill',以及把数据设置为 [0.6, 0.5, 0.4, 0.3](对应生成的四个波浪),而其他的参数都是预设的。
即使不配置很多参数,预设的参数也可以使你获得一个优雅的水球图效果。而如果有特定的需求,ECharts 水球图又支持非常高度定制的效果。下面我们具体说明如何定制化你的水球图。
第四步:定制化水球图
水球图支持非常高度定制化的需求,包括颜色(color)、大小(radius)、波的振幅(amplitude)、波长(waveLength)、相位(phase)、周期(period)、移动方向(direction)、形状(shape)、动画(waveAnimation)等等,完整的配置项参数参见水球图 API。文档有针对每个配置项的详细说明,这里我们来介绍一些重要的参数。
形状与动画
除了默认的圆形('circle')水球图,还可以将 shape 设置为 ECharts Symbol 的其他类型:'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。甚至,使用 'path://...' 的形式,为其指定一个 SVG 路径,得到非常酷炫的效果:
通过将 direction 设为 'left' 或 'right',指定波浪的移动方向,或者设为 'none' 表示静止。
上面的例子完整的配置项代码为:
// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '40%',
shape: 'diamond',
center: ['25%', '25%']
}, {
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
direction: 'left',
radius: '40%',
shape: 'rect',
center: ['75%', '25%']
}, {
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '40%',
shape: 'roundRect',
center: ['25%', '75%'],
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
outline: {
show: false
},
waveAnimation: false, // 禁止左右波动
}, {
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '50%',
shape: 'pin',
center: ['75%', '75%'],
amplitude: 0,
waveAnimation: false,
outline: {
show: false
},
backgroundStyle: {
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
}]
};
单个波的配置
除了对所有水波做的设置之外,每个水波可以进行单独的配置。和 ECharts 的其他配置项一样,对单个数据的配置项将覆盖整个系列的配置项。
在这个例子中,我们将第二条水波设为红色,并且改变其移动方向。
var option = {
series: [{
type: 'liquidFill',
data: [0.6, {
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: 'red'
}
}
}, 0.4, 0.3]
}]
};
可以发现,原先 data 中的一项是一个数字,而在需要做特殊定制的数据中,我们将其设置为一个对象,value 值是原先的数字,其他配置项将覆盖系列配置项的值。
文字显示
水球图中间的文字有个酷炫的效果,在水波和背景前的文字颜色是不同的,可以通过 insideColor 设置水波处的文字颜色,color 设置背景处的文字颜色。
var option = {
series: [{
type: 'liquidFill',
radius: '80%',
data: [0.5, 0.45, 0.4, 0.3],
label: {
normal: {
textStyle: {
color: 'red',
insideColor: 'yellow',
fontSize: 50
}
}
}
}]
};
图表中间默认显示百分比数据,如果你需要将其设置为其他文字内容,可以通过 formatter 指定,这与 ECharts 的其他格式化函数也是相同的。
formatter 可以是一个字符串,其中 '{a}'、'{b}'、'{c}' 会被分别替换成系列名称、数据名称、数据值。
如:
var option = {
series: [{
type: 'liquidFill',
name: 'Liquid Fill',
data: [{
name: 'First Data',
value: 0.6
}, 0.5, 0.4, 0.3],
label: {
normal: {
formatter: '{a}\n{b}\nValue: {c}',
textStyle: {
fontSize: 28
}
}
}
}]
};
此外,formatter 也可以是一个函数,以下代码能得到和上面字符串形式同样的效果。
formatter: function(param) {
return param.seriesName + '\n'
+ param.name + '\n'
+ 'Value:' + param.value;
}
小结
以上,我们介绍了 ECharts 水球图的一些基本用法,希望能够给大家启发,创作出更多波涛汹涌的作品。
更完整的配置项请参考 GitHub 上详细的文档,或者到 ECharts Gallery 上查看其它水球图作品。
echart水滴_漂亮得不像实力派:ECharts 水球图教程相关推荐
- echart水滴_用echarts实现水滴图效果
老规矩,看效果先:(这里的水滴是动态的) 注意,这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js 可以官网也可以等到 ...
- echart图片库_基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- [视频]老罗涂着李佳琦的口红,漂亮得不像实力派!4-1直播你看好吗?
点击"技术领导力"关注∆ 每天早上8:30推送 作者| Mr.K 编辑| Emma 来源| 技术领导力(ID:jishulingdaoli) 老罗是我非常喜欢的脱口秀演员,作 ...
- java 打印心形图案_简单漂亮的心形礼品盒折纸手工教程
1 精美的礼物少不了一个与其搭配的包装盒,当你有一份可经表达你心意或爱的礼物,准备送给他/她时,用这样一个心形的纸盒作为礼物的包装盒是再合适不过了,即简单又足够漂亮,而且可以与你的礼物要表达的意思相. ...
- python画七色花代码_漂亮的七色花简笔画怎么画
导读:小编根据大家的需要整理了一份关于<漂亮的七色花简笔画怎么画>的内容,具体内容: 七色花就如同它的名字一样,是有七种颜色的花朵,非常的美丽.那么漂亮的七色花的简笔画要怎么画呢?小编今天 ...
- echaarts水滴(水球图)波浪效果
效果图 首先放盒子 <div class="wtChartBall_box"><div class="d_flex"><div i ...
- opengl 贴图教程_如何使用叶贴图可视化空气污染-深入教程
opengl 贴图教程 In my previous story on forecasting air pollution, I looked into using recurrent neural ...
- android 心形上漂动画,PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程
各位使用PowerPoint Viewer的同学们,你们知道怎么制作一个漂亮心形飞出动画吗?在这篇教程内小编就为各位呈现了PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程. Pow ...
- 那一抹秋色!漂亮的秋天风景壁纸【组图】
你是否在遗憾,秋天如此的短暂,没来得及欣赏美丽的秋景,就将迎来寒冷冬日?那看看下面这组图吧,世界上最美丽的秋景尽在眼前.下面给大家带来一组赏心悦目的秋天风景壁纸. 您可能感兴趣的相关文章 25幅记录欢 ...
最新文章
- NIPS | 谷歌AI大军来袭,看450多名员工如何横扫今年大会
- thinkphp框架细节
- wfs.js windows用法
- ArcGIS Server for Silverlight 之集群(Simple Clusterer)
- curl封装php,PHP封装curl的简单方法
- T-SQL and XML
- 爬虫 spider06——解析数据
- 剑指offer之树的子结构
- 右键添加git-bash
- 网络摄像头转usb接口_Arduino + USB Host Sheild 实现USB鼠标转PS/2接口
- 【论文】基于特定实体的文本情感分类总结(PART III)
- 基于单片机的超市储物柜设计_毕业设计论-单片机储物柜
- Cocos2d-x在线粒子编辑器
- JAVA中输出姓王的姓名,没出过国的人,不配姓王
- UCOS操作系统——信号量实验(十)
- luogu P3966 [TJOI2013]单词
- delphi 水晶按钮
- 在Excel中如何提取括号中的数字
- android蓝牙查看电池容量_安卓手机如何查看电池损耗?
- HTML与CSS学习总结
热门文章
- 数据库操作--基础篇
- 【有问不答】大摆球物理模型(MATLAB)
- Android APP开发实战:界面背景图片的添加与显示
- softmax激活函数_深度学习中的激活函数,从softmax到sparsemax数学证明
- [实体关系抽取|顶刊论文]UniRel:Unified Representation and Interaction for Joint Relational Triple Extraction
- GSMS软件系统华为应急通讯完美版安装教程
- “POW'ER 2019全球开发者大会”明天开幕,共议技术跨界融合,7大亮点抢先看
- 南方农机杂志南方农机杂志社南方农机编辑部2023年第5期目录
- 【WebGL学习日报】22/09/01 : 绘制点
- 多比(SVG/VML)图形控件