search

Home >Web Front-end >HTML Tutorial >Radar chart_html/css_WEB-ITnose

Radar chart_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:41:441515browse

This radar chart relies on the Echarts framework. 

 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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3: clip-path detailed explanation_html/css_WEB-ITnoseNext article：CSS3: clip-path detailed explanation_html/css_WEB-ITnose

Related articles

See more