ECharts案例教程2

淡淡的烟草味﹌ 2022-08-06 10:25 253阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

ECharts案例教程系列文章，试图通过案例从入门到精通的方式学习数据可视化工具ECharts，[第1篇][1]我们通过简单的条形图、条形图和折线图的混搭两个案例描述ECharts的使用流程，数据配置框架等。本博文为第2篇，研究时间轴在数据图中的应用。

![Center][]

## 简介 ##

[ECharts][]（Enterprise Charts，商业级数据图表）是百度的一个开源的数据可视化工具，底层基于[ZRender][](一个全新的轻量级canvas类库)，可以比较方便的折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现等。ECharts的开发团队有个Slider介绍为什么使用Echarts，感兴趣的童鞋可以移步欣赏（[Why ECharts][]）。

## 案例欣赏 ##

本案例为具有时间轴的折线系列图，适合用于对比展示数据，比如某超市年度销量变化图，某产品的前期投入资金图等。

![Center 1][]

大家也可以在线预览、编辑效果，请移步到codepen。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

== 带时间轴折线图== [全屏预览][Link 1]== [在线编辑][Link 2]== [下载收藏][Link 3]==

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

## 知识储备 ##

**1.标签式单文件引入Echarts。**

官方推荐三种使用引入ECharts的方式，模块化包引入、模块化单文件引入和标签式单文件引入。首篇博客采用了模块化单文件引入的方式，这种方式可以按需加载文件，是官方推荐的方式。本文我们将使用标签式单文件引入的方式，如果你的项目没有基于模块化开发，同时也不基于AMD规范，那么使用标签式单文件方式将会非常方便，我们只需要使用script标签引入一个ECharts库即可，可引入的单文件包括：dist/echarts-all.js和source/echarts-all.js。前者经过压缩，包括全图表，包含world，china以及34个省市级地图数据；后者未压缩，包括全图表，包含world，china以及34个省市级地图数据，可用于调试。

//from echarts example
    <body>
        <div id="main" style="height:400px;"></div>
        ...
        <script src="example/www2/js/dist/echarts-all.js"></script>
        <script>
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                ...
            }
            myChart.setOption(option);
        </script>
    </body>

**2.时间轴控件的使用。**

使用时间轴控件，我们需要从两个方面做准备，一个是设置时间轴，一个是设置每个时间点（数据和标题等）。

**设置时间轴**。时间轴在ECharts里使用timeline设置，每个图标最多只能拥有一个时间轴，主要参数如下。

<table style="width:900px;margin-left:2em; border-collapse:collapse;border:1px solid #333"> 
 <tbody> 
  <tr style="background:#333;color:#fff"> 
   <th>分组</th> 
   <th>参数</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>含义</th> 
  </tr> 
  <tr> 
   <td>参数设置</td> 
   <td>data</td> 
   <td>Array</td> 
   <td>[]</td> 
   <td>时间轴列表，同时也是轴label内容</td> 
  </tr> 
  <tr> 
   <td>show</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>显示策略，可选为：true（显示） | false（隐藏）</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>string</td> 
   <td>'time'</td> 
   <td>模式是时间类型，时间轴间隔根据时间跨度计算，可选为：'number'</td> 
  </tr> 
  <tr> 
   <td>notMerge</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>时间轴上多个option切换时是否进行merge操作，同setOption第二个参数（详见实例方法）</td> 
  </tr> 
  <tr> 
   <td>realtime</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>拖拽或点击改变时间轴是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false</td> 
  </tr> 
  <tr> 
   <td>播放控制</td> 
   <td>autoPlay</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>是否自动播放</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>是否循环播放</td> 
  </tr> 
  <tr> 
   <td>playInterval</td> 
   <td>number</td> 
   <td>2000</td> 
   <td>播放时间间隔</td> 
  </tr> 
  <tr> 
   <td>currentIndex</td> 
   <td>number</td> 
   <td>0</td> 
   <td>当前索引位置，对应options数组，用于指定显示特定系列</td> 
  </tr> 
  <tr> 
   <td>样式设置</td> 
   <td>width</td> 
   <td>number|string</td> 
   <td>自适应</td> 
   <td>时间轴宽度，默认为总宽度 - x - x2，指定width后将忽略x2。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number|string</td> 
   <td>50</td> 
   <td>时间轴高度</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>number|string</td> 
   <td>80</td> 
   <td>时间轴左上角横坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>number|string</td> 
   <td>null</td> 
   <td>时间轴左上角纵坐标，默认无，随y2定位，</td> 
  </tr> 
  <tr> 
   <td>x2</td> 
   <td>number|string</td> 
   <td>80</td> 
   <td>时间轴右下角横坐标</td> 
  </tr> 
  <tr> 
   <td>y2</td> 
   <td>number|string</td> 
   <td>0</td> 
   <td>时间轴右下角纵坐标</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>number|Array</td> 
   <td>5</td> 
   <td>内边距，单位px,接受数组分别设定上右下左边距，同css。</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>color</td> 
   <td>'rgba(0,0,0,0)'</td> 
   <td>背景颜色，默认透明。</td> 
  </tr> 
  <tr> 
   <td>borderWidth</td> 
   <td>number</td> 
   <td>0</td> 
   <td>边框线宽</td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td>color</td> 
   <td>'#ccc'</td> 
   <td>边框颜色</td> 
  </tr> 
  <tr> 
   <td>controlPosition</td> 
   <td>string</td> 
   <td>'left'</td> 
   <td>播放控制器位置，可选为：'left' | 'right' | 'none'</td> 
  </tr> 
  <tr> 
   <td>lineStyle</td> 
   <td>Object</td> 
   <td>参见代码</td> 
   <td>时间轴轴线样式，lineStyle控制线条样式，（详见<a href="http://echarts.baidu.com/doc/doc.html#LineStyle" title="" rel="nofollow">lineStyle</a>）</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>Object</td> 
   <td>参见代码</td> 
   <td>时间轴标签文本</td> 
  </tr> 
  <tr> 
   <td>checkpointStyle</td> 
   <td>Object</td> 
   <td>参见代码</td> 
   <td>时间轴当前点</td> 
  </tr> 
  <tr> 
   <td>controlStyle</td> 
   <td>Object</td> 
   <td>参见代码</td> 
   <td>时间轴控制器样式，可指定正常和高亮颜色</td> 
  </tr> 
  <tr> 
   <td>symbol</td> 
   <td>string</td> 
   <td>'emptyDiamond'</td> 
   <td>轴点symbol，同serie.symbol</td> 
  </tr> 
  <tr> 
   <td>symbolSize</td> 
   <td>number</td> 
   <td>4</td> 
   <td>轴点symbol，同serie.symbolSize</td> 
  </tr> 
 </tbody> 
</table>

注意：

a++. width、height、x、x2、y、y2等设置大小位置的参数，类型为number|string，可以接受数值型，单位为px，也可接受百分比（字符串），如50%表示居中显示。

b++. lineStyle的默认值为\{color: '\#666', width: 1, type: 'dashed'\}

c++. label的默认值为代码所示。参数解释如下

show : 是否显示 ；

interval : 挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） | \{number\} ；

rotate : 旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90 ；

formatter ： 间隔名称格式器：\{string\}（Template） | \{Function\} ；

textStyle : 文字样式（详见textStyle）

{
        show: true,
        interval: 'auto',
        rotate: 0,
        formatter: null,
        textStyle: {
            color: '#333'
        }
    }

d++. checkpointStyle的参数解释如下，默认值为代码所示。

symbol : 当前点symbol，默认随轴上的symbol

symbolSize : 当前点symbol大小，默认随轴上symbol大小

color : 当前点symbol颜色，默认为随当前点颜色，可指定具体颜色，如无则为'\#1e90ff'

borderColor ： 当前点symbol边线颜色

borderWidth ： 当前点symbol边线宽度

label同c

{
        symbol : 'auto',
        symbolSize : 'auto',
        color : 'auto',
        borderColor : 'auto',
        borderWidth : 'auto',
        label: {
            show: false,
            textStyle: {
                color: 'auto'
            }
        }
    }

e++. controlStyle的默认值为

{
        normal : { color : '#333'},
        emphasis : { color : '#1e90ff'}
    }

样式参数在时间轴上的作用效果见下图详视。

![timeline.png][]

**设置每个时间点**。第二步是设置每个具体的时间点，每个时间点就是一个图标，包括标题、图例、坐标轴、数据等，当然一般坐标轴、图例等不变，仅仅改变标题和数据。

var option = {
    	//时间轴设置
    	timeline : {},
    	//时间点设置
    	options : [
    		//第一个时间点
    		{},
    		//第二个时间点
    		{},
    		//...
    	]
    }

## 实现过程 ##

然后我们来解读实现过程。

时间轴里面我们设置了时间戳，仅仅显示年份；为保证美观，调整了时间轴的位置；同时设定了时间轴播放设置。

然后设置时间点，先看2012年的数据设置，我们设置标题、提示、图例、坐标轴、绘制数据线。

var option = {
    	//时间轴设置
    	timeline : {
    		//时间轴时间列表
    		data:[
    			'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01'
    			],
    		//自定义处理，只显示年份
    		label:{
    			formatter : function(s) {
    			return s.slice(0, 4);
    		  }
    		},
    		//时间轴的位置设定
    		height:80,
    		x:50,
    		padding:[40,10,10,10],
    		//时间轴播放控制
    		autoPlay : true,
    		playInterval : 2000
    	},
    	//时间点设置
    	options : [
    		//第一个时间点
    		//2002年数据表,新增内容
    		{
    		  title:{  
    			text:'2002年货物销量图',  
    			subtext:'纯属捏造，如有雷同，人品爆发。'  
    		  },  
    		  //设置提示  
    		  tooltip: {  
    			show: true  
    		  },  
    		  //设置图例  
    		  legend: {  
    			data:['销量']  
    		  },  
    		  //设置坐标轴  
    		  xAxis : [  
    			{  
    			  type : 'category',  
    			  data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"],
    			  axisLabel:{
    				margin:-20,
    				textStyle:{
    				  color:'#999',
    				  fontWeight:'bold'
    			   }
    			 }
    			}  
    		  ],  
    		  yAxis : [  
    			{  
    			  type : 'value'  
    			}  
    		  ],  
    		  series : [
    			{
    			  type:'line',
    			  data:[5, 20, 38, 10, 24, 20,24,32],
    			  //绘制平均线  
    			  markLine : {  
    				data : [  
    				  {type : 'average', name: '平均值'}  
    				]  
    			  },  
    			  //绘制最高最低点  
    			  markPoint : {  
    				data : [  
    				  {type : 'max', name: '最大值'},  
    				  {type : 'min', name: '最小值'}  
    				]  
    			  }  
    			}
    		  ]
    		},
    		//第二个时间点
    		{},
    		//...
    	]
    }

其他时间点只需要设置于2002年不同的地方即可，本例我们仅仅设置标题和数据表。

var option = {
    	//时间轴设置
    	timeline : {
    		//时间轴时间列表
    		data:[
    			'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01'
    			],
    		//自定义处理，只显示年份
    		label:{
    			formatter : function(s) {
    			return s.slice(0, 4);
    		  }
    		},
    		//时间轴的位置设定
    		height:80,
    		x:50,
    		padding:[40,10,10,10],
    		//时间轴播放控制
    		autoPlay : true,
    		playInterval : 2000
    	},
    	//时间点设置
    	options : [
    		//第一个时间点
    		//2002年数据表
    		{
    		  title:{  
    			text:'2002年货物销量图',  
    			subtext:'纯属捏造，如有雷同，人品爆发。'  
    		  },  
    		  //设置提示  
    		  tooltip: {  
    			show: true  
    		  },  
    		  //设置图例  
    		  legend: {  
    			data:['销量']  
    		  },  
    		  //设置坐标轴  
    		  xAxis : [  
    			{  
    			  type : 'category',  
    			  data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"],
    			  axisLabel:{
    				margin:-20,
    				textStyle:{
    				  color:'#999',
    				  fontWeight:'bold'
    			   }
    			 }
    			}  
    		  ],  
    		  yAxis : [  
    			{  
    			  type : 'value'  
    			}  
    		  ],  
    		  series : [
    			{
    			  type:'line',
    			  data:[5, 20, 38, 10, 24, 20,24,32],
    			  //绘制平均线  
    			  markLine : {  
    				data : [  
    				  {type : 'average', name: '平均值'}  
    				]  
    			  },  
    			  //绘制最高最低点  
    			  markPoint : {  
    				data : [  
    				  {type : 'max', name: '最大值'},  
    				  {type : 'min', name: '最小值'}  
    				]  
    			  }  
    			}
    		  ]
    		},
    		//第二个时间点
    		//2003年数据表，新增内容
    		{
    		  title:{  
    			text:'2003年货物销量图',  
    			subtext:'纯属捏造，如有雷同，人品爆发。'  
    		  },  
    		  series : [
    			{
    			  type:'line',
    			  data:[10, 20, 36, 18, 26, 16,20,34],
    			   //绘制平均线  
    			  markLine : {  
    				data : [  
    				  {type : 'average', name: '平均值'}  
    				]  
    			  },  
    			  //绘制最高最低点  
    			  markPoint : {  
    				data : [  
    				  {type : 'max', name: '最大值'},  
    				  {type : 'min', name: '最小值'}  
    				]  
    			  }  
    			}
    		  ]
    		},
    		//第三个时间点
    		{},
    		//...
    	]
    }

剩下的就不多说了，大家自行补足。

感谢您的阅读，欢迎提出您的宝贵意见。

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[1]: http://blog.csdn.net/whqet/article/details/42703973
[Center]: /images/20220806/7190a36771204599a7e7b0aa6b5f6b1b.png
[ECharts]: http://echarts.baidu.com/index.html
[ZRender]: http://ecomfe.github.io/zrender/
[Why ECharts]: http://echarts.baidu.com/doc/slide/whyEcharts.html#/
[Center 1]: /images/20220806/c3344ebb183141a39a42d69ebfc56c9b.png
[Link 1]: http://codepen.io/whqet/full/zxZEje/
[Link 2]: http://codepen.io/whqet/pen/zxZEje
[Link 3]: http://codepen.io/whqet/share/zip/zxZEje/
[timeline.png]: /images/20220806/5ee5e41d356048cd8e1d2fe7de66394e.png
[whqet]: http://blog.csdn.net/whqet