最近在做各种排行榜的视频,整体排行榜的页面图形效果都是用另外一个开源代码实现的,主体是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
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了
使用异步更新
上面的例子实际上数据是跟配置放在一起的,我们如果想让图进行更新,重新绘图肯定是个笨办法,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
还有两个内容没进行尝试,等尝试成功再来简单说明说明
一个是不同的分类设置不同颜色,看接口应该是提供了这样的功能
第二个是现在这个数据更新的很僵硬,没有动态的效果,想增加上视频中那种动态效果,从接口上没找到相应的方法,也许是现在还不支持吧