简单的风向玫瑰图 echarts实现

最新推荐文章于 2025-04-15 19:45:51 发布

原创

最新推荐文章于 2025-04-15 19:45:51 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文展示了如何利用Echarts库在前端环境中实现风向玫瑰图的绘制。通过示例代码，详细解释了在Echarts中配置和操作的过程。

先看效果图如下：

我就是在echarts示例中操作的，代码粘贴在示例的代码编辑-js中

option = {
        grid: {
          top: 10,
          bottom: 0,
          left: '0%',
          right: 0,
          containLabel: false,
        },
        title: {
          text: '风向玫瑰图',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: '14',
            fontWeight: 'normal'
          }
        },
        radar: {
          shape: 'circle',
          nameGap: 15,//蜘蛛图外圈的文字 和 图的间距
          radius: 140,//缩放
          name: { //蜘蛛图外圈的文字
            textStyle: {
              // padding: [-10, -10],  // 控制文字padding
              fontSize: 8
            }
          },
          indicator: [
            {
              name: 'N', max: 650, color: '#555',
            },
            { name: 'NNW', max: 160, color: '

最低0.47元/天解锁文章