| |
| var data = []; |
| var dataCount = 7; |
| for (var i = 0; i < dataCount; i++) { |
| var val = Math.random() * 1000; |
| data.push([ |
| echarts.number.round(Math.random() * 100), |
| echarts.number.round(Math.random() * 400) |
| ]); |
| } |
| |
| function renderItem(params, api) { |
| if (params.context.rendered) { |
| return; |
| } |
| params.context.rendered = true; |
| |
| var points = []; |
| for (var i = 0; i < data.length; i++) { |
| points.push(api.coord(data[i])); |
| } |
| var color = api.visual('color'); |
| |
| return { |
| type: 'polygon', |
| shape: { |
| points: echarts.graphic.clipPointsByRect(points, { |
| x: params.coordSys.x, |
| y: params.coordSys.y, |
| width: params.coordSys.width, |
| height: params.coordSys.height |
| }) |
| }, |
| style: api.style({ |
| fill: color, |
| stroke: echarts.color.lift(color) |
| }) |
| }; |
| } |
| |
| option = { |
| tooltip: { |
| trigger: 'axis' |
| }, |
| legend: { |
| data: ['bar', 'error'] |
| }, |
| dataZoom: [{ |
| type: 'slider', |
| filterMode: 'none', |
| height: 8, |
| bottom: 20, |
| borderColor: 'transparent', |
| backgroundColor: '#e2e2e2', |
| handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line |
| handleSize: 20, |
| handleStyle: { |
| shadowBlur: 6, |
| shadowOffsetX: 1, |
| shadowOffsetY: 2, |
| shadowColor: '#aaa' |
| } |
| }, { |
| type: 'inside', |
| filterMode: 'none' |
| }], |
| xAxis: {}, |
| yAxis: {}, |
| series: [{ |
| type: 'custom', |
| renderItem: renderItem, |
| data: data |
| }] |
| }; |