用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进去

 

完成

 

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

https://github.com/cowcomic/echarts_example

 

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

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

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

阅读更多
版权声明:转载请注明原链接 https://blog.csdn.net/cowcomic/article/details/81592875
个人分类: echarts js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭