echarts 雷达图

Echarts 常用各类图表模板配置

注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项;

以下代码都可以复制到 Echarts 官网,直接预览;



一、雷达图

echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画

const datas = [100, 100, 100, 100, 100];
let i = -1;
option = {
  title: {
    text: '{a|96.34%}\n{b|Echarts}',
    x: 'center',
    y: 'center',
    textStyle: {
      fontSize: 12,
      rich: {
        a: {
          color: '#0066FF',
          fontSize: 18,
          align: 'center'
        },
        b: {
          color: '#00BBFF',
          fontSize: 12,
          height: 16,
          align: 'center'
        }
      }
    }
  },
  grid: {
    top: '10%'
  },
  tooltip: {
    show: false,
    trigger: 'item'
  },
  radar: {
    name: {
      // (圆外的标签)雷达图每个指示器名称的配置项。
      formatter: (a, b) => {
        i += 1;
        return '{a|' + datas[i] + '%}\n{b|' + a + '}';
      },
      textStyle: {
        fontSize: 15,
        color: '#000',
        rich: {
          a: {
            color: '#00BBFF',
            fontSize: 18,
            align: 'center'
          },
          b: {
            color: '#9999FF',
            fontSize: 12,
            height: 16,
            align: 'center'
          }
        }
      }
    },

    radius: '70%',
    splitArea: {
      areaStyle: {
        color: ['transparent']
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#000'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#000'
      }
    },
    indicator: [
      {
        name: '专科1',
        max: 100
      },
      {
        name: '专科2',
        max: 100
      },
      {
        name: '专科3',
        max: 100
      },
      {
        name: '专科4',
        max: 100
      },
      {
        name: '专科5',
        max: 100
      }
    ]
  },
  series: [
    {
      type: 'radar',
      name: '月度风险指数',
      symbol: 'circle',
      symbolSize: 1,
      areaStyle: {
        normal: {
          color: 'rgba(19, 173, 255, 0.1)'
        }
      },
      lineStyle: {
        normal: {
          color: '#ccc',
          width: 2,
          type: 'solid'
        }
      },
      data: [[100, 100, 100, 100, 100]]
    },
    {
      type: 'radar',
      name: '月度风险指数',
      symbol: 'circle',
      symbolSize: 1,
      itemStyle: {
        normal: {
          color: '#ccc',
          borderColor: '#ccc',
          borderWidth: 1
        }
      },
      areaStyle: {
        normal: {
          opacity: 1,
          color: 'rgba(19, 173, 255, 0.1)'
        }
      },
      lineStyle: {
        normal: {
          color: '#ccc',
          width: 2,
          type: 'solid'
        }
      },
      data: [[50, 50, 50, 50, 50]]
    },
    {
      type: 'radar',
      symbolSize: 8,
      symbol: 'circle',
      data: [
        {
          value: [80, 20, 80, 0, 50, 80, 60, 10],
          name: '服务类型占比',
          lineStyle: {
            normal: {
              color: '#5599FF',
              width: 2,
              type: 'solid'
            }
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }
        }
      ]
    }
  ]
};


二、环形图

echarts 环形图:多层嵌套,自定义 legend 位置、颜色,中间插入数据及文字,颜色渐变;

文字链接: https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501

三、k 线图

文章链接: https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501

四、折线图

echarts 折线图,横纵坐标轴线颜色、文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;

文章链接:https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501

文章链接:https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501

文章链接:https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501

五、横向柱状图

echarts 横向柱状图,坐标轴隐藏,网格线颜色渐变,网格默认背景,柱状图边框宽度/颜色,数据渐变,刻度线隐藏等;

文章链接: https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501

六、折线图 + 柱状图

echarts 折线图 + 柱状图,左右两侧y轴线,横纵坐标轴线颜色、文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;

文章链接: https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501

七、3D 柱状图

echarts 3D 柱状图,多个柱状图叠加,y轴内刻度线、隐藏横坐标,文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;

文章链接: https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501

八、工程项目可视化

echarts 工程项目可视化,依据x轴时间坐标轴,叠加展示不同阶段的项目节点,y轴展示项目阶段名、文字颜色,网格线,坐标轴两侧留白、背景色等;

文章链接: https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501

九、象形柱图

echarts 象形柱图,隐藏横纵坐标轴、网格线,坐标轴两侧留白,自定义矢量图,文字提示框、图形类型、背景色等;

文章链接:https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501

十、环形占比图

echarts 环形占比图,环形图、仪表盘、刻度线,自定义提示框、颜色渐变、背景色等;

文章链接:https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501

十一、圆环动画

echarts 圆环动画,饼图、环形图、图表动画、网格线,颜色渐变,图行矢量,文字提示框、图表层级、背景色等;

文章链接:https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值