简单的风向玫瑰图 echarts实现

最新推荐文章于 2023-12-14 16:19:50 发布

hakey_new

最新推荐文章于 2023-12-14 16:19:50 发布

阅读量930

点赞数

分类专栏：前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/hakey_new/article/details/127628305

版权

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

摘要由CSDN通过智能技术生成

先看效果图如下：

我就是在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: 6