zoukankan      html  css  js  c++  java
  • echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置

    function test() {
        let myChart = echarts.init(document.getElementById('levelImage'));
        myChart.setOption({
            title: {
                text: null
            }, // 隐藏图表标题
            legend: {
                enabled: false
            }, // 隐藏图例
            tooltip: {
                trigger: 'axis'
            },
            calculable: true,
            polar: [{
                nameGap: 5, // 图中工艺等字距离图的距离
                center: ['50%', '50%'], // 图的位置
            radius: 70,    //雷达图占的位置
                name: {
                    show: true, // 是否显示工艺等文字
                    formatter: null, // 工艺等文字的显示形式
                    textStyle: {
                        color: '#a3a5b6' // 工艺等文字颜色
                    }
                },
                indicator: [{
                        text: '工艺',
                        max: 100
                    },
                    {
                        text: '设备',
                        max: 100
                    },
                    {
                        text: '安全',
                        max: 100
                    },
                    {
                        text: '工艺',
                        max: 100
                    },
                    {
                        text: '仪表',
                        max: 100
                    }
                ],
                axisLine: { // 坐标轴线
                    show: false // 默认显示,属性show控制显示与否
                },
                axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
                    show: false,
                    textStyle: {
                        color: '#247bd7' // 坐标轴刻度文字的样式
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ["#2a4a93"] // 图表背景网格的颜色
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                         1,
                        color: '#286fbb' // 图表背景网格线的颜色
                    }
                }
            }],
            series: [{
                name: '完全实况球员数据',
                type: 'radar',
                symbol: "none", // 去掉图表中各个图区域的边框线拐点
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
                        lineStyle: {
                            color: "white" // 图表中各个图区域的边框线颜色
                        },
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [{
                        value: [50, 42, 88, 60, 90],
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default',
                                    opacity: 0.8, // 图表中各个图区域的透明度
                                    color: "#1686c2" // 图表中各个图区域的颜色
                                }
                            }
                        },
                        name: '重整'
                    },
                    {
                        value: [90, 32, 74, 20, 60],
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default',
                                    /*opacity: 1,*/
                                    color: "#6eaf97" // 图表中各个图区域的颜色
                                }
                            }
                        },
                        name: '催化'
                    }
                ]
            }]
        });
    }
    test();
  • 相关阅读:
    codeforces 455C 并查集
    poj 3501 Escape from Enemy Territory 预处理+二分+bfs
    POJ 2110 Mountain Walking 二分+bfs
    poj1637 Sightseeing tour 混合图欧拉回路判定
    ubuntu禁用super(win)键
    win10 ubuntu双系统安装后无法引导进入ubuntu
    python2限制函数传入的关键字参数
    python限制函数执行时间
    python classmethod 和 staticmethod的区别
    centos sendmail 启动慢
  • 原文地址:https://www.cnblogs.com/wanan-01/p/9334952.html
Copyright © 2011-2022 走看看