Echarts数据series组件中数组直接进行排序

简介: Echarts数据series组件中数组直接进行排序

Echarts中,为了将数据有序的排列,一种方式是在后端数据处理后,直接输出予以调用,增加了后端服务器的负荷和代码开发;二是直接在echarts组件中直接使用js的.sort函数进行排序。

原始代码:

 data: [
                {value: 335, name: '家电'},
                {value: 310, name: '服装'},
                {value: 274, name: '食品'},
                {value: 235, name: '数码'},
                {value: 400, name: '家纺'}
            ],

排序数据代码:.sort(function (a, b) { return a.value - b.value; })

 data: [
                {value: 335, name: '家电'},
                {value: 310, name: '服装'},
                {value: 274, name: '食品'},
                {value: 235, name: '数码'},
                {value: 400, name: '家纺'}
            ].sort(function (a, b) { return a.value - b.value; }),


Done!

相关文章
|
6天前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
68 0
|
6天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
70 0
|
6天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
71 2
|
6天前
【echarts报错】line series not exists,should be same with series name or data name
【echarts报错】line series not exists,should be same with series name or data name
|
6天前
|
新零售 分布式计算 数据可视化
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
|
6天前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
177 2
react+datav+echarts实现可视化数据大屏
|
6天前
|
前端开发 JavaScript
React中封装echarts图表组件以及自适应窗口变化
React中封装echarts图表组件以及自适应窗口变化
75 1
|
6天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
33 0
|
6天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0