# DynamicBarByEcharts

**Repository Path**: Followfire/DynamicBarByEcharts

## Basic Information

- **Project Name**: DynamicBarByEcharts
- **Description**: 由Echarts构建动态柱形图，可用于动态显示历史数据和实时显示排行数据。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-08-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DynamicBarByEcharts
由Echarts构建动态柱形图，可用于动态显示历史数据和实时显示排行榜。

Echarts官网：[http://echarts.baidu.com/index.html](http://echarts.baidu.com/index.html)


### 说明

- **src目录是最新版本源码**
- 旧版本目录是最开始的DEMO,仅供参考。
- 实现效果预览：[http://demo.resetday.top/play/mp4.html](http://demo.resetday.top/play/mp4.html)
- Echarts支持富文本标签，自定义性强。



### 实现效果

【浏览器按F11全屏观看效果最佳】

（推荐使用谷歌浏览器，其他浏览器可能出现一些问题）

最终效果（页面视频）：[http://demo.resetday.top/play/mp4.html](http://demo.resetday.top/play/mp4.html)




1. 渲染方式1：

	- 静态页面：[http://demo.resetday.top/option1/static.html](http://demo.resetday.top/option1/static.html)



	- 历史动态：[http://demo.resetday.top/option1/dynamic.html](http://demo.resetday.top/option1/dynamic.html)



1. 渲染方式2：



	- 历史动态：[http://demo.resetday.top/option2/online.html](http://demo.resetday.top/option2/online.html)



	- 实时排行：[http://demo.resetday.top/bilibili/online.html](http://demo.resetday.top/bilibili/online.html)





### 数据输入格式：

详情可参考Echarts官方文档使用dataset管理数据：[http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE](http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE)


采用数据到图形的映射（encode）方式


官方简单示例：

 	var option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    xAxis: {},
    yAxis: {type: 'category'},
    series: [
        {
            type: 'bar',
            encode: {
                // 将 "amount" 列映射到 X 轴。
                x: 'amount',
                // 将 "product" 列映射到 Y 轴。
                y: 'product'
            }
        }
    ]
	};

效果如下：

![](https://i.imgur.com/eklsbUy.png)



本例程输入格式为JSON数组，详情看js目录下的json_data.js：

这是一组示例数据格式

    [

    {
        "date":"2018-08-13 17:23:31",
        "x_value":465647,
        "title":"LPL夏季赛 OMG vs EDG /  FPX vs WE ",
        "y_name":"bilibili英雄联盟赛事"
    },
    {
        "date":"2018-08-13 17:23:31",
        "x_value":406309,
        "title":"双人现开赛疯狂实验篇-C组（直播）",
        "y_name":"暴雪游戏频道"
    },
    {
        "date":"2018-08-13 17:23:31",
        "x_value":218185,
        "title":"【滚】今天周一 打怪兽",
        "y_name":"两仪滚"
    }

	]

然后循环输入即可。

**注意：本例程没有进行数据排序，需要自己对每一组数据排序之后再传入。**



### 搭建简单Python后端
安装bottle框架,这是个轻量级的web框架，我们只需要为ajax提供一个接口。只要@route('/readRank')这句话就够了，然后进行数据处理、排序，返回json格式数据即可。

安装：pip install bottle
运行PythonWeb.py程序，注释掉main.js中setInterval方法加载json_data.js数据语句，启用Push()方法即可，按照实际修改定时时间。

python后端程序运行成功实例

![](https://i.imgur.com/BDqAxhj.png)


### 教程

[5 分钟上手 ECharts](http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)


### 版本更新

1. 2018-8-14：原型demo,交互数据格式是json格式。可把数据转化成js变量，以数组的形式存储，或者由ajax请求后端数据，定时请求，每次返回排行数据（若干条）。
2. 2018-8-18：增加渐变颜色样式，更新Python后端程序。




### 旧版本说明

- option1是异步加载方式渲染，先初始化基本数据，再异步传入数据。
- option2是全部重新渲染，每次都是传入整个option。

对比：

- 没发现有什么显著变化，可能数据量比较小。
- option1暂时不能动态改变标注的名字（即右边榜首名字）。
- option2可以动态改变所有数据。