| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- <html>
- <head>
- <meta charset="utf-8">
- <script src="lib/esl.js"></script>
- <script src="lib/config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/facePrint.js"></script>
- <script src="lib/testHelper.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- </head>
- <body>
- <style>
- h1 {
- line-height: 60px;
- height: 60px;
- background: #146402;
- text-align: center;
- font-weight: bold;
- color: #eee;
- font-size: 14px;
- }
- .chart {
- height: 600px;
- }
- </style>
- <div id="main" class="chart"></div>
- <script>
- require(
- (testHelper.hasURLParam('en')
- ? [
- 'echarts',
- // 'echarts/lang/en',
- ]
- : [
- 'echarts'
- ]
- ).concat(
- [
- // 'echarts/chart/bar',
- // 'echarts/chart/line',
- // 'echarts/component/legend',
- // 'echarts/component/graphic',
- // 'echarts/component/grid',
- // 'echarts/component/tooltip',
- // 'echarts/component/brush',
- // 'echarts/component/toolbox',
- // 'echarts/component/title',
- // 'zrender/vml/vml'
- ]
- ),
- function (echarts) {
- var chart = echarts.init(document.getElementById('main'));
- var xAxisData = [];
- var data1 = [];
- var data2 = [];
- var data3 = [];
- var data4 = [];
- for (var i = 0; i < 5; 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));
- }
- var itemStyle = {
- normal: {
- barBorderRadius: 5,
- label: {
- show: true,
- position: 'outside'
- }
- },
- emphasis: {
- label: {
- position: 'outside'
- },
- barBorderColor: '#fff',
- barBorderWidth: 1,
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowColor: 'rgba(0,0,0,0.5)'
- }
- };
- chart.setOption({
- backgroundColor: '#eee',
- animationDurationUpdate: 1000,
- legend: {
- left: 0,
- inactiveColor: '#abc',
- borderWidth: 1,
- itemWidth: 35,
- itemHeight: 30,
- data: [{
- name: 'bar'
- }, 'bar2', 'bar3', 'bar4'],
- selected: {
- // 'bar': false
- },
- // orient: 'vertical',
- // x: 'right',
- // y: 'bottom',
- align: 'left',
- tooltip: {
- show: true
- }
- },
- // brush: {
- // xAxisIndex: 0
- // },
- // // toolbox: {
- // // top: 25,
- // // // right: 20,
- // // feature: {
- // // magicType: {
- // // type: ['line', 'bar', 'stack', 'tiled']
- // // },
- // // dataView: {},
- // // saveAsImage: {
- // // pixelRatio: 2
- // // },
- // // brush: {
- // // type: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear']
- // // },
- // // restore: {},
- // // dataZoom: {},
- // // myTool1: {
- // // show: true,
- // // title: '自定义扩展方法1',
- // // icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
- // // onclick: function (){
- // // alert('myToolHandler1')
- // // }
- // // },
- // // myTool2: {
- // // show: true,
- // // title: '自定义扩展方法2',
- // // icon: 'image://http://echarts.baidu.com/images/favicon.png',
- // // onclick: function (){
- // // alert('myToolHandler2')
- // // }
- // // }
- // // },
- // iconStyle: {
- // emphasis: {
- // textPosition: 'top'
- // // textAlign: 'right'
- // }
- // }
- // },
- tooltip: {},
- grid: {
- top: 50
- },
- xAxis: {
- data: xAxisData,
- name: '横轴',
- silent: false,
- axisTick: {
- alignWithLabel: true
- },
- // axisLabel: {
- // show: false
- // },
- // axisTick: {
- // show: false
- // },
- axisLine: {
- onZero: true
- },
- splitLine: {
- show: true
- },
- splitArea: {
- show: true
- }
- },
- yAxis: {
- inverse: true,
- // axisLabel: {
- // show: false
- // },
- axisTick: {
- show: false
- },
- // splitLine: {
- // show: false
- // },
- splitArea: {
- show: false
- }
- },
- series: [{
- name: 'bar',
- type: 'bar',
- stack: 'one',
- itemStyle: itemStyle,
- cursor: 'move',
- data: data1
- }, {
- name: 'bar2',
- type: 'bar',
- stack: 'one',
- itemStyle: itemStyle,
- cursor: 'default',
- data: data2
- // }, {
- // name: 'bar3',
- // type: 'bar',
- // stack: 'two',
- // itemStyle: itemStyle,
- // data: data3
- // }, {
- // name: 'bar4',
- // type: 'bar',
- // stack: 'two',
- // itemStyle: itemStyle,
- // data: data4
- }]
- });
- chart.on('click', function (params) {
- console.log(params);
- });
- // chart.on('legendselectchanged', function (params) {
- // chart.setOption({
- // // title: {
- // // },
- // graphic: [{
- // type: 'circle',
- // shape: {
- // cx: 100,
- // cy: 100,
- // r: 20,
- // }
- // }]
- // });
- // });
- window.onresize = chart.resize;
- }
- );
- </script>
- </body>
- </html>
|
