使用百度echarts仿雪球分时图（一）

1、使用百度echarts仿雪球分时图（一）第一次写技术博客，有不足的地方希翼大家指证出来，我再加以改正，感谢大家。之前向来没有找到一个合适的分时图项目，所以打算自己动手撸一个。接触的图表框架不多，在网上看到不少人推举用法echarts，看了一下，很不错，例子多，文档也全，容易的过了一下配置项，感觉可以，就挑选了用法echarts来实现。这是雪球的分时图效果，接下来我将用几篇文章来讲解如何用法echarts来实现以下效果图。一分时图的组成1认真看分时图的话，会发觉其实分时图是由折线图跟柱状图来组成的。上方的折线图中，左边的数值是价格区间的刻度值，价格区间会有一个中间值，就是基准值（昨日收盘价），在

2、基准值的上方表示上涨多少块，在基准值下方表示下跌多少块，右边的百分比则是表示上涨下跌的百分比。2下方柱状图则比较容易，就是单纯的柱状图，色彩再分成红绿色即可。二echarts的用法下载echarts。下载后解压出来，详细的文件描述就不做讲解。创建项目。(1)创建项目(2)新建js文件夹，找到解压的文件夹中的dist文件夹，把echarts.js或者echarts.mim.js复制出来用法。(3)新建index.html文件，并引用echart.min.js项目容易结构(4)创建一个容易的折线图分时图charts/*折线图的宽度*/width:500px;/*折线图的高度*/height:500

3、px;/初始化一个echarts的对象varchart=echarts.init(document.getelementbyid(&39;charts&39;);/echarts折线图的配置项varoption=/x轴配置xaxis:type:&39;category&39;,/x轴显示的数据data:&39;mon&39;,&39;tue&39;,&39;wed&39;,&39;thu&39;,&39;fri&39;,&39;sat&39;,&39;sun&

4、amp;39;,/y轴配置yaxis:type:&39;value&39;,series:data:1,5,5,8,2,9,4,/line类型是折线图，bar类型是柱状图type:&39;line&39;chart.setoption(option);效果图(5)创建一个容易的柱状图，把之前代码的type:&39;line&39;，修改为type:&39;bar&39;即可分时图charts/*折线图的宽度*/width:500px;/*折线图的高度*/height:500px;/初始化一个echarts的对象varchart=e

5、charts.init(document.getelementbyid(&39;charts&39;);/echarts折线图的配置项varoption=/x轴配置xaxis:type:&39;category&39;,/x轴显示的数据data:&39;mon&39;,&39;tue&39;,&39;wed&39;,&39;thu&39;,&39;fri&39;,&39;sat&39;,&39;sun&39;,/y轴配置yaxis:type:&39;value&39;,series:data:1,5,5,8,2,9,4,/line类型是折线图，bar类型是柱状图type:&39;bar&am