' + dataName + '
' + valuesHTML.join('
') + '

'); }); html.length && resultHTML.push( '

' + '

点 ON ' + dimDefine[1] + '

' + html.join('') + '

' ); }); return resultHTML.join(''); } function getOption(data) { console.log('getOption'); var gridWidth = '35%'; var gridHeight = '35%'; var gridLeft = 80; var gridRight = 50; var gridTop = 50; var gridBottom = 80; return { backgroundColor: '#2c343c', tooltip: { trigger: 'none', padding: [10, 20, 10, 20], backgroundColor: 'rgba(44,52,60,0.7)', borderColor: '#ccc', borderWidth: 2, borderRadius: 4, transitionDuration: 0, extraCssText: 'width: 300px; white-space: normal', textStyle: { fontSize: 12 }, position: function (pos, params, el, elRect, size) { var obj = {}; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60; obj[['top', 'bottom'][+(pos[1] < size.viewSize[1] / 2)]] = 20; return obj; }, formatter: tooltipFormatter }, axisPointer: { show: true, snap: true, lineStyle: { type: 'dashed' }, label: { show: true, margin: 6, backgroundColor: '#556', textStyle: { color: '#fff' } }, link: [{ xAxisId: ['xAxisLeft_a-yAxisTop_b', 'xAxisLeft_a-yAxisBottomj'] }, { xAxisId: ['xAxisRight_9-yAxisTop_b', 'xAxisRight_9-yAxisBottomj'] }, { yAxisId: ['xAxisLeft_a-yAxisTop_b', 'xAxisRight_9-yAxisTop_b'] }, { yAxisId: ['xAxisLeft_a-yAxisBottomj', 'xAxisRight_9-yAxisBottomj'] }] }, xAxis: [ makeAxis(0, 'xAxisLeft_a-yAxisTop_b', '糖类', 'middle'), makeAxis(0, 'xAxisLeft_a-yAxisBottomj', '糖类', 'middle'), makeAxis(0, 'xAxisRight_9-yAxisTop_b', '钾', 'middle'), makeAxis(0, 'xAxisRight_9-yAxisBottomj', '钾', 'middle') ], yAxis: [ makeAxis(1, 'xAxisLeft_a-yAxisTop_b', '钙', 'end'), makeAxis(1, 'xAxisLeft_a-yAxisBottomj', '纤维', 'end'), makeAxis(1, 'xAxisRight_9-yAxisTop_b', '钙', 'end'), makeAxis(1, 'xAxisRight_9-yAxisBottomj', '纤维', 'end') ], grid: [{ id: 'xAxisLeft_a-yAxisTop_b', left: gridLeft, top: gridTop, width: gridWidth, height: gridHeight }, { id: 'xAxisLeft_a-yAxisBottomj', left: gridLeft, bottom: gridBottom, width: gridWidth, height: gridHeight }, { id: 'xAxisRight_9-yAxisTop_b', right: gridRight, top: gridTop, width: gridWidth, height: gridHeight }, { id: 'xAxisRight_9-yAxisBottomj', right: gridRight, bottom: gridBottom, width: gridWidth, height: gridHeight }], dataZoom: [ makeDataZoom({ width: gridWidth, height: 20, left: gridLeft, bottom: 10, xAxisIndex: [0, 1] }), makeDataZoom({ width: gridWidth, height: 20, right: gridRight, bottom: 10, xAxisIndex: [2, 3] }), makeDataZoom({ orient: 'vertical', width: 20, height: gridHeight, left: 10, top: gridTop, yAxisIndex: [0, 2] }), makeDataZoom({ orient: 'vertical', width: 20, height: gridHeight, left: 10, bottom: gridBottom, yAxisIndex: [1, 3] }) ], 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 }], series: [ makeSeries('xAxisLeft_a', 'yAxisTop_b'), makeSeries('xAxisLeft_a', 'yAxisBottomj'), makeSeries('xAxisRight_9', 'yAxisTop_b'), makeSeries('xAxisRight_9', 'yAxisBottomj') ], animationEasingUpdate: 'cubicInOut', animationDurationUpdate: 2000 }; } var fieldNames = schema.map(function (item) { return item.name; }).slice(2); app.config = { xAxisLeft_a: '碳水化合物', yAxisTop_b: '钙', xAxisRight_9: '钾', yAxisBottomj: '纤维', onChange: function () { console.log('onChange'); if (data) { colorBySchema[app.config.xAxisLeft_a] = axisColors.xAxisLeft_a; colorBySchema[app.config.xAxisRight_9] = axisColors.xAxisRight_9; colorBySchema[app.config.yAxisTop_b] = axisColors.yAxisTop_b; colorBySchema[app.config.yAxisBottomj] = axisColors.yAxisBottomj; myChart.setOption({ xAxis: [{ name: app.config.xAxisLeft_a }, { name: app.config.xAxisLeft_a }, { name: app.config.xAxisRight_9 }, { name: app.config.xAxisRight_9 }], yAxis: [{ name: app.config.yAxisTop_b }, { name: app.config.yAxisBottomj }, { name: app.config.yAxisTop_b }, { name: app.config.yAxisBottomj }], series: [{ data: makeSeriesData('xAxisLeft_a', 'yAxisTop_b') }, { data: makeSeriesData('xAxisLeft_a', 'yAxisBottomj') }, { data: makeSeriesData('xAxisRight_9', 'yAxisTop_b') }, { data: makeSeriesData('xAxisRight_9', 'yAxisBottomj') }] }); } } }; //选择菜单内容 app.configParameters = { xAxisLeft_a: { options: fieldNames }, xAxisRight_9: { options: fieldNames }, yAxisTop_b: { options: fieldNames }, yAxisBottomj: { options: fieldNames } }; //alert(1); $.get('http://dw.otoc.cn/nutrients.json', function (originData) { console.log('$.get') data = normalizeData(originData).slice(0, 1000); myChart.setOption(option = getOption(data)); });

dat.gui库交互如何不刷新绑定