雷达图

作者: wangtieshan | 来源:发表于2020-09-17 01:15 被阅读0次

    let option = {
    /* 标题 /
    title: {
    text: '自定义雷达图'
    },
    /
    说明图 /
    legend: {
    data: ['图一','图二', '张三', '李四']
    },
    radar: [
    {
    /
    边角label /
    indicator: [
    { text: '指标一' },
    { text: '指标二' },
    { text: '指标三' },
    { text: '指标四' },
    { text: '指标五' }
    ],
    /
    边角label展示名称格式化 /
    name: {
    formatter: '【{value}】',
    textStyle: {
    color: '#72ACD1'
    }
    },
    /
    中心坐标 /
    center: ['50%', '50%'],
    /
    半径 /
    radius: 120,
    /
    开始角度 /
    startAngle: 90,
    /
    内部分割部分数 /
    splitNumber: 4,
    /
    内部分割形状 /
    shape: 'circle',
    /
    内部分割区域配置 /
    splitArea: {
    /
    css /
    areaStyle: {
    /
    颜色,每个区域的颜色 /
    color: ['rgba(114, 172, 209, 0.2)',
    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
    /
    阴影颜色 /
    shadowColor: 'rgba(0, 0, 0, 0.3)',
    /
    阴影半径 /
    shadowBlur: 10
    }
    },
    /
    轴线配置 /
    axisLine: {
    lineStyle: {
    color: 'rgba(255, 255, 255, 0.5)'
    }
    },
    /
    网格线配置 */
    splitLine: {
    lineStyle: {
    color: 'rgba(255, 255, 255, 0.5)'
    }
    }
    }
    ],
    series: [
    {
    name: '雷达图',
    type: 'radar',
    emphasis: {
    lineStyle: {
    width: 4
    }
    },
    data: [
    {
    value: [100, 8, 0.40, -80, 2000],
    name: '图一',
    symbol: 'rect',
    symbolSize: 5,
    lineStyle: {
    type: 'dashed'
    }
    },
    {
    value: [60, 5, 0.30, -100, 1500],
    name: '图二',
    areaStyle: {
    color: 'rgba(255, 255, 255, 0.5)'
    }
    }
    ]
    }
    ]
    }

    相关文章

      网友评论

          本文标题:雷达图

          本文链接:https://www.haomeiwen.com/subject/wvqoektx.html