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();
  • 相关阅读:
    delphi debug release区别是什么?
    Delphi异形窗口之PNG
    WebBrowser实现编辑网页
    父子窗体滚动条支持鼠标滚轮移动
    Com进程通信(Delphi2007)
    Android实例-Delphi开发蓝牙官方实例解析(XE10+小米2+小米5)
    教程-Close、Halt、terminate、ExitProcess的区别
    各国特种部队名称
    关于c#字典key不存在的测试
    关于scut使用WebService
  • 原文地址:https://www.cnblogs.com/wanan-01/p/9334952.html
Copyright © 2011-2022 走看看