| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/jquery.min.js"></script> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/draggable.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| </head> |
| <body class="has-code"> |
| <style> |
| </style> |
| <div id="main"></div> |
| <div id="code-box"><textarea id="code-area"> |
| (function () { |
| |
| draggable.init( |
| $('div[_echarts_instance_]')[0], |
| myChart, |
| { |
| width: 516, |
| height: 400, |
| throttle: 70 |
| } |
| ); |
| |
| var outerRadius = '45%'; |
| |
| option = { |
| baseOption: { |
| title : { |
| text: '南丁格尔玫瑰图', |
| x:'center' |
| }, |
| tooltip : { |
| trigger: 'item', |
| formatter: "{a} <br/>{b} : {c} ({d}%)" |
| }, |
| legend: { |
| data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'] |
| }, |
| series : [ |
| { |
| type:'pie', |
| roseType : 'radius', |
| label: { |
| normal: { |
| show: false |
| }, |
| emphasis: { |
| show: true |
| } |
| }, |
| lableLine: { |
| normal: { |
| show: false |
| }, |
| emphasis: { |
| show: true |
| } |
| }, |
| data:[ |
| {value:10, name:'rose1'}, |
| {value:5, name:'rose2'}, |
| {value:15, name:'rose3'}, |
| {value:25, name:'rose4'}, |
| {value:20, name:'rose5'}, |
| {value:35, name:'rose6'}, |
| {value:30, name:'rose7'}, |
| {value:40, name:'rose8'} |
| ] |
| }, |
| { |
| type:'pie', |
| roseType : 'area', |
| labelLine: { |
| normal: { |
| show: true, |
| length: 5, |
| length2: 5 |
| } |
| }, |
| data:[ |
| {value:10, name:'rose1'}, |
| {value:5, name:'rose2'}, |
| {value:15, name:'rose3'}, |
| {value:25, name:'rose4'}, |
| {value:20, name:'rose5'}, |
| {value:35, name:'rose6'}, |
| {value:30, name:'rose7'}, |
| {value:40, name:'rose8'} |
| ] |
| } |
| ] |
| }, |
| media: [ |
| { |
| option: { |
| legend: { |
| right: 'center', |
| bottom: 0, |
| orient: 'horizontal' |
| }, |
| series: [ |
| { |
| radius: [20, '50%'], |
| center: ['25%', '50%'] |
| }, |
| { |
| radius: [30, '50%'], |
| center: ['75%', '50%'] |
| } |
| ] |
| } |
| }, |
| { |
| query: { |
| minAspectRatio: 1 |
| }, |
| option: { |
| legend: { |
| right: 'center', |
| bottom: 0, |
| orient: 'horizontal' |
| }, |
| series: [ |
| { |
| radius: [20, outerRadius], |
| center: ['25%', '50%'] |
| }, |
| { |
| radius: [30, outerRadius], |
| center: ['75%', '50%'] |
| } |
| ] |
| } |
| }, |
| { |
| query: { |
| maxAspectRatio: 1 |
| }, |
| option: { |
| legend: { |
| right: 'center', |
| bottom: 0, |
| orient: 'horizontal' |
| }, |
| series: [ |
| { |
| radius: [20, outerRadius], |
| center: ['50%', '30%'] |
| }, |
| { |
| radius: [30, outerRadius], |
| center: ['50%', '70%'] |
| } |
| ] |
| } |
| }, |
| { |
| query: { |
| maxWidth: 500 |
| }, |
| option: { |
| legend: { |
| right: 10, |
| top: '15%', |
| orient: 'vertical' |
| }, |
| series: [ |
| { |
| radius: [20, outerRadius], |
| center: ['50%', '30%'] |
| }, |
| { |
| radius: [30, outerRadius], |
| center: ['50%', '75%'] |
| } |
| ] |
| } |
| } |
| ] |
| }; |
| |
| |
| })(); |
| </textarea></div> |
| <script> |
| |
| var myChart = echarts.init(document.getElementById('main')); |
| var code = document.getElementById('code-area'); |
| var html = code.value; |
| eval(html); |
| myChart.setOption(option); |
| |
| </script> |
| </body> |
| </html> |
