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

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

    转载一个详细可用的ubuntu16.04+cuda9.0+cudnn7.1教程. 0 - 参考材料 https://blog.csdn.net/Umi_you/article/details/8026 ...

  2. sql日期比较

    sql 中 datetime日期类型字段比较 mysql 可以直接用大于号,也可以用  between  and SELECT * FROM staff WHERE UPDATE_DATE >= ...

  3. 怎样加入社区项目Karbor的Review?

    Review是社区衡量一个贡献者的重要标准. Review步骤: 1.登录Karbor Review地址: https://review.openstack.org/#/q/Karbor 这里可以看到 ...

  4. 123457123456#0#-----com.threeapp.SuanShuXiaoTianCai01----数学算术小天才

    com.threeapp.SuanShuXiaoTianCai01----数学算术小天才

  5. lombok编译时注解@Slf4j的使用及相关依赖包

    slf4j是一个日志门面模式的框架,只对调用者开放少量接口用于记录日志 主要接口方法有 debug warn info error trace 在idea中可以引入lombok框架,使用@Slf4j注 ...

  6. lumen response全局函数设置header

    设置header Cache-Controlreturn response()->json($return)->header('Cache-Control', 'public');

  7. LODOP设置同一个任务发送到不同打印机

    前面的博文Lodop打印语句最基本结构介绍(什么是一个任务),一个任务只能有一个打印语句(最后PRINT,PRINTA,PREVIEW等),如果执行多个,LODOP会弹出多次,C-LODOP会提示窗口 ...

  8. 完全解读 margin 标签

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  9. 最新 花椒直播java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.花椒直播等10家互联网公司的校招Offer,因为某些自身原因最终选择了花椒直播.6.7月主要是做系统复习.项目复盘.Leet ...

  10. UIPath工具取得某个路径下的文件夹的名称

    UIPath工具取得某个路径下的文件夹的名称 处理的流程如下图 [Edit Code]按钮押下之后写入代码如下 Dim dir As New DirectoryInfo("C:\Users\ ...