| <!DOCTYPE html> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| |
| <!-- |
| This data and the design of this chart is copied from: |
| http://bl.ocks.org/syntagmatic/3150059 |
| --> |
| |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <link rel="stylesheet" href="lib/reset.css"> |
| </head> |
| <body> |
| <style> |
| body { |
| background: #333; |
| } |
| #main { |
| height: 1000px; |
| } |
| </style> |
| <div id="main"></div> |
| <script> |
| |
| var echarts; |
| var colorTool; |
| var chart; |
| var myChart; |
| var groupCategories = []; |
| var groupColors = []; |
| |
| require([ |
| 'echarts' |
| // 'zrender/tool/color', |
| // 'echarts/chart/parallel', |
| // 'echarts/component/legend', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/toolbox', |
| // 'echarts/component/visualMap' |
| ], function (ec) { |
| |
| $.getJSON('./data/nutrients.json', function (data) { |
| echarts = ec; |
| colorTool = echarts.color; |
| |
| normalizeData(data); |
| |
| chart = myChart = echarts.init(document.getElementById('main')); |
| |
| console.time('render'); |
| chart.setOption(getOption(data)); |
| console.timeEnd('render'); |
| |
| chart.on('axisAreaSelected', function (event) { |
| // var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active'); |
| // console.log('北京: ', indices); |
| }); |
| |
| }); |
| |
| 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} |
| ]; |
| |
| function normalizeData(originData) { |
| var groupMap = {}; |
| originData.forEach(row => { |
| var groupName = row[indices.group]; |
| if (!groupMap.hasOwnProperty(groupName)) { |
| groupMap[groupName] = 1; |
| } |
| }); |
| |
| originData.forEach(row => { |
| row.forEach((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(colorTool.modifyHSL('#5A94DF', hStep * i)); |
| } |
| } |
| |
| function getOption(data) { |
| |
| var lineStyle = { |
| normal: { |
| width: 0.5, |
| opacity: 0.05 |
| // shadowBlur: 10, |
| // shadowOffsetX: 0, |
| // shadowOffsetY: 0, |
| // shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| }; |
| |
| return { |
| backgroundColor: '#333', |
| tooltip: { |
| padding: 10, |
| backgroundColor: '#222', |
| borderColor: '#777', |
| borderWidth: 1, |
| formatter: function (obj) { |
| var value = obj[0].value; |
| return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' |
| + schema[1].name + '：' + value[1] + '<br>' |
| + schema[2].name + '：' + value[2] + '<br>' |
| + schema[3].name + '：' + value[3] + '<br>' |
| + schema[4].name + '：' + value[4] + '<br>' |
| + schema[5].name + '：' + value[5] + '<br>' |
| + schema[6].name + '：' + value[6] + '<br>'; |
| } |
| }, |
| title: [ |
| { |
| text: 'Groups', |
| top: 0, |
| left: 0, |
| textStyle: { |
| color: '#fff' |
| } |
| } |
| ], |
| visualMap: { |
| show: true, |
| type: 'piecewise', |
| categories: groupCategories, |
| dimension: indices.group, |
| inRange: { |
| color: groupColors //['#d94e5d','#eac736','#50a3ba'] |
| }, |
| outOfRange: { |
| color: ['#ccc'] //['#d94e5d','#eac736','#50a3ba'] |
| }, |
| top: 20, |
| textStyle: { |
| color: '#fff' |
| }, |
| realtime: false |
| }, |
| parallelAxis: [ |
| {dim: 16, name: schema[16].name, scale: true, nameLocation: 'end'}, |
| {dim: 2, name: schema[2].name, nameLocation: 'end'}, |
| {dim: 4, name: schema[4].name, nameLocation: 'end'}, |
| {dim: 3, name: schema[3].name, nameLocation: 'end'}, |
| {dim: 5, name: schema[5].name, nameLocation: 'end'}, |
| {dim: 6, name: schema[6].name, nameLocation: 'end'}, |
| {dim: 7, name: schema[7].name, nameLocation: 'end'}, |
| {dim: 8, name: schema[8].name, nameLocation: 'end'}, |
| {dim: 9, name: schema[9].name, nameLocation: 'end'}, |
| {dim: 10, name: schema[10].name, nameLocation: 'end'}, |
| {dim: 11, name: schema[11].name, nameLocation: 'end'}, |
| {dim: 12, name: schema[12].name, nameLocation: 'end'}, |
| {dim: 13, name: schema[13].name, nameLocation: 'end'}, |
| {dim: 14, name: schema[14].name, nameLocation: 'end'}, |
| {dim: 15, name: schema[15].name, nameLocation: 'end'} |
| ], |
| parallel: { |
| left: 280, |
| top: 20, |
| // top: 150, |
| // height: 300, |
| width: 400, |
| layout: 'vertical', |
| parallelAxisDefault: { |
| type: 'value', |
| name: 'nutrients', |
| nameLocation: 'end', |
| nameGap: 20, |
| nameTextStyle: { |
| color: '#fff', |
| fontSize: 14 |
| }, |
| axisLine: { |
| lineStyle: { |
| color: '#aaa' |
| } |
| }, |
| axisTick: { |
| lineStyle: { |
| color: '#777' |
| } |
| }, |
| splitLine: { |
| show: false |
| }, |
| axisLabel: { |
| textStyle: { |
| color: '#fff' |
| } |
| }, |
| realtime: false |
| } |
| }, |
| animation: false, |
| series: [ |
| { |
| name: 'nutrients', |
| type: 'parallel', |
| lineStyle: lineStyle, |
| inactiveOpacity: 0, |
| activeOpacity: 0.01, |
| progressive: 500, |
| smooth: true, |
| data: data |
| } |
| ] |
| }; |
| } |
| |
| }); |
| |
| </script> |
| </body> |
| </html> |
