| /* |
| title: Custom Graphic Component |
| titleCN: 自定义图形组件 |
| category: line |
| difficulty: 9 |
| */ |
| |
| option = { |
| legend: { |
| data:['高度(km)与气温(°C)变化关系'] |
| }, |
| tooltip: { |
| trigger: 'axis', |
| formatter: "Temperature : <br/>{b}km : {c}°C" |
| }, |
| grid: { |
| left: '3%', |
| right: '4%', |
| bottom: '3%', |
| containLabel: true |
| }, |
| xAxis: { |
| type: 'value', |
| axisLabel: { |
| formatter: '{value} °C' |
| } |
| }, |
| yAxis: { |
| type: 'category', |
| axisLine: {onZero: false}, |
| axisLabel: { |
| formatter: '{value} km' |
| }, |
| boundaryGap: true, |
| data: ['0', '10', '20', '30', '40', '50', '60', '70', '80'] |
| }, |
| graphic: [ |
| { |
| type: 'group', |
| rotation: Math.PI / 4, |
| bounding: 'raw', |
| right: 110, |
| bottom: 110, |
| z: 100, |
| children: [ |
| { |
| type: 'rect', |
| left: 'center', |
| top: 'center', |
| z: 100, |
| shape: { |
| width: 400, |
| height: 50 |
| }, |
| style: { |
| fill: 'rgba(0,0,0,0.3)' |
| } |
| }, |
| { |
| type: 'text', |
| left: 'center', |
| top: 'center', |
| z: 100, |
| style: { |
| fill: '#fff', |
| text: 'ECHARTS LINE CHART', |
| font: 'bold 26px sans-serif' |
| } |
| } |
| ] |
| }, |
| { |
| type: 'group', |
| left: '10%', |
| top: 'center', |
| children: [ |
| { |
| type: 'rect', |
| z: 100, |
| left: 'center', |
| top: 'middle', |
| shape: { |
| width: 190, |
| height: 90 |
| }, |
| style: { |
| fill: '#fff', |
| stroke: '#555', |
| lineWidth: 1, |
| shadowBlur: 8, |
| shadowOffsetX: 3, |
| shadowOffsetY: 3, |
| shadowColor: 'rgba(0,0,0,0.2)' |
| } |
| }, |
| { |
| type: 'text', |
| z: 100, |
| left: 'center', |
| top: 'middle', |
| style: { |
| fill: '#333', |
| text: [ |
| '横轴表示温度,单位是 °C', |
| '纵轴表示高度,单位是 km', |
| '右上角有一个图片做的水印', |
| '这个文本块可以放在图中各', |
| '种位置' |
| ].join('\n'), |
| font: '14px Microsoft YaHei' |
| } |
| } |
| ] |
| } |
| ], |
| series: [ |
| { |
| name: '高度(km)与气温(°C)变化关系', |
| type: 'line', |
| smooth: true, |
| barCategoryGap: 25, |
| data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5] |
| } |
| ] |
| }; |