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

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

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

一．分时图的组成

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

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

二．Echarts的使用

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

　　　　(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)把两个图表图片经过合并后，分时图已经有了最初的样子，下一章将进行图表的整合。

　　

使用百度echarts仿雪球分时图（一）的更多相关文章

  1. 使用百度echarts仿雪球分时图（四）

    这章节来收拾一下一些小BUG,顺便把各个小提示信息也补上,分时图也就完成了. 上章节末尾提到的一个bug,就是第一个grid跟第三个grid之间是断开的,折线并没有连在一起,所以先来收拾这个问题.没有 ...

  2. 使用百度echarts仿雪球分时图（三）

    这章节将完成我们的分时图,并使用真实的数据来进行展示分时图. 一天的交易时间段分为上午的09:30~11:30,下午的13:00~15:00两个时间段,因为分时间段的关系,数据是不连续的,所以会先分为 ...

  3. 使用百度echarts仿雪球分时图（二）

    上一章简单的介绍了一下分时图的构成,其实就是折线图跟柱状图的组成.本来这章打算是把分时图做完,然后再写一章来进行美化和总结,但是仔细观察了一下,发现其实东西还是有点多的.分时图的图表做完后,还要去美化 ...

  4. 使用百度Echarts制作力导向图

    最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...

  5. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

  6. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  7. iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/

    http://zanderzhang.gitcafe.io/2015/09/19/iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/ 百度外卖选择送货地址: 饿了么选择送货地 ...

  8. [Echarts]用Echarts绘制饼状图

    在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...

  9. 百度echarts使用--y轴label数字太长难以全部显示

    问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...

随机推荐

  1. CentOS7下搭建zabbix监控（三）——Zabbix监控服务配置

    CentOS7下搭建zabbix监控(一)——Zabbix监控端配置 CentOS7下搭建zabbix监控(二)——Zabbix被监控端配置 (1).配置Zabbix监控Apache服务 主机名:yo ...

  2. iOS 将一个UIImage缩放到指定Size

    这方法挺实用的,直接调用就可以得到想要的size. //将一个UIImage缩放变换到指定Size -(UIImage*) OriginImage:(UIImage *)image scaleToSi ...

  3. Hive实现WordCount详解

    一.WordCount原理 初学MapReduce编程,WordCount作为入门经典,类似于初学编程时的Hello World.WordCount的逻辑就是给定一个/多个文本,统计出文本中每次单词/ ...

  4. Jsoup-基础练习

    认识Jsoup 一个解析网页的工具 无论你用什么语言爬虫,都要解析网页,今天,我们用一款常用的网页解析Jsoup,来开启爬虫的第一课 认识网页,认识爬虫,认识你自己 *** 快速上手 了解一个新东西最 ...

  5. Core Data 的使用

    一.概念 1.Core Data 是数据持久化存储的最佳方式 2.数据最终的存储类型可以是:SQLite数据库,XML,二进制,内存里,或自定义数据类型 在Mac OS X 10.5Leopard及以 ...

  6. Win10安装PostgreSQL9.6

    首先去 官网 下载PostgreSQL 9.6. 可以看到最新版已经到11了,但是我们这里还是以9.6.10版本为例进行下载. 下载好之后点击进行安装,安装期间的一些参数如下: 默认的安装位置是C:\ ...

  7. spacemacs:emacs和vim结合，大杀器。vim党转emacs

    结合本人基础,做下述结论.不一定准确.  基础:  1. vim操作和高级操作,熟悉.使用的spf13-vim.  2. emacs以前学过,但是按键太累,相比vim简直难受.  3. emacs命令 ...

  8. hupu面试

    1.mybatis更新一条数据时,如果某字段为空,则不更新它,使用默认值? <update id="updateProduct" parameterType="Pr ...

  9. webkit浏览器下改变滚动条样式

    /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...

  10. CDH6.2的fair-scheduler.xml

    <?xml version="1.0" encoding="UTF-8" standalone="yes"?><alloc ...