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

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

https://www.bilibili.com/video/av28871057/

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

生产条形图

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

引入jquery和echarts


    <!-- 引入jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 引入 echarts.js -->
    <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

稍微啰嗦点儿说一下内容

<div id="main" style="width: 600px;height:400px;"></div>

这就是画图的容器

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

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

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

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

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

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

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

循环更新数据让图动起来

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

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

完成