第 22 、 23 行分别指定了引入 echarts.js 和 bar.js （注此处不需要写 .js ），之后定义了 function(ec) 来实现数据的传递，首先定义 myChart 变量，进行初始化，再定义 option 变量，按照指定格式将图表的参数以 json 数组的形式传入，通过调用 myChart.setOption(option) 方式将 json 传递给图表对象。

2.2 标签式单文件引入

这种方式较模块化方式较简单，单文件顾名思义就是引入一个文件的意思， Echarts 将所有的 js 实现文件全都放入了 echart-all.js 当中，直接引入该文件将可以展现所有类型的图表，如图 3 所示。

图表 3 单文件引入第一步

之后的操作类似于第一种方式，初始化图表以及传入 option 参数，如图 4 所示。

图表 4 单文件引入第二步

无论以两种哪种方式打开 html 文件，都会显示出如图 5 的柱状图。

图表 5 柱状图

3. 展现实例

3.1 数据准备

将数据可视化为图表的第一步是将数据读取到内存的数据结构当中。以折线图为例，需要准备的数据是 X 轴上的类别数组，以及 Y 轴上的数据二维数组（支持多个系列）。

其中将 X 轴上数据封装到 xAxis 对象中 data[] 数组中，而将 Y 轴上的数据封装到多个 Series 对象的 data[] 数组中。

xAxis : [

{

type : 'category' ,

data : [ "衬衫" , "羊毛衫" , "雪纺衫" , "裤子" , "高跟鞋" , "袜子" ]

}

],

series : [

{

"name" : "销量" ,

"type" : "bar" ,

"data" :[ 5 , 20 , 40 , 10 , 10 , 20 ]

}

]

3.2 构建 Option

将数据准备好后只需要构建一个 ChartObject 的 POJO 对象，将图表标题、图例、 XY 轴、背景色等设置项设置完成后，通过 jackson 的 ObjectMapper 将对象转化为 json 数组。 ChartObject 的结构如图 6 所示。

图表 6 ChartObject

当然这只是一个抽象基类，由于每类图表所需的参数都各不相同，因此将所有图表的共同属性抽象为一层，即有具有标题和背景色。而折线图除了这两个属性外还具有图例、工具箱、 X 轴、 Y 轴及系列属性，如图 7 所示。

图表 7 折线图 ChartObject

将每个属性的数据构造完成之后通过 ObjectMapper 将 LineAndBarEcahrtObject 对象转化为 json ，通过规定格式传给 Option 变量，拼接成如图 2 的 HTML ，既可以通过浏览器查看生成的图表。

4. 如何自定义提示框

Echart 自带的 Tooltips 提示是 X/rY:value 的形式，而如果想要在 Tooltips 中添加自定义的文字则需要以 js 写 function 来实现， tooltip 属性具有参数 formatter ，用来控制 tooltip 的格式，例如书写如下所示的一段 formatter ：

"formatter":

function(params)

{

var res=' 聚合方式 ';

res+='<br/>'+params[0].seriesName+'='+params[0].data;

return res;

}

F ormatter 代表着内容格式器，支持异步回调，在折线图中其变量为：

{a}|{a0} ：系列名称

{b}|{b0} ：类目值

{c}|{c0} ：数值

{d}|{d0} （部分图表类型无此项）：无

上述内容当中，定义了 tooltip 显示内容的格式为聚合方式 \r 系列名称 = 系列值，而非默认的 X\rY:value ，其中 params 对应着 Series 当中的内容， params[0].seriesName 是系列名称， params[0].data 是每行的系列值。

5. 如何定制主题

Echarts 官网上的实例具有调试的功能，左侧为图中可编辑的 Option ，右侧为图表展现，通过右侧下方的刷新按钮将文本编辑器中的 Option 放到 Echarts 中展现出相应的图表，而在刷新旁边同样提供了主题的切换，虽然在这里提供了 14 中主题，但在 Echarts 官网上下载的代码中就只有 2 中主题，分别为 macarons 和 infographic ，要实现这两种主题的加载只需要在 init 过程中传入该主题名称作为参数即可。如下所示：

var myChart = echarts.init(document.getElementById('main'), 'macarons');

若想在 Echarts 中加载其他主题，需要先使用审查元素功能，得到该主题的 js 文件，然后将该主题的定义放到 echarts-all.js 中。

例如 blue 主题定义如下：

n("echarts/theme/blue",[],function(){var e=

{

color:["#1790cf","#1bb2d8","#99d2dd","#88b0bb","#1c7099","#038cc4","#75abd0","#afd6dd"],

title:{textStyle:{fontWeight:"normal",color:"#1790cf"}},

dataRange:{color:["#1178ad","#72bbd0"]},

toolbox:{color:["#1790cf","#1790cf","#1790cf","#1790cf"]},

tooltip:{backgroundColor:"rgba(0,0,0,0.5)",axisPointer:{type:"line",lineStyle:{color:"#1790cf",type:'dashed'},crossStyle:{color:"#1790cf"},shadowStyle:{color:"rgba(200,200,200,0.3)"}}},

dataZoom:{dataBackgroundColor:"#eee",fillerColor:"rgba(144,197,237,0.2)",handleColor:"#1790cf"},grid:{borderWidth:0},

categoryAxis:{axisLine:{lineStyle:{color:"#1790cf"}},splitLine:{lineStyle:{color:["#eee"]}}},

valueAxis:{axisLine:{lineStyle:{color:"#1790cf"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.1)","rgba(200,200,200,0.1)"]}},splitLine:{lineStyle:{color:["#eee"]}}},

timeline:{lineStyle:{color:"#1790cf"},controlStyle:{normal:{color:"#1790cf"},emphasis:{color:"#1790cf"}}},

gauge:{axisLine:{show:!0,lineStyle:{color:[[.2,"#1bb2d8"],[.8,"#1790cf"],[1,"# 1c7099"]],width:8}},axisTick:{splitNumber:10,length:12,lineStyle:{color:"auto"}},splitLine:{length:18,lineStyle:{color:"auto"}},pointer:{length:90%,color:"auto"},

title:{textStyle:{color:"#333"}},detail:{textStyle:{color:"auto"}}},textStyle:{fontFamily:" 微软雅黑 , Arial, Verdana, sans-serif"}};return e})

上面的代码定义了蓝色的主题，其中定义的内容分别为：颜色版、标题、数据范围、提示框、数据缩进、类别轴、值轴、时间轴、通用部分、全局字体等，将该主题定义到 echarts.js 后，需要将 init 方法改为：

var myChart = echarts.init(document.getElementById('main'), ' blue ');

生成的图表将按照新的主题进行配色。

知识库 : 如何使用Echarts进行可视化展现

1. 什么是 Echarts

2. 如何将数据交给 Echarts

2.1 模块化单文件引入