zoukankan      html  css  js  c++  java
  • ecahrts雷达图的编写

    getRadarOption(arr) {
    let indiArr = [];
    let dataArr = [];
    for (let i = 0; i < arr.length; i++) {
    indiArr.push({
    name: arr[i].name, // 各个极点的名称
    min: 0, // 数值的最小范围
    max: 100, // 数值的最大范围
    });
    dataArr.push(arr[i].value);
    }

    let option = {
    color: ['#61a5e8'],
    tooltip: {
    trigger: 'item',
    formatter: (params) => {
    let indicator = option.radar.indicator;
    let nameArr = [];
    let data = '';
    let result = '';

    for (let key in indicator) {
    nameArr.push(indicator[key].name);
    }

    for (let i = 0; i < params.value.length; i++) {
    data = nameArr[i] + ':' + (params.value[i]);
    result += data + '<br/>';
    }

    return result;
    }
    },
    grid: {
    top: '0%'
    },
    radar: {
    shape: 'circle',
    name: {
    textStyle: {
    color: '#000000',
    fontSize: 13,
    fontFamily: 'Microsoft YaHei',
    }
    },
    splitNumber: 4,
    splitArea: {
    areaStyle: {
    color: ['#ffffff', '#f2f2f2', '#ffffff', '#bcbcbc'] // 雷达图四个圈的颜色划分
    }
    },
    axisLine: { // 雷达图线的样式
    lineStyle: {
    show: 'true',
    color: '#ebebeb',
    }
    },
    splitLine: { // 圆圈分割线样式
    lineStyle: {
    show: 'true',
    color: '#ebebeb', // 分隔线颜色
    1, // 分隔线线宽
    }
    },
    radius: '70%',
    center: ['50%', '50%'],
    indicator: indiArr,
    },
    series: [{
    name: '规则检查情况',
    type: 'radar',
    data: [
    {
    symbol: 'circle',
    areaStyle: {
    normal: {
    opacity: 0.6,
    },
    },
    value: dataArr, // 各个坐标的数值
    },
    ]
    }]
    };

    return option;
    },
  • 相关阅读:
    一系列视频教程 收藏
    生成一个4位整数
    spring 实现定时任务
    判断字符串是否包含汉字
    pmd代码安全扫描工具
    IntelliJ IDEA
    李小龙传奇
    checkmarx使用笔记、原理
    pmd 使用笔记
    Mysql的安装(视频+部分视频截图)
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/12610955.html
Copyright © 2011-2022 走看看