js使⽤sort将JSON数据进⾏排序在把数据通过Echarts展⽰成统计图模式时,柱状统计图需要将数据进⾏从⼤到⼩来排序!
下⾯为所需要的数据:
1 {
2 mapData: [
3 {name: '北京',value: '555'},
4 {name: '天津',value: '1000'},
5 {name: '上海',value: '100'},
6 {name: '重庆',value: '100'},
7 {name: '河北',value: '600'},
8 {name: '河南',value: '400'},
9 {name: '云南',value: '350'},
10 {name: '辽宁',value: '70'},
11 {name: '⿊龙江',value: '750'},
12 {name: '湖南',value: '10'},
13 {name: '安徽',value: '300'},
14 {name: '⼭东',value: '10'},
15 {name: '新疆',value: '400'},
16 {name: '江苏',value: '80'},
17 {name: '浙江',value: '160'},
18 {name: '江西',value: '150'},sort函数 js
19 {name: '湖北',value: '650'},
20 {name: '⼴西',value: '200'},
21 {name: '⽢肃',value: '180'},
22 {name: '⼭西',value: '666'},
23 {name: '内蒙古',value: '120'},
24 {name: '陕西',value: '222'},
25 {name: '吉林',value: '520'},
26 {name: '福建',value: '220'},
27 {name: '贵州',value: '900'},
28 {name: '⼴东',value: '500'},
29 {name: '青海',value: '500'},
30 {name: '西藏',value: '800'},
31 {name: '四川',value: '700'},
32 {name: '宁夏',value: '10'},
33 {name: '海南',value: '590'},
34 {name: '台湾',value: '780'},
35 {name: '⾹港',value: '850'},
36 {name: '澳门',value: '999'},
37 {name: '南海诸岛',value: '700'}
38 ]
39 }
现在需要通过每条数据的value来进⾏排序,
这边使⽤的是 sort()
1function sortId(a, b) {
2return a.value-b.value
3 }
4 mapData.sort(sortId);
完整代码:
data() {
return {
mapData: [
{name: '北京',value: '555'},
{name: '天津',value: '1000'},
{name: '上海',value: '100'},
{name: '重庆',value: '100'},
{name: '河北',value: '600'},
{name: '河南',value: '400'},
{name: '云南',value: '350'},
{name: '辽宁',value: '70'},
{name: '⿊龙江',value: '750'},
{name: '湖南',value: '10'},
{name: '安徽',value: '300'},
{name: '⼭东',value: '10'},
{name: '新疆',value: '400'},
{name: '江苏',value: '80'},
{name: '浙江',value: '160'},
{name: '⼴西',value: '200'},
{name: '⽢肃',value: '180'},
{name: '⼭西',value: '666'},
.......
]
}
},
methods: {
sortId(a, b) {
return a.value-b.value
},
drawLine (data){
// 基于准备好的dom,初始化echarts实例
let myChartChina = this.$echarts.init( ElementById('fzyChartChina')) let mapName = [];
this.mapData.sort(this.sortId);
//后⾯的代码与排序⽆关
}
控制台可打印出排序后的结果查看
最后页⾯的效果。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论