112Echarts - 雷达图(Proportion of Browsers)

简介: 112Echarts - 雷达图(Proportion of Browsers)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      option = {
        title: {
          text: '浏览器占比变化',
          subtext: '纯属虚构',
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,250,0.2)'
        },
        legend: {
          type: 'scroll',
          bottom: 10,
          data: (function() {
            var list = [];
            for(var i = 1; i <= 28; i++) {
              list.push(i + 2000 + '');
            }
            return list;
          })()
        },
        visualMap: {
          top: 'middle',
          right: 10,
          color: ['red', 'yellow'],
          calculable: true
        },
        radar: {
          indicator: [{
              text: 'IE8-',
              max: 400
            },
            {
              text: 'IE9+',
              max: 400
            },
            {
              text: 'Safari',
              max: 400
            },
            {
              text: 'Firefox',
              max: 400
            },
            {
              text: 'Chrome',
              max: 400
            }
          ]
        },
        series: (function() {
          var series = [];
          for(var i = 1; i <= 28; i++) {
            series.push({
              name: '浏览器(数据纯属虚构)',
              type: 'radar',
              symbol: 'none',
              lineStyle: {
                width: 1
              },
              emphasis: {
                areaStyle: {
                  color: 'rgba(0,250,0,0.3)'
                }
              },
              data: [{
                value: [
                  (40 - i) * 10,
                  (38 - i) * 4 + 60,
                  i * 5 + 10,
                  i * 9,
                  i * i / 2
                ],
                name: i + 2000 + ''
              }]
            });
          }
          return series;
        })()
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
打赏
0
0
0
0
239
分享
相关文章
Echarts2.0雷达图tooltip单轴数据
Echarts2.0雷达图tooltip单轴数据
248 0
|
2月前
Highcharts 测量图
Highcharts 测量图
61 4
ECharts实现雷达图详解
ECharts 是百度开源的一款强大的数据可视化工具,支持多种图表类型如折线图、柱状图、饼图等,并提供丰富的交互功能。其核心实现原理包括数据驱动、Canvas/SVG渲染、响应式布局、动画效果、事件监听等。本文通过具体示例介绍了如何使用 ECharts 实现交互式雷达图,包括引入库、创建图表容器、配置雷达图、添加交互功能及动态数据更新等功能。通过简单的步骤即可在网页中展示绚丽的数据大屏。
343 4
ECharts实现雷达图详解
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
391 0
|
9月前
eCharts实现漏斗图
eCharts实现漏斗图
252 0
eCharts实现漏斗图
149Echarts - 旭日图(Drink Flavors)
149Echarts - 旭日图(Drink Flavors)
91 0
153Echarts - 旭日图(Sunburst VisualMap)
153Echarts - 旭日图(Sunburst VisualMap)
120 0
151Echarts - 旭日图(Monochrome Sunburst)
151Echarts - 旭日图(Monochrome Sunburst)
82 0
109Echarts - 雷达图(AQI - Radar Chart)
109Echarts - 雷达图(AQI - Radar Chart)
90 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等