文档章节

漂亮得不像实力派:ECharts 水球图教程

ECharts
 ECharts
发布于 2017/03/17 13:37
字数 1397
阅读 1595
收藏 0

水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果。

那么,今天我们就一起来学习一下,如何使用 ECharts 水球图。

第一步:引入 JavaScript 文件

ECharts 的水球图是一个插件类型的图表。这意味着,在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时,需要在引入 echarts.js 之后,另外引入水球图对应的 echarts-liquidfill.js,可以在 GitHub 找到最新版本。

<script src="echarts.js"></script>
<script src="echarts-liquidfill.js"></script>

<script>
// 使用水球图的代码
</script>

第二步:指定 DOM 元素作为图表容器

和创建 ECharts 的其他图表一样,我们需要指定 DOM 中的一个有高度和宽度的元素作为图表的容器——也就是图表将会绘制的位置。

<div id="liquidfill-chart" style="width=100%; height = 400px"></div>

传入该 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 上查看其它水球图作品

© 著作权归作者所有

ECharts
粉丝 126
博文 6
码字总数 11546
作品 1
海淀
程序员
私信 提问
ECharts 3.4 发布:新增象形柱图、主题河流图、水球图

在 ECharts 新发布的 3.4 版本中,新增象形柱图、主题河流图、水球图三种新图表。象形柱图利用图片和形状表现数据,主题河流图可以用来表示事件或主题等在一段时间内变化,水球图常用来展现百...

ECharts
2017/01/13
11.9K
30
pyecharts v0.4.0, 使用 Python 生成 Echarts 图表

pyecharts v0.4.0 发布! 更新日志: EchartsEnvironment 类性增 render_chart_to_file issue#425 新增 pieces 配置项,为 visualMap 组件提供自定义分段标签的功能 新增 tooltip_border_wid...

开源中国首席机器人
2018/03/10
3.1K
0
v-charts 1.18.0 发布,基于 Vue2.0 和 ECharts 的图表库

v-charts 1.18.0 发布了,更新内容如下: core: add log prop to comp (7abca27) 完善水球图的配置settings中关于seriesMap和wave的配置项 (3e82c6f) 增加词云图的封装 (30ddf30) 增加水球图...

h4cd
2018/10/16
2.3K
0
零云技术分享之:ECharts可视化图表开发

欢迎交流:零云,互联网产品快速开发框架 百度有几个开源项目值得称赞的,比如blend2、UEditor、ECharts 等,这里我们聊一聊ECharts3 可视化图表库。 有了ECharts 3,我们可以非常方便的构建...

CoreThink
2017/03/06
356
0
css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图(360加速球效果)

说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liquidfill 2.水球上的数字是动态滚动效果,用的是插...

宿管小阿姨
2018/07/26
711
0

没有更多内容

加载失败,请刷新页面

加载更多

java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
31分钟前
5
0
太全了|万字详解Docker架构原理、功能及使用

一、简介 1、了解Docker的前生LXC LXC为Linux Container的简写。可以提供轻量级的虚拟化,以便隔离进程和资源,而且不需要提供指令解释机制以及全虚拟化的其他复杂性。相当于C++中的NameSpa...

Java技术剑
32分钟前
8
0
Wifiphisher —— 非常非常非常流氓的 WIFI 网络钓鱼框架

编者注:这是一个非常流氓的 WIFI 网络钓鱼工具,甚至可能是非法的工具(取决于你的使用场景)。在没有事先获得许可的情况下使用 Wifiphisher 攻击基础网络设施将被视为非法活动。使用时请遵...

红薯
今天
44
1
MongoDB 4 on CentOS 7安装指南

本教程为CentOS x86_64 7.x操作系统下,MongoDB Community x86_64 4.2(GA)安装指南。 安装方式一:yum repo在线安装 [此方式较为简单,官方推荐] Step1:新建MongDB社区版Yum镜像源。 # vim ...

王焱君
今天
7
0
go-micro 入门教程1.搭建 go-micro环境

微服务的本质是让专业的人做专业的事情,做出更好的东西。 golang具备高并发,静态编译等特性,在性能、安全等方面具备非常大的优势。go-micro是基于golang的微服务编程框架,go-micro操作简单...

非正式解决方案
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部