数据图表泛指在屏幕中显示的,可直观展示统计信息属性(时间性、数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观、形象地"可视化"的手段。数据图表可以仿版地查看数据的差异和预测趋势,使数据比较或数据变化趋势变得一目了然,有助于快速、有效地表达数据关系。

可以说,生成数据图表是统计系统中的一个基本功能。在可视化生态系统中,ECharts 通过提供方便丰富的可视化图表,极大缩短了用户与数据的距离。

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

本文主要讲解再 Spring 下,后端生成图表的过程以及前端的处理。


ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表,ECharts 还提供了自定义系列,只需要传入一个renderItem函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。


在阅读本文之前,建议先看下 ECharts 官网教程,并默认读者已掌握其简单的配置项

首先在 pom.xml 添加依赖:

<dependency>
    <groupId>com.github.abel533</groupId>
    <artifactId>ECharts</artifactId>
    <version>3.0.0.6</version>
</dependency>


一个简单的例子:

@Test
public void chart1() {
    String[] week = new String[]{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"};
    ArrayList<Integer> data = new ArrayList<>(7);
    for (int i = 0; i < 7; i++) {
        data.add((int) (Math.random() * 300) + 600);
    }

    Option option = new Option();
    option.xAxis(new CategoryAxis().data(week));
    option.yAxis(new ValueAxis());
    option.series(new Line().data(data.toArray()));

    System.out.println(JSON.toJSONString(option));
}

生成的 JSON 串如下:

{
    "series":[
        {
            "data":[870,739,810,859,793,750,646],
            "type":"line"
        }
    ],
    "xAxis":[
        {
            "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
            "type":"category"
        }
    ],
    "yAxis":[
        {
            "type":"value"
        }
    ]
}


如图所示,这样就会生成一张简单的图表。

前端处理:

jQuery下

let myChart = echarts.init($("#vistorChart")[0]);
...
myChart.setOption(data);

Vue下,使用 vue-echarts 组件

import ECharts from 'vue-echarts/components/ECharts'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.component('chart', ECharts)
...
<chart ref="chart1" :options="chart1" :auto-resize="true"></chart>
...
this.chart1 = JSON.parse(res.data.chart1);

更加详细的代码会在下一篇文章中列出。(本文主要写 Java 相关部分)

也可以参考我以前的文章 网站建设——访客统计 1 、网站建设——访客统计 2


更加复杂的图表:

@Test
public void chart2() {
    String[] month = {"1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"};

    Option option = new Option();
    option.title().text("折柱混合").subtext("虚拟数据");
    option.tooltip().trigger(Trigger.axis)
            .axisPointer(new AxisPointer()
                    .type(PointerType.cross)
                    .crossStyle((CrossStyle) new CrossStyle().color(Color.GRAY)));
    option.toolbox().show(true).feature(Tool.dataView,
            new MagicType(Magic.line, Magic.bar).show(true),
            Tool.restore, Tool.saveAsImage);
    option.legend("蒸发量", "降水量", "平均温度");
    option.xAxis(new CategoryAxis().data(month));
    option.yAxis(
            new ValueAxis().name("水量").min(0).max(250).interval(50).axisLabel(new AxisLabel().formatter("{value} ml")),
            new ValueAxis().name("温度").min(0).max(25).interval(5).axisLabel(new AxisLabel().formatter("{value} °C")));
    option.series(
            new Bar().name("蒸发量").data(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3),
            new Bar().name("降水量").data(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3),
            new Line().name("平均温度").yAxisIndex(1).data(2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2));

    System.out.println(JSON.toJSONString(option));
}

生成的JSON串:

{"legend":{"data":["蒸发量","降水量","平均温度"]},"series":[{"data":[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3],"name":"蒸发量","type":"bar"},{"data":[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],"name":"降水量","type":"bar"},{"data":[2.0,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23.0,16.5,12.0,6.2],"name":"平均温度","type":"line","yAxisIndex":1}],"title":{"subtext":"虚拟数据","text":"折柱混合"},"toolbox":{"feature":{"dataView":{"lang":["数据视图","关闭","刷新"],"readOnly":false,"show":true,"title":"数据视图"},"magicType":{"show":true,"title":{"bar":"柱形图切换","stack":"堆积","tiled":"平铺","line":"折线图切换"},"type":["line","bar"]},"restore":{"show":true,"title":"还原"},"saveAsImage":{"lang":["点击保存"],"show":true,"title":"保存为图片","type":"png"}},"show":true},"tooltip":{"axisPointer":{"crossStyle":{"color":{"r":128,"g":128,"b":128,"alpha":255}},"type":"cross"},"trigger":"axis"},"xAxis":[{"data":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"type":"category"}],"yAxis":[{"axisLabel":{"formatter":"{value} ml"},"interval":50,"max":250,"min":0,"name":"水量","type":"value"},{"axisLabel":{"formatter":"{value} °C"},"interval":5,"max":25,"min":0,"name":"温度","type":"value"}]}

生成的图表:


ECharts 拥有大量的 配置项 和丰富的 官方示例 ,可以自行配置和修改,方便展示最适合自己的统计图表。