| <!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. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/facePrint.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <script src="tooltipTestHelper.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| .test-title { | |
| background: #fff; | |
| } | |
| .test-chart { | |
| margin: 0 auto; | |
| } | |
| .custoized-tooltip-class { | |
| background-color: cyan!important; | |
| text-shadow: 0 0 5px red; | |
| } | |
| .custoized-tooltip-class::after { | |
| content: 'pseudo after'; | |
| display: inline-block; | |
| position: absolute; | |
| left: 110%; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| </style> | |
| <div id="main0"></div> | |
| <div id="main1"></div> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var base = +new Date(2016, 9, 3); | |
| var oneDay = 24 * 3600 * 1000; | |
| var valueBase = Math.random() * 300; | |
| var valueBase2 = Math.random() * 50; | |
| var data = []; | |
| var data2 = []; | |
| for (var i = 1; i < 10; i++) { | |
| var now = new Date(base += oneDay); | |
| var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'); | |
| valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase); | |
| valueBase <= 0 && (valueBase = Math.random() * 300); | |
| data.push([dayStr, valueBase]); | |
| valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2); | |
| valueBase2 <= 0 && (valueBase2 = Math.random() * 50); | |
| data2.push([dayStr, valueBase2]); | |
| } | |
| option = { | |
| animation: false, | |
| title: { | |
| left: 'center', | |
| text: '触屏 tooltip 和 dataZoom 示例', | |
| subtext: '"tootip" and "dataZoom" on mobile device', | |
| }, | |
| legend: { | |
| top: 'bottom', | |
| data: ['意向'] | |
| }, | |
| tooltip: { | |
| alwaysShowContent: true, | |
| triggerOn: 'none', | |
| position: function (pt) { | |
| return [pt[0], 130]; | |
| } | |
| }, | |
| toolbox: { | |
| left: 'center', | |
| itemSize: 25, | |
| top: 55, | |
| feature: { | |
| dataZoom: { | |
| yAxisIndex: 'none' | |
| }, | |
| restore: {} | |
| } | |
| }, | |
| xAxis: { | |
| type: 'time', | |
| // boundaryGap: [0, 0], | |
| axisPointer: { | |
| value: '2016-10-7', | |
| snap: true, | |
| lineStyle: { | |
| color: '#004E52', | |
| opacity: 0.5, | |
| width: 2 | |
| }, | |
| label: { | |
| show: true, | |
| formatter: function (params) { | |
| return echarts.format.formatTime('yyyy-MM-dd', params.value); | |
| }, | |
| backgroundColor: '#004E52' | |
| }, | |
| handle: { | |
| show: true, | |
| color: '#004E52' | |
| } | |
| }, | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| axisTick: { | |
| inside: true | |
| }, | |
| splitLine: { | |
| show: false | |
| }, | |
| axisLabel: { | |
| inside: true, | |
| formatter: '{value}\n' | |
| }, | |
| z: 10 | |
| }, | |
| grid: { | |
| top: 110, | |
| left: 15, | |
| right: 15, | |
| height: 160 | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| throttle: 50 | |
| }], | |
| series: [{ | |
| name: '模拟数据', | |
| type: 'line', | |
| smooth: true, | |
| symbol: 'circle', | |
| symbolSize: 5, | |
| sampling: 'average', | |
| itemStyle: { | |
| color: '#8ec6ad' | |
| }, | |
| stack: 'a', | |
| areaStyle: { | |
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
| offset: 0, | |
| color: '#8ec6ad' | |
| }, { | |
| offset: 1, | |
| color: '#ffe' | |
| }]) | |
| }, | |
| data: data | |
| }, | |
| { | |
| name: '模拟数据', | |
| type: 'line', | |
| smooth: true, | |
| stack: 'a', | |
| symbol: 'circle', | |
| symbolSize: 5, | |
| sampling: 'average', | |
| itemStyle: { | |
| color: '#d68262' | |
| }, | |
| areaStyle: { | |
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
| offset: 0, | |
| color: '#d68262' | |
| }, { | |
| offset: 1, | |
| color: '#ffe' | |
| }]) | |
| }, | |
| data: data2 | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main0', { | |
| option: option, | |
| buttons: [ | |
| { | |
| text: 'add class', | |
| onclick: function () { | |
| chart.setOption({ | |
| tooltip: { | |
| className: 'custoized-tooltip-class' | |
| } | |
| }) | |
| } | |
| }, | |
| { | |
| text: 'recovery class', | |
| onclick: function () { | |
| chart.setOption({ | |
| tooltip: { | |
| className: '' | |
| } | |
| }) | |
| } | |
| } | |
| ] | |
| }); | |
| chart.setOption(option, true); | |
| window.addEventListener('resize', function () { | |
| chart.resize(); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var base = +new Date(2016, 9, 3); | |
| var oneDay = 24 * 3600 * 1000; | |
| var valueBase = Math.random() * 300; | |
| var valueBase2 = Math.random() * 50; | |
| var data = []; | |
| var data2 = []; | |
| for (var i = 1; i < 10; i++) { | |
| var now = new Date(base += oneDay); | |
| var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'); | |
| valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase); | |
| valueBase <= 0 && (valueBase = Math.random() * 300); | |
| data.push([dayStr, valueBase]); | |
| valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2); | |
| valueBase2 <= 0 && (valueBase2 = Math.random() * 50); | |
| data2.push([dayStr, valueBase2]); | |
| } | |
| option = { | |
| animation: false, | |
| title: { | |
| left: 'center', | |
| text: '触屏 tooltip 和 dataZoom 示例', | |
| subtext: '"tootip" and "dataZoom" on mobile device', | |
| }, | |
| legend: { | |
| top: 'bottom', | |
| data: ['意向'] | |
| }, | |
| tooltip: { | |
| alwaysShowContent: true, | |
| renderMode: 'richText', | |
| triggerOn: 'none', | |
| position: function (pt) { | |
| return [pt[0], 130]; | |
| } | |
| }, | |
| toolbox: { | |
| left: 'center', | |
| itemSize: 25, | |
| top: 55, | |
| feature: { | |
| dataZoom: { | |
| yAxisIndex: 'none' | |
| }, | |
| restore: {} | |
| } | |
| }, | |
| xAxis: { | |
| type: 'time', | |
| // boundaryGap: [0, 0], | |
| axisPointer: { | |
| value: '2016-10-7', | |
| snap: true, | |
| lineStyle: { | |
| color: '#004E52', | |
| opacity: 0.5, | |
| width: 2 | |
| }, | |
| label: { | |
| show: true, | |
| formatter: function (params) { | |
| return echarts.format.formatTime('yyyy-MM-dd', params.value); | |
| }, | |
| backgroundColor: '#004E52' | |
| }, | |
| handle: { | |
| show: true, | |
| color: '#004E52' | |
| } | |
| }, | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| axisTick: { | |
| inside: true | |
| }, | |
| splitLine: { | |
| show: false | |
| }, | |
| axisLabel: { | |
| inside: true, | |
| formatter: '{value}\n' | |
| }, | |
| z: 10 | |
| }, | |
| grid: { | |
| top: 110, | |
| left: 15, | |
| right: 15, | |
| height: 160 | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| throttle: 50 | |
| }], | |
| series: [{ | |
| name: '模拟数据', | |
| type: 'line', | |
| smooth: true, | |
| symbol: 'circle', | |
| symbolSize: 5, | |
| sampling: 'average', | |
| itemStyle: { | |
| color: '#8ec6ad' | |
| }, | |
| stack: 'a', | |
| areaStyle: { | |
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
| offset: 0, | |
| color: '#8ec6ad' | |
| }, { | |
| offset: 1, | |
| color: '#ffe' | |
| }]) | |
| }, | |
| data: data | |
| }, | |
| { | |
| name: '模拟数据', | |
| type: 'line', | |
| smooth: true, | |
| stack: 'a', | |
| symbol: 'circle', | |
| symbolSize: 5, | |
| sampling: 'average', | |
| itemStyle: { | |
| color: '#d68262' | |
| }, | |
| areaStyle: { | |
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
| offset: 0, | |
| color: '#d68262' | |
| }, { | |
| offset: 1, | |
| color: '#ffe' | |
| }]) | |
| }, | |
| data: data2 | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| option: option | |
| }); | |
| chart.setOption(option, true); | |
| window.addEventListener('resize', function () { | |
| chart.resize(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |