| <!-- | |
| 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"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| <script src="lib/testHelper.js"></script> | |
| <script src="tooltipTestHelper.js"></script> | |
| </head> | |
| <body> | |
| <style> | |
| h1 { | |
| line-height: 60px; | |
| height: 60px; | |
| background: #ddd; | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 14px; | |
| } | |
| .chart { | |
| height: 350px; | |
| } | |
| </style> | |
| <h1>category | axisPointer label should not show | legend tooltip | axis name tooltip on 1st grid</h1> | |
| <div class="chart" id="category"></div> | |
| <h1>global-axis-pointer-style | axisPointer label should not show</h1> | |
| <div class="chart" id="global-axis-pointer-style"></div> | |
| <h1>cross compatible | tooltip.trigger: 'item' | yAxis pointer precision 3 | crossStyle set | xAxisPointer label show</h1> | |
| <div class="chart" id="cross-item"></div> | |
| <h1>cross compatible | tooltip.trigger: 'axis' | xAxisPointer label not show</h1> | |
| <div class="chart" id="cross-axis"></div> | |
| <h1>tooltip.axisPointer.axis is 'y' | auto snap | auto animation when snap</h1> | |
| <div class="chart" id="tooltip.axisPointer.axis"></div> | |
| <h1>showDelay: 50 | enterable | dynamic callback</h1> | |
| <div class="chart" id="main"></div> | |
| <h1>set position</h1> | |
| <div class="chart" id="position"></div> | |
| <h1>confine</h1> | |
| <div class="chart" id="confine"></div> | |
| <h1>triggerOn click</h1> | |
| <div class="chart" id="click"></div> | |
| <h1>dispatchAciton manually with `position` specified (postion: [10,10])</h1> | |
| <div class="chart" id="positionSpecified"></div> | |
| <!--<h1>alwaysShowContent (check when hover on the last one, the content should not be the previous one)</h1>--> | |
| <!--<div class="chart" id="alwaysShowContent"></div>--> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| } | |
| }; | |
| var baseTop = 90; | |
| var height = 150; | |
| var gap = 50; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: { | |
| name: 'axisPointer: line\nno item trigger', | |
| tooltip: {show: true} | |
| }, | |
| xAxis: { | |
| tooltip: {show: true} | |
| } | |
| }); | |
| baseTop += height + gap; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: {name: 'axisPointer: shadow\nno item trigger'}, | |
| xAxis: { | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| } | |
| }); | |
| baseTop += height + gap; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: {name: 'trigger: item \n(only the 1st series item trigger)'}, | |
| xAxis: { | |
| axisPointer: {show: false} | |
| }, | |
| series: [ | |
| {tooltip: {trigger: 'item'}} | |
| ] | |
| }); | |
| baseTop += height + gap; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: {name: 'both axis and item trigger\n(the 1st series can item trigger)'}, | |
| xAxis: { | |
| axisPointer: {type: 'shadow'} | |
| }, | |
| series: [ | |
| {tooltip: {trigger: 'item'}} | |
| ] | |
| }); | |
| baseTop += height + gap; | |
| var dom = document.getElementById('category'); | |
| if (dom) { | |
| dom.style.height = baseTop + 'px'; | |
| var chart = echarts.init(dom); | |
| chart.setOption(option); | |
| } | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| axisPointer: { | |
| shadowStyle: { | |
| color: 'red' | |
| } | |
| } | |
| }; | |
| var baseTop = 90; | |
| var height = 150; | |
| var gap = 50; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: {name: 'should be red shadow'} | |
| }); | |
| baseTop += height + gap; | |
| var dom = document.getElementById('global-axis-pointer-style'); | |
| if (dom) { | |
| dom.style.height = baseTop + 'px'; | |
| var chart = echarts.init(dom); | |
| chart.setOption(option); | |
| } | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'cross' | |
| } | |
| } | |
| }; | |
| var baseTop = 90; | |
| var height = 150; | |
| var gap = 50; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height} | |
| }); | |
| baseTop += height + gap; | |
| var dom = document.getElementById('cross-axis'); | |
| if (dom) { | |
| dom.style.height = baseTop + 'px'; | |
| var chart = echarts.init(dom); | |
| chart.setOption(option); | |
| } | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| trigger: 'item', | |
| axisPointer: { | |
| type: 'cross', | |
| crossStyle: { | |
| color: 'blue', | |
| shadowBlur: 4, | |
| shadowColor: '#000', | |
| shadowOffsetX: 3, | |
| shadowOffsetY: 3, | |
| textStyle: { | |
| color: 'yellow', | |
| fontSize: 16 | |
| } | |
| } | |
| } | |
| } | |
| }; | |
| var baseTop = 90; | |
| var height = 150; | |
| var gap = 50; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: { | |
| axisPointer: { | |
| label: { | |
| precision: 3 | |
| } | |
| } | |
| } | |
| }); | |
| baseTop += height + gap; | |
| var dom = document.getElementById('cross-item'); | |
| if (dom) { | |
| dom.style.height = baseTop + 'px'; | |
| var chart = echarts.init(dom); | |
| chart.setOption(option); | |
| } | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'cross', | |
| axis: 'y' | |
| } | |
| } | |
| }; | |
| var baseTop = 90; | |
| var height = 150; | |
| var gap = 50; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height} | |
| }); | |
| baseTop += height + gap; | |
| var dom = document.getElementById('tooltip.axisPointer.axis'); | |
| if (dom) { | |
| dom.style.height = baseTop + 'px'; | |
| var chart = echarts.init(dom); | |
| chart.setOption(option); | |
| } | |
| }) | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var dom = document.getElementById('main'); | |
| if (!dom) { | |
| return; | |
| } | |
| var chart = echarts.init(dom); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| var data3 = []; | |
| var data4 = []; | |
| for (var i = 0; i < 10; i++) { | |
| xAxisData.push('类目' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data2.push(-Math.random().toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| data4.push((Math.random() + 0.3).toFixed(2)); | |
| } | |
| chart.setOption({ | |
| legend: { | |
| data: ['坐标轴触发1', '坐标轴触发2', '数据项触发', '不显示的数据项触发'], | |
| tooltip: { | |
| show: true, | |
| formatter: null | |
| } | |
| }, | |
| tooltip : { // Option config. Can be overwrited by series or data | |
| trigger: 'axis', | |
| //show: true, //default true | |
| showDelay: 50, | |
| hideDelay: 200, | |
| transitionDuration:0.2, | |
| backgroundColor : 'rgba(255,0,255,0.7)', | |
| borderColor : '#f50', | |
| borderRadius : 8, | |
| borderWidth: 2, | |
| enterable: true, | |
| padding: 10, // [5, 10, 15, 20] | |
| axisPointer: { | |
| type: 'shadow' | |
| }, | |
| position : function(p) { | |
| // 位置回调 | |
| // console.log && console.log(p); | |
| return [p[0] + 10, p[1] - 10]; | |
| }, | |
| textStyle : { | |
| color: 'yellow', | |
| decoration: 'none', | |
| fontFamily: 'Verdana, sans-serif', | |
| fontSize: 15, | |
| fontStyle: 'italic', | |
| fontWeight: 'bold' | |
| }, | |
| formatter: function (params,ticket,callback) { | |
| if (params.componentType === 'legend') { | |
| return params.name; | |
| } | |
| var res = 'Function formatter : <br/>' + params[0].name; | |
| for (var i = 0, l = params.length; i < l; i++) { | |
| res += '<br/>' + params[i].seriesName + ' : ' + params[i].value; | |
| } | |
| res += '<br /><a target="_blank" href="http://www.baidu.com">搜索</a>'; | |
| setTimeout(function (){ | |
| // 仅为了模拟异步回调 | |
| callback(ticket, res); | |
| }, 1000); | |
| return 'loading'; | |
| } | |
| // ,formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}" | |
| }, | |
| toolbox: { | |
| show : true, | |
| feature : { | |
| mark : {show: true}, | |
| dataView : {show: true, readOnly: false}, | |
| magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, | |
| restore : {show: true}, | |
| saveAsImage : {show: true} | |
| } | |
| }, | |
| calculable : true, | |
| xAxis : { | |
| data : ['周一','周二','周三','周四','周五','周六','周日'] | |
| }, | |
| yAxis : { | |
| type : 'value' | |
| }, | |
| series : [ | |
| { | |
| name:'坐标轴触发1', | |
| type:'bar', | |
| data:[ | |
| {value:320, extra:'Hello~'}, | |
| 332, 301, 334, 390, 330, 320 | |
| ] | |
| }, | |
| { | |
| name:'坐标轴触发2', | |
| type:'bar', | |
| data:[862, 1018, 964, 1026, 1679, 1600, 157] | |
| }, | |
| { | |
| name:'数据项触发', | |
| type:'bar', | |
| tooltip : { // Series config. | |
| trigger: 'item', | |
| backgroundColor: 'black', | |
| position : [0, 0], | |
| formatter: 'Series formatter: <br/>{a}<br/>{b}:{c}' | |
| }, | |
| stack: '数据项', | |
| data:[ | |
| { | |
| value: 120, | |
| tooltip: '我是一个简单的字符串', | |
| label: { | |
| normal: {show: true, formatter: 'formatter is string', textStyle: {color: '#222'}} | |
| } | |
| }, 132, | |
| { | |
| value: 301, | |
| itemStyle: {normal: {color: 'red'}}, | |
| tooltip : { // Data config. | |
| backgroundColor: 'blue', | |
| formatter: 'Data formatter: <br/>{a}<br/>{b}:{c}' | |
| } | |
| }, | |
| 134, 90, | |
| { | |
| value: 230, | |
| label: { | |
| normal: { | |
| show: true, | |
| formatter: '我不显示 tooltip' | |
| } | |
| }, | |
| tooltip: {show: false} | |
| }, | |
| 210 | |
| ] | |
| }, | |
| { | |
| name:'不显示的数据项触发', | |
| type:'bar', | |
| tooltip : { | |
| show : false, | |
| trigger: 'item' | |
| }, | |
| stack: '数据项', | |
| data:[150, 232, 201, 154, 190, 330, 410] | |
| } | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| }, | |
| series: { | |
| name: '访问来源', | |
| type: 'pie', | |
| radius : 80, | |
| tooltip: { | |
| formatter: "{a} <br/>{b} : {c} ({d}%)" | |
| }, | |
| data:[ | |
| { | |
| value:335, name:'position: [300, 100]', | |
| tooltip: { | |
| position: [300, 100] | |
| } | |
| }, | |
| { | |
| value:310, name:'position: function [p[0] + 10, p[1] - 50]', | |
| tooltip: { | |
| position : function(p) { | |
| return [p[0] + 10, p[1] - 50]; | |
| } | |
| } | |
| }, | |
| { | |
| value:234, name:'position: inside', | |
| tooltip: { | |
| position : 'inside' | |
| } | |
| }, | |
| { | |
| value:135, name:'align: right; verticalAlign: bottom', | |
| tooltip: { | |
| align: 'right', | |
| verticalAlign: 'bottom' | |
| } | |
| }, | |
| { | |
| value:548, name:'position: [30, 140], verticalAlign: bottom', | |
| tooltip: { | |
| position: [30, 140], | |
| verticalAlign: 'bottom' | |
| } | |
| } | |
| ], | |
| itemStyle: { | |
| emphasis: { | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| } | |
| } | |
| }; | |
| createChart('position', echarts, option, 500); | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| confine: true, | |
| borderWidth: 10, | |
| borderColor: 'green', | |
| padding: 20, | |
| formatter: "{a} <br/>{b} : {c} ({d}%)" | |
| }, | |
| series: { | |
| name: '访问来源', | |
| type: 'pie', | |
| radius : 1180, | |
| data:[ | |
| { | |
| value:335, name:'position: [300, 100]', | |
| }, | |
| { | |
| value:310, name:'position: function [p[0] + 10, p[1] - 50]', | |
| }, | |
| { | |
| value:234, name:'position: inside', | |
| }, | |
| { | |
| value:135, name:'align: right; verticalAlign: bottom', | |
| tooltip: { | |
| align: 'right', | |
| verticalAlign: 'bottom' | |
| } | |
| }, | |
| { | |
| value:548, name:'position: [30, 140], verticalAlign: bottom', | |
| } | |
| ], | |
| itemStyle: { | |
| emphasis: { | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| } | |
| } | |
| }; | |
| createChart('confine', echarts, option, 500); | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| triggerOn: 'click', | |
| axisPointer: { | |
| type: 'cross' | |
| } | |
| } | |
| }; | |
| var baseTop = 90; | |
| var height = 150; | |
| var gap = 50; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: { | |
| name: 'click show tip', | |
| tooltip: { | |
| show: true | |
| } | |
| } | |
| }); | |
| baseTop += height + gap; | |
| createChart('click', echarts, option, baseTop); | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| title: { | |
| text: '未来一周气温变化', | |
| subtext: '纯属虚构' | |
| }, | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| legend: { | |
| data:['最高气温','最低气温'] | |
| }, | |
| toolbox: { | |
| show: true, | |
| feature: { | |
| dataZoom: { | |
| yAxisIndex: 'none' | |
| }, | |
| dataView: {readOnly: false}, | |
| magicType: {type: ['line', 'bar']}, | |
| restore: {}, | |
| saveAsImage: {} | |
| } | |
| }, | |
| xAxis: { | |
| type: 'category', | |
| boundaryGap: false, | |
| data: ['周一','周二','周三','周四','周五','周六','周日'] | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| axisLabel: { | |
| formatter: '{value} °C' | |
| } | |
| }, | |
| series: [ | |
| { | |
| name:'最高气温', | |
| type:'line', | |
| data:[11, 11, 15, 13, 12, 13, 10], | |
| markPoint: { | |
| data: [ | |
| {type: 'max', name: '最大值'}, | |
| {type: 'min', name: '最小值'} | |
| ] | |
| }, | |
| markLine: { | |
| data: [ | |
| {type: 'average', name: '平均值'} | |
| ] | |
| } | |
| }, | |
| { | |
| name:'最低气温', | |
| type:'line', | |
| data:[1, -2, 2, 5, 3, 2, 0], | |
| markPoint: { | |
| data: [ | |
| {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5} | |
| ] | |
| }, | |
| markLine: { | |
| data: [ | |
| {type: 'average', name: '平均值'}, | |
| [{ | |
| symbol: 'none', | |
| x: '90%', | |
| yAxis: 'max' | |
| }, { | |
| symbol: 'circle', | |
| label: { | |
| normal: { | |
| position: 'start', | |
| formatter: '最大值' | |
| } | |
| }, | |
| type: 'max', | |
| name: '最高点' | |
| }] | |
| ] | |
| } | |
| } | |
| ] | |
| }; | |
| var chart = createChart('positionSpecified', echarts, option, 500); | |
| setTimeout(function () { | |
| chart.dispatchAction({ | |
| type: 'showTip', | |
| seriesIndex: 0, | |
| dataIndex: 0, | |
| position: function () { | |
| return [10, 10]; | |
| } | |
| }) | |
| }, 1000); | |
| }) | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| triggerOn: 'click', | |
| axisPointer: { | |
| type: 'cross' | |
| } | |
| } | |
| }; | |
| var baseTop = 90; | |
| var height = 150; | |
| var gap = 50; | |
| makeCategoryGrid(option, { | |
| grid: {top: baseTop, height: height}, | |
| yAxis: { | |
| name: 'click show tip', | |
| tooltip: { | |
| show: true | |
| } | |
| } | |
| }); | |
| baseTop += height + gap; | |
| createChart('click', echarts, option, baseTop); | |
| }) | |
| </script> | |
| </body> | |
| </html> |