Charts

雷达图

基本雷达图

切换数据
重置
点击以展开或折叠
const option1 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [111, 256, 178, 152, 266, 132]
    }
  ]
}

const option2 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [223, 189, 214, 265, 178, 155]
    }
  ]
}

export default [option1, option2]

多边形雷达图

切换数据
重置
点击以展开或折叠
const option1 = {
  radar: {
    polygon: true,
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [111, 256, 178, 152, 266, 132],
      animationCurve: 'easeOutBack'
    }
  ]
}

const option2 = {
  radar: {
    polygon: true,
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [223, 189, 214, 265, 178, 155],
      animationCurve: 'easeOutBack'
    }
  ]
}

export default [option1, option2]

多组雷达图

切换数据
重置
点击以展开或折叠
const option1 = {
  legend: {
    data: ['同比', '环比']
  },
  radar: {
    polygon: true,
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ]
  },
  series: [
    {
      name: '同比',
      type: 'radar',
      data: [111, 256, 178, 152, 266, 132],
      label: {
        show: false
      },
      animationCurve: 'easeOutBounce'
    },
    {
      name: '环比',
      type: 'radar',
      data: [222, 245, 220, 130, 240, 100],
      label: {
        show: false
      },
      animationCurve: 'easeOutBounce'
    }
  ]
}

const option2 = {
  legend: {
    data: ['同比', '环比']
  },
  radar: {
    polygon: true,
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ]
  },
  series: [
    {
      name: '同比',
      type: 'radar',
      data: [223, 189, 214, 265, 178, 155],
      label: {
        show: false
      },
      animationCurve: 'easeOutBounce'
    },
    {
      name: '环比',
      type: 'radar',
      data: [116, 256, 280, 244, 240, 255],
      label: {
        show: false
      },
      animationCurve: 'easeOutBounce'
    }
  ]
}

export default [option1, option2]

背景配色

切换数据
重置
点击以展开或折叠
const option1 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ],
    polygon: true,
    splitLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    axisLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    splitArea: {
      show: true,
      color: ['rgba(159, 230, 184, .2)']
    }
  },
  series: [
    {
      type: 'radar',
      data: [111, 256, 178, 152, 266, 132]
    }
  ]
}

const option2 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ],
    polygon: true,
    splitLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    axisLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    splitArea: {
      show: true,
      color: ['rgba(159, 230, 184, .2)']
    }
  },
  series: [
    {
      type: 'radar',
      data: [223, 189, 214, 265, 178, 155]
    }
  ]
}

export default [option1, option2]

多背景配色

切换数据
重置
点击以展开或折叠
const option1 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ],
    polygon: true,
    splitLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    axisLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    splitArea: {
      show: true,
      color: ['rgba(159, 230, 184, .2)', 'rgba(251, 114, 147, .2)']
    }
  },
  series: [
    {
      type: 'radar',
      data: [111, 256, 178, 152, 266, 132],
      animationCurve: 'easeInOutBack'
    }
  ]
}

const option2 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ],
    polygon: true,
    splitLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    axisLine: {
      style: {
        stroke: 'rgba(159, 230, 184, 1)'
      }
    },
    splitArea: {
      show: true,
      color: ['rgba(251, 114, 147, .2)', 'rgba(159, 230, 184, .2)']
    }
  },
  series: [
    {
      type: 'radar',
      data: [223, 189, 214, 265, 178, 155],
      animationCurve: 'easeInOutBack'
    }
  ]
}

export default [option1, option2]

层叠背景配色

切换数据
重置
点击以展开或折叠
const option1 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ],
    polygon: true,
    axisLine: {
      style: {
        stroke: 'rgba(251, 114, 147, .3)'
      }
    },
    splitLine: {
      style: {
        stroke: 'rgba(251, 114, 147, .5)',
        fill: 'rgba(251, 114, 147, .2)'
      }
    }
  },
  series: [
    {
      type: 'radar',
      data: [111, 256, 178, 152, 266, 132]
    }
  ]
}

const option2 = {
  radar: {
    indicator: [
      { name: '西峡', max: 300 },
      { name: '周口', max: 300 },
      { name: '南阳', max: 300 },
      { name: '驻马店', max: 300 },
      { name: '郑州', max: 300 },
      { name: '洛阳', max: 300 }
    ],
    polygon: true,
    axisLine: {
      style: {
        stroke: 'rgba(230, 114, 209, .3)'
      }
    },
    splitLine: {
      style: {
        stroke: 'rgba(230, 114, 209, .5)',
        fill: 'rgba(230, 114, 209, .2)'
      }
    }
  },
  series: [
    {
      type: 'radar',
      data: [223, 189, 214, 265, 178, 155]
    }
  ]
}

export default [option1, option2]

← 仪表盘 →