| 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(ROOT_PATH + '/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: { |
| color: '#fff' |
| }, |
| axisTick: { |
| lineStyle: { |
| color: '#fff' |
| } |
| } |
| }, |
| yAxis: { |
| name: 'calcium', |
| splitLine: {show: false}, |
| axisLine: { |
| lineStyle: { |
| color: '#fff' |
| } |
| }, |
| axisLabel: { |
| 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 |
| } |
| }; |