| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <html>
- <head>
- <meta charset="utf-8">
- <script src="esl.js"></script>
- <script src="config.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- </head>
- <body>
- <style>
- html, body, #main {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- #main {
- width: 1000px;
- background: #fff;
- }
- </style>
- <div id="main"></div>
- <script>
- require([
- 'echarts',
- 'echarts/chart/bar',
- 'echarts/component/legend',
- 'echarts/component/grid',
- 'echarts/component/tooltip'
- ], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), null, {
- renderer: 'canvas'
- });
- 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,
- 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;
- }
- 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: '我是一个简单的字符串'
- }, 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>
- </body>
- </html>
|
