|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <meta charset="utf-8">
| |
| − | <title>做一个简单的图表</title>
| |
| − | </head>
| |
| − | <body>
| |
| | | | |
| − | <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/jquery?
| |
| − | action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
| |
| − | action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/popper?
| |
| − | action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/ripple?
| |
| − | action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/bootstrap?
| |
| − | action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/nav?
| |
| − | action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/echarts?
| |
| − | action=raw&ctype=text/javascript"></script>
| |
| − | <script type="text/javascript">
| |
| − | // 基于准备好的dom，初始化echarts实例
| |
| − | var myChart = echarts.init(document.getElementById('radar'));
| |
| − |
| |
| − | // 指定图表的配置项和数据
| |
| − | var option = {
| |
| − | title: {
| |
| − | text: ' '
| |
| − | },
| |
| − | tooltip: {},
| |
| − | legend: {
| |
| − | data: ['Chip', 'Microdroplet', 'Paper']
| |
| − | },
| |
| − | radar: {
| |
| − | // shape: 'circle',
| |
| − | name: {
| |
| − | textStyle: {
| |
| − | color: '#fff',
| |
| − | backgroundColor: '#999',
| |
| − | borderRadius: 3,
| |
| − | padding: [3, 5]
| |
| − | }
| |
| − | },
| |
| − | indicator: [{
| |
| − | name: 'Even Color',
| |
| − | max: 5
| |
| − | }, {
| |
| − | name: 'Technical Realization',
| |
| − | max: 5
| |
| − | }, {
| |
| − | name: 'Obvious Color',
| |
| − | max: 5
| |
| − | }, {
| |
| − | name: 'Culture Environment',
| |
| − | max: 5
| |
| − | }, {
| |
| − | name: 'Bacteria fixation',
| |
| − | max: 5
| |
| − | }, {
| |
| − | name: 'Price',
| |
| − | max: 5
| |
| − | }, {
| |
| − | name: 'Portable',
| |
| − | max: 5
| |
| − | }, ]
| |
| − | },
| |
| − | series: [{
| |
| − | name: ' Radar graph for three potential loaders ',
| |
| − | type: 'radar',
| |
| − | // areaStyle: {normal: {}},
| |
| − | data: [{
| |
| − | value: [3, 3, 1, 1, 4, 4,5],
| |
| − | name: 'Chip'
| |
| − |
| |
| − | }, {
| |
| − | value: [1, 2, 2, 5, 5, 4,5],
| |
| − | name: 'Microdroplet',
| |
| − |
| |
| − | }, {
| |
| − | value: [4, 5, 5, 3, 3, 5,5],
| |
| − | name: 'Paper',
| |
| − |
| |
| − | }]
| |
| − | }]
| |
| − | };
| |
| − |
| |
| − | myChart.setOption(option);
| |
| − | </script>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
