用Echarts制作动态条形图排行榜

你的名字 2022-05-17 12:56 395阅读 0赞

最近在做各种排行榜的视频，整体排行榜的页面图形效果都是用另外一个开源代码实现的，主体是js+svg。

[https://www.bilibili.com/video/av28871057/][https_www.bilibili.com_video_av28871057]

echarts作为封装很好的一套可视化库，不知道是否能做到相同的事情呢？

### 生产条形图 ###

最开始的准备还是挺简单的

引入jquery和echarts

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        
        <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.js"></script>

echarts官网教程上有一个简单的入门示例，就从这里入手吧

[http://echarts.baidu.com/tutorial.html\#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts][http_echarts.baidu.com_tutorial.html_5_20_E5_88_86_E9_92_9F_E4_B8_8A_E6_89_8B_20ECharts]

稍微啰嗦点儿说一下内容

这就是画图的容器

var myChart = echarts.init(document.getElementById('main'));

这里init图表对象的时候只要能通过各种方法找到这个容器就行

var option

就是设置各种属性

myChart.setOption(option);

这里才是正式绘图

这里直接拷贝下来存个网页文件，打开就能看到一个柱形图了

排行榜的话通常都是条形图

怎么变条形图呢

图形的配置是series中的type指定的

echarts里面条形图和柱形图都是bar

区分条形图和柱形图只是看你的分类是放在x轴还是y轴

原始代码里面是放在x轴的，所以看到的效果就是柱形图

xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {
    }

把x轴的内容拷贝到y轴，是不是就变条形图了

xAxis: {
    },
    yAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    }

另外一个细节就是顺序问题

配置里面的data是从衬衫到袜子，但是图形上的分类是袜子到衬衫，把整个排序倒过来了一下，不知道echarts为什么会这样设置，看起来很反常识

想要解决这个问题，就在轴的配置里面增加一个反向坐标轴的配置

inverse: true

这个配置默认是false

## 使用DateSet ##

[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]

Echarts提供了DataSet的形式来管理数据，可以让数据组织更灵活，同一份数据可以各种图表公用，你用这些字段，我用那些字段

比如我这里用的数据有六个字段

[
        {
            "id": "10163",
            "item": "MAC",
            "value": 55327,
            "rank": 3,
            "trend": "down",
            "occupy": "60.99"
        },
        {
            "id": "19492",
            "item": "REFA",
            "value": 24201,
            "rank": 7,
            "trend": "up",
            "occupy": "26.68"
        },
        {
            "id": "10252",
            "item": "RAY",
            "value": 23324,
            "rank": 8,
            "trend": "down",
            "occupy": "25.71"
        }
    ]

我这个条形图的dataset里面配置

dimensions: ['item', 'value']

任数据有多少字段，我只用这两个，第一个是分类，后面是值

再用source把上面整个数据集合提供就OK了

## 使用异步更新 ##

[http://echarts.baidu.com/tutorial.html\#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0][http_echarts.baidu.com_tutorial.html_E5_BC_82_E6_AD_A5_E6_95_B0_E6_8D_AE_E5_8A_A0_E8_BD_BD_E5_92_8C_E6_9B_B4_E6_96_B0]

上面的例子实际上数据是跟配置放在一起的，我们如果想让图进行更新，重新绘图肯定是个笨办法，echarts提供了异步更新的概念

说白了实际就是更新图的option

echarts的option在set的时候是部分更新的，更新时组织的option可以只写一部分内容，set的时候会在内部进行合并

所以我们只需要更新数据部分就可以了

myChart.setOption({
        dataset: {
            dimensions: ['item', 'value'],
            // allData是之前定义好的数据集合
            source: allData[count]
        }
    });

## 循环更新数据让图动起来 ##

使用setInterval来启动一个周期调用的效果

每次调用获取新的数据，组织一个只包含dataset的option然后给图形对象set进去

完成

相关源码和样例数据都在这里

[https://github.com/cowcomic/echarts\_example][https_github.com_cowcomic_echarts_example]

还有两个内容没进行尝试，等尝试成功再来简单说明说明

一个是不同的分类设置不同颜色，看接口应该是提供了这样的功能

第二个是现在这个数据更新的很僵硬，没有动态的效果，想增加上视频中那种动态效果，从接口上没找到相应的方法，也许是现在还不支持吧

[https_www.bilibili.com_video_av28871057]: https://www.bilibili.com/video/av28871057/
[http_echarts.baidu.com_tutorial.html_5_20_E5_88_86_E9_92_9F_E4_B8_8A_E6_89_8B_20ECharts]: http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
[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
[http_echarts.baidu.com_tutorial.html_E5_BC_82_E6_AD_A5_E6_95_B0_E6_8D_AE_E5_8A_A0_E8_BD_BD_E5_92_8C_E6_9B_B4_E6_96_B0]: http://echarts.baidu.com/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0
[https_github.com_cowcomic_echarts_example]: https://github.com/cowcomic/echarts_example