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

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

    MauiMETA工具的使用(一) 摘自:https://www.jianshu.com/p/a377119947f8   tianxiaoMCU 关注 2018.12.21 14:15 字数 267  ...

  2. 【python比较两个列表list】 python2 cmp() python3 operator模块

    https://www.yiibai.com/python/list_cmp.html 如果元素的类型相同,则执行比较并返回结果.如果元素是不同的类型,则检查它们是否是数字. 如果数字,必要时进行数字 ...

  3. laravel 小知识点

    分块导出brokerageCharge = DB::table('表名')$brokerageCharge = $brokerageCharge->chunk(100,function($bro ...

  4. CommMonitor10.0.3串口过滤工具(serial port monitor)

    CommMonitor  串行端口监视精灵是用于RS232 / RS422 / RS485端口监控的专业强大的系统实用程序软件.CommMonitor监视显示,记录和分析系统中的所有串行端口活动.这是 ...

  5. Xena L23网络测试仪Valkyrie使用技巧100例：使用Xena官方在线演示设备 (编号00)

    需求# 1.新用户:没有硬件,想看看软件长什么样,好不好用,风格如何,怎么办? 2.代理商:没有硬件,想给客户Show一下Xena高大上的软件,怎么办? 3.老用户:邮件推送了新的软件版本,据说很多新 ...

  6. Andrew Ng机器学习课程17(2)

    Andrew Ng机器学习课程17(2) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:主要介绍了利用value iteration和policy i ...

  7. 关于PADS的一些概念和实用技巧（二）

    关于PADS的一些概念和实用技巧(二) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 1. 关于制作part 首先在logic中绘制CAE封装,在保存元件时 ...

  8. 日常工作问题解决：centos7下配置网卡以及查询网卡UUID

    目录 1.配置网卡 1.1 网卡查看命令:ifconfig -a 1.2 网卡配置文件说明 1.3 重启网络服务 2.查看确认网卡UUID 2.1 网卡配置文件正常时 2.2 网卡配置文件不可用或者配 ...

  9. 生成 n 个不同的随机数且随机数区间为 [0,n)

    生成 n 个不同的随机数且随机数区间为 [0,n) Java 实现 import java.util.ArrayList; import java.util.List; import java.uti ...

  10. superset的安装（win10）踩踩坑！AWSL

    基本安装参考https://www.jianshu.com/p/8b27ff71429f 按此方案装的时候会遇到各种flask版本不兼容的问题,所以 第一步:装好anaconda 第二部:保证好高于V ...