雷达图
该雷达图是依赖于Echarts框架的。
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts</title> 5 <script src="js/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></script> // 需要引入echarts文件 6 <style type="text/css"> 7 html, 8 body { 9 width: 100%; 10 height: 100%; 11 } 12 </style> 13 </head> 14 15 <body> 16 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 17 <div id="main" style="width:495px; height:250px;margin: 100px auto;"></div> 18 <!-- ECharts单文件引入 --> 19 <script src="js/echarts-all.js" type="text/javascript" charset="utf-8"></script> 20 <script type="text/javascript"> 21 var option = { //可以去官网上根据每个案例不同的option去写各种图形 22 title: { //标题 23 text: 'OP系统点击量' 24 }, 25 tooltip: { //提示框，鼠标悬浮交互时的信息提示 26 show:true, 27 trigger: 'axis' 28 }, 29 legend: { //图例，每个图表最多仅有一个图例 30 x: 'center', 31 data: ['ESOP系统', 'VGOP系统'] 32 }, 33 polar: [{ //极坐标 34 indicator: [{text: '计划部',max: 100}, 35 {text: '市场部',max: 100}, 36 {text: '政企客户部',max: 100}, 37 {text: '客户服务部',max: 100}, 38 {text: '铁通公司',max: 100}, 39 {text: '其他',max: 100} 40 ], 41 radius: 100, 42 startAngle: 120 // 改变雷达图的旋转度数 43 }], 44 45 series: [{ // 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据 46 name: '总点击量', 47 type: 'radar', 48 itemStyle: {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）： 49 normal: { 50 areaStyle: { 51 type: 'default' 52 } 53 } 54 }, 55 data: [{ 56 value: [], //外部加载，也可以通过ajax去加载外部数据。 57 name: '' 58 }, { 59 value: [78,98,90,94,98,37], 60 name: 'VGOP系统' 61 }] 62 }] 63 }; 64 $(function() { 65 option.series[0].data[0].value=[12,32,34,53,53,65]; // 加载数据到data中 66 option.series[0].data[0].name ='ESOP系统';
67 var myChart = echarts.init(document.getElementById('main')); 68 myChart.setOption(option, true); //为echarts对象加载数据 69 }); 70 </script> 71 </body>
