Maison >interface Web >tutoriel HTML >雷达图_html/css_WEB-ITnose
雷达图_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:41:441515parcourir
该雷达图是依赖于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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS3:clip-path详解_html/css_WEB-ITnoseArticle suivant：IE6下span右浮动换行怎么处理_html/css_WEB-ITnose