实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts 5 transform 数据转换sort多维度排序 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option; option = { dataset: [ { dimensions: ['name', 'age', 'profession', 'score', 'date'], source: [ [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'], ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'], [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'], ['Li Lei', 37, 'Teacher', 219, '2011-02-18'], [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'], [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'], ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'], [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'], ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'] ] }, { transform: { type: 'sort', config: [ { dimension: 'profession', order: 'desc' }, { dimension: 'score', order: 'desc' } ] } } ], xAxis: { type: 'category', axisLabel: { interval: 0, rotate: 30 } }, yAxis: {}, series: { type: 'bar', label: { show: true, rotate: 90, position: 'insideBottom', align: 'left', verticalAlign: 'middle' }, itemStyle: { color: function (params) { return { Engineer: '#5470c6', Teacher: '#91cc75', Musician: '#fac858' }[params.data[2]]; } }, encode: { x: 'name', y: 'score', label: ['profession'] }, datasetIndex: 1 } }; option && myChart.setOption(option); </script> </body> </html>
运行结果: