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幅记录欢 ...
最新文章
- 为什么大家都不戳破深度学习的本质?!
- 19个决定性时刻,2030年前,这些黑科技必将发生
- WPF 提供了以下关键帧动画类[msdn]
- 7.28Assignment
- matlab中reshape和repmat函数的用法
- execv shell_shell的exec命令
- 2012_Houdini_ShowReel.
- 2017.7.18可变/不可变类型,符号运算及其流程控制
- maven安装遇到的坑
- HR怼程序员频繁跳槽,程序员竟这么回怼
- SAP License:ERP对供应链管理和实施
- [原创]测试用例设计策略
- 运用.net工厂编写数据库类
- atitit.交换机 汇聚上联、网络克隆和标准共享的原理与区别
- 并发编程学习之延时队列DelayQueue
- 打狗棒法之:Cknife(C刀)自定义模式秒过安全狗(二)
- 8个常用的python办公室自动化技巧
- Qt MDI Window开发
- SAS实验2——假设检验
- 数学基础知识(公式)不用学太深,了解基本公式即可,遇到问题再查吧。