| <!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> |
