版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89839588
效果图
源代码
var indices = { name: 0, group: 1, id: 16 }; var schema = [ {name: 'name', index: 0}, {name: 'group', index: 1}, {name: 'protein', index: 2}, {name: 'calcium', index: 3}, {name: 'sodium', index: 4}, {name: 'fiber', index: 5}, {name: 'vitaminc', index: 6}, {name: 'potassium', index: 7}, {name: 'carbohydrate', index: 8}, {name: 'sugars', index: 9}, {name: 'fat', index: 10}, {name: 'water', index: 11}, {name: 'calories', index: 12}, {name: 'saturated', index: 13}, {name: 'monounsat', index: 14}, {name: 'polyunsat', index: 15}, {name: 'id', index: 16} ]; var fieldIndices = schema.reduce(function (obj, item) { obj[item.name] = item.index; return obj; }, {}); var groupCategories = []; var groupColors = []; var data; // zlevel 为 1 的层开启尾迹特效 myChart.getZr().configLayer(1, { motionBlur: 0.5 }) $.get('./data/asset/data/nutrients.json', function (originData) { data = normalizeData(originData).slice(0, 1000); myChart.setOption(option = getOption(data)); }); function normalizeData(originData) { var groupMap = {}; originData.forEach(function (row) { var groupName = row[indices.group]; if (!groupMap.hasOwnProperty(groupName)) { groupMap[groupName] = 1; } }); originData.forEach(function (row) { row.forEach(function (item, index) { if (index !== indices.name && index !== indices.group && index !== indices.id ) { // Convert null to zero, as all of them under unit "g". row[index] = parseFloat(item) || 0; } }); }); for (var groupName in groupMap) { if (groupMap.hasOwnProperty(groupName)) { groupCategories.push(groupName); } } var hStep = Math.round(300 / (groupCategories.length - 1)); for (var i = 0; i < groupCategories.length; i++) { groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i)); } return originData; } function getOption(data) { return { backgroundColor: '#2c343c', tooltip: { padding: 10, backgroundColor: '#222', borderColor: '#777', borderWidth: 1 }, xAxis: { name: 'protein', splitLine: {show: false}, axisLine: { lineStyle: { color: '#fff' } }, axisLabel: { textStyle: { color: '#fff' } }, axisTick: { lineStyle: { color: '#fff' } } }, yAxis: { name: 'calcium', splitLine: {show: false}, axisLine: { lineStyle: { color: '#fff' } }, axisLabel: { textStyle: { color: '#fff' } }, axisTick: { lineStyle: { color: '#fff' } } }, visualMap: [{ show: false, type: 'piecewise', categories: groupCategories, dimension: 2, inRange: { color: groupColors //['#d94e5d','#eac736','#50a3ba'] }, outOfRange: { color: ['#ccc'] //['#d94e5d','#eac736','#50a3ba'] }, top: 20, textStyle: { color: '#fff' }, realtime: false }, { show: false, dimension: 3, max: 1000, inRange: { colorLightness: [0.15, 0.6] } }], series: [ { zlevel: 1, name: 'nutrients', type: 'scatter', data: data.map(function (item, idx) { return [item[2], item[3], item[1], idx]; }), animationThreshold: 5000, progressiveThreshold: 5000 } ], animationEasingUpdate: 'cubicInOut', animationDurationUpdate: 2000 }; } var fieldNames = schema.map(function (item) { return item.name; }).slice(2); app.config = { xAxis: 'protein', yAxis: 'calcium', onChange: function () { if (data) { myChart.setOption({ xAxis: { name: app.config.xAxis }, yAxis: { name: app.config.yAxis }, series: { data: data.map(function (item, idx) { return [ item[fieldIndices[app.config.xAxis]], item[fieldIndices[app.config.yAxis]], item[1], idx ]; }) } }); } } }; app.configParameters = { xAxis: { options: fieldNames }, yAxis: { options: fieldNames } }; 文章来源: https://blog.csdn.net/qq_20042935/article/details/89839588