源于
今天遇到一个需求,是这样:需要echart的图表在显示Tooltip的时候对数据进行排序,说干就干.另外一个问题是,项目是用的AngularJS,瞬间想起,我以前也搞过一段时间的AngularJS,无奈当时无用武之地,就此荒废了.于是去找文档补习了下AngularJS.
就搞定了这个需求.
源码
完整源码,效果可以自己运行
如果需要将AngularJS换成jQuery,只需要将formatterTooltip函数中的代码替换成jQuery语法即可.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Echarts中Tooltip排序</title> <script src="https://cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script> <script src="https://cdn.bootcss.com/echarts/3.5.3/echarts.common.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div id="main" style="width: 600px;height:400px;"></div> <div id="main1" style="width:600px;height:400px;"></div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $filter) { // echarts显示Tooltip排序, // 使用angularjs进行排序操作. // 参考文档: // http://echarts.baidu.com/option.html#tooltip var formatterTooltip = function(params) { // 此处假设data.value是字符串 // 需要使用parseFloat将字符串转换成数字 // 再进行排序. params = $filter('orderBy')(params, function(data) { return parseFloat(data.value); }, false); var html = ""; var dataName = ""; angular.forEach(params, function(data) { if (data.value == '0') { data.value = '0.0'; } if (!dataName) { dataName = data.name; } html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + data.color + '"></span>' + data.seriesName + ':' + data.value + '<br/>'; }); html = dataName + '<br/>' + html; return html; }; var myChart1 = echarts.init(document.getElementById("main1")); var option1 = { tooltip: { trigger: 'axis', formatter: formatterTooltip }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ name: '邮件营销', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart1.setOption(option1); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter: formatterTooltip }, legend: { data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }], yAxis: [{ type: 'value' }], series: [{ name: '直接访问', type: 'bar', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '邮件营销', type: 'bar', stack: '广告', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'bar', stack: '广告', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'bar', stack: '广告', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '搜索引擎', type: 'bar', data: [862, 1018, 964, 1026, 1679, 1600, 1570], markLine: { lineStyle: { normal: { type: 'dashed' } }, data: [ [{ type: 'min' }, { type: 'max' }] ] } }, { name: '百度', type: 'bar', barWidth: 5, stack: '搜索引擎', data: [620, 732, 701, 734, 1090, 1130, 1120] }, { name: '谷歌', type: 'bar', stack: '搜索引擎', data: [120, 132, 101, 134, 290, 230, 220] }, { name: '必应', type: 'bar', stack: '搜索引擎', data: [60, 72, 71, 74, 190, 130, 110] }, { name: '其他', type: 'bar', stack: '搜索引擎', data: [62, 82, 91, 84, 109, 110, 120] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }); </script> </body> </html>