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

第一次写技术博客，有不足的地方希望大家指证出来，我再加以改正，谢谢大家。

之前一直没有找到一个合适的分时图项目，所以决定自己动手撸一个。接触的图表框架不多，在网上看到不少人推荐使用echarts，看了一下，很不错，例子多，文档也全，简单的过了一下配置项，感觉可以，就选择了使用echarts来实现。

这是雪球的分时图效果，接下来我将用几篇文章来讲解如何使用echarts来实现以下效果图。

一．分时图的组成

1．仔细看分时图的话，会发现其实分时图是由折线图跟柱状图来组成的。上方的折线图中，左边的数值是价格区间的刻度值，价格区间会有一个中间值，就是基准值（昨日收盘价），在基准值的上方表示上涨多少块，在基准值下方表示下跌多少块，右边的百分比则是表示上涨下跌的百分比。

2．下方柱状图则比较简单，就是单纯的柱状图，颜色再分成红绿色即可。

二．Echarts的使用

下载echarts。下载后解压出来，具体的文件描述就不做讲解。
创建项目。

　　　　(1) 创建项目

　　　　(2) 新建js文件夹，找到解压的文件夹中的dist文件夹，把echarts.js或者echarts.mim.js复制出来使用。

　　　　(3) 新建index.html文件，并引用echart.min.js

　　　　　项目简单结构

　　　　(4) 创建一个简单的折线图

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>分时图</title><script type="text/javascript" src="js/echarts.min.js" ></script><style>#charts{/*折线图的宽度*/width:500px;/*折线图的高度*/height:500px;}</style></head><body><div id="charts"></div><script type="text/javascript">// 初始化一个echarts的对象var chart =  echarts.init(document.getElementById('charts'));// echarts折线图的配置项var option = {// x轴配置
                xAxis: {type: 'category',// x轴显示的数据
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y轴配置
                yAxis: {type: 'value'},  series: [{data: [1, 5, 5, 8, 2, 9, 4],// line类型是折线图，bar类型是柱状图
                    type: 'line'}]};chart.setOption(option);</script></body>
</html>

　　　　效果图

　　　　(5)创建一个简单的柱状图，把之前代码的type:'line'，修改为type:'bar'即可

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>分时图</title><script type="text/javascript" src="js/echarts.min.js" ></script><style>#charts{/*折线图的宽度*/width:500px;/*折线图的高度*/height:500px;}</style></head><body><div id="charts"></div><script type="text/javascript">// 初始化一个echarts的对象var chart =  echarts.init(document.getElementById('charts'));// echarts折线图的配置项var option = {// x轴配置
                xAxis: {type: 'category',// x轴显示的数据
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y轴配置
                yAxis: {type: 'value'},  series: [{data: [1, 5, 5, 8, 2, 9, 4],// line类型是折线图，bar类型是柱状图
                    type: 'bar'}]};chart.setOption(option);</script></body>
</html>

　　　　效果图

　　　　(6)把两个图表图片经过合并后，分时图已经有了最初的样子，下一章将进行图表的整合。

转载于:https://www.cnblogs.com/jellybean961/p/11222074.html

使用百度echarts仿雪球分时图（一）相关推荐

使用百度echarts仿雪球分时图（四）
这章节来收拾一下一些小BUG,顺便把各个小提示信息也补上,分时图也就完成了. 上章节末尾提到的一个bug,就是第一个grid跟第三个grid之间是断开的,折线并没有连在一起,所以先来收拾这个问题.没有 ...
使用百度echarts仿雪球分时图（三）
这章节将完成我们的分时图,并使用真实的数据来进行展示分时图. 一天的交易时间段分为上午的09:30~11:30,下午的13:00~15:00两个时间段,因为分时间段的关系,数据是不连续的,所以会先分为 ...
利用百度Echarts.js生成雷达图
一.下载地址:http://echarts.baidu.com/ 二.看文档(必须的).可选择的看,先完成想要的功能,再扩展. 三.使用推荐的模块化单文件引入. 在在dist文件夹下会有 echa ...
WPF仿百度Echarts人口迁移图
关于大名鼎鼎的百度Echarts我就不多说了不了解的朋友直接看官方的例子吧 http://echarts.baidu.com/examples.html 前阵子我加入了一个WPF的技术交流群此de ...
股票图,K线图,蜡烛图,高仿雪球股票
股票图,K线图,蜡烛图,高仿雪球股票,教你一步步实现股票图项目地址讲K线图之前,先来一个引言. 作为Android开发者需要立即提升的三项技能: 分别是:UI,网络,线程,而UI又分:布局,绘制, ...
Echarts分时图绘制
应为公司要做一个手机端的分时图,百度echats中只有折线图所以这边查看了api进行了些改造,有需要的可以私聊我. 首先可以参考echats中的折线图demo这边就不具体说明了 function pr ...
一步步教你画股票图,K线图,高仿雪球股票
股票图,K线图,蜡烛图,高仿雪球股票,教你一步步实现股票图项目地址 _005.gif _006.gif 讲K线图之前,先来一个引言. 前两天听了朱凯大神的知乎live,其中说到一点,作为Androi ...
基于ECharts+百度地图开发散点扩散图
基于ECharts+百度地图开发散点扩散图用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件下载地址为:http://echarts.bai ...
百度地图结合echarts地图运历图
百度地图结合echarts地图运历图关于各省显示车辆发车数量引入部分 <script src="~/Scripts/Echarts/Js/esl.js"></ ...

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

使用百度echarts仿雪球分时图（一）相关推荐

最新文章

热门文章