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

之前一直没有找到一个合适的分时图项目，所以决定自己动手撸一个。接触的图表框架不多，在网上看到不少人推荐使用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. API的查看

    步骤: 1. 双击打开API 2. 点击显示, 找到索引 3. 输入要查找的类名 , 敲击Enter两次 4. 看该类所属的包, java.lang包下的类,在使用的时候不需要导包 ,其他的都需要导包 ...

  2. 建站之星v2.7快速更换模版

    网站建设很多人使用建站之星因为它的拖拽功能非常友好.但是很多人不会使用建站之星更换模版,网上的教程又复杂难懂,现在教大家一个简单快捷的办法. 方法/步骤     废话不多说,从模版目录找到你喜欢的模版 ...

  3. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_10-SpringSecurityOauth2研究-校验令牌&刷新令牌

    3.5校验令牌 Spring Security Oauth2提供校验令牌的端点,如下: Get: http://localhost:40400/auth/oauth/check_token?token ...

  4. WordPress的Bootstrap面包屑导航

    <ol class="breadcrumb"> 当前位置: <li><a href="<?php bloginfo('url'); ? ...

  5. 移动架构之MVP框架

    MVP是在开发中常用的框架,要了解其原理,先要从了解MVC开始,这里就对MVP框架做一个简单的介绍 MVC MVC为Model,View与Controllor的缩写 Model:业务逻辑和实体模型 V ...

  6. Ie浏览器请求400错误,谷歌火狐等浏览器正常请求.

    做项目的时候,遇到一个小的问题.一个location.href="请求的url"在其它浏览器上是可以正常请求的.但是在ie浏览器上确出现奇怪的http请求400错误,我们先来对于h ...

  7. 用BERT做语义相似度匹配任务：计算相似度的方式

    1. 自然地使用[CLS] 2. cosine similairity 3. 长短文本的区别 4. sentence/word embedding 5. siamese network 方式 1. 自 ...

  8. jqGrid获取展示的所有行id集合

    $("#jqGrid").getDataIDs();

  9. zabbix 部署包安装

      关于zabbix的安装方式,官网提供了几种方法,分别是:部署包安装.源码安装.容器安装.容器安装我之前已经写过一篇,而现在这一篇是关于部署包安装的.   按照官网的说法,我们需要如下几个步骤:   ...

  10. LC 144. / 94. / 145. Binary Tree Preorder/ Inorder/ PostOrder Traversal

    题目描述 144. Binary Tree Preorder Traversal 94. Binary Tree Inorder Traversal 145. Binary Tree Postorde ...