Echarts雷達圖實例

本文轉載自查看原文 2020-08-28 08:23 2162

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/echarts.min.js"></script>
</head>

<body>
    <div id="a" style="width: 500px; height: 500px; background-color: #11234F;"></div>

</body>
<script>
    var myChart = echarts.init(document.getElementById('a'))
    option = {
        title: {
            text: "執法異常問題",
            textStyle:{
                color:'#fff'
            }
        },
        tooltip: {},
       
        radar: [{
            //這是雷達圖的大小
            radius:'50%',
            //圖外名稱
            name:{
                formatter:'{value}',
                // 字體樣式
                textStyle:{
                    fontSize:14,
                    color:'#fff'
                }
            },
            indicator: [{
                name: "異常問題1",
                max: 6500
            }, {
                name: "異常問題6",
                max: 16000
            }, {
                name: "異常問題5",
                max: 30000
            }, {
                name: "異常問題4",
                max: 38000
            }, {
                name: "異常問題3",
                max: 52000
            }, {
                name: "異常問題2",
                max: 25000
            }],
            //文字與圖的距離
            nameGap: 20,
            //坐標軸線的設置
            axisLine: {
                show: true,
                lineStyle:{
                    color:'#FFF',

                },
                
            },
            //指示器軸的分割段數
            splitNumber: 5,
            axisTick: {
                color:'#365079',
                
            },
            axisLabel: {},
            splitLine: {
                lineStyle: {
                    shadowBlur: 15,
                    shadowColor: null
                }
            },
            //分割區域是否顯示
            splitArea: {
                //分割區域的樣式
                areaStyle:{
                    color: ['#fff', '#fff', '#fff', '#c3c3c3','#1F345E'],
                    shadowColor: 'rgba(0, 100, 0, 0.3)',
                    opacity: 0.2,
                }
            }
        }],
        series: [{
            name: "執法異常問題",
            type: "radar",
            data: [{
                value: [4300, 10000, 18000, 15000, 10000, 19990],
                name: "執法異常問題",
                itemStyle: { // 單個拐點標志的樣式設置。
                normal: {
                    borderColor: '#FFB9B0',
                    // 拐點的描邊顏色。[ default: '#000' ]
                    borderWidth: 4,
                    // 拐點的描邊寬度，默認不描邊。[ default: 0 ]
                }
            },
            lineStyle: { // 單項線條樣式。
                normal: {
                    opacity: 0.5 // 圖形透明度
                }
            },
            areaStyle: { // 單項區域填充樣式
                normal: {
                    // color: 'red', // 填充的顏色。[ default: "#000" ]
                    //不透明
                    opacity:1,
                    //數據陰影
                    shadowColor:'#2c3F56',
                    // 陰影長度
                    shadowBlur:3,
                    // 陰影偏移
                    shadowOffsetY:2,
                    shadowoffsetX:5,
                    //填充區域顏色漸變
                    color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 1,
                    [
                        // 柱子0%的顏色
                        {offset: 0, color: '#7EEE5c'},
                        //柱子50%的顏色
                        {offset: 0.5, color: '#89EF54'},
                        //柱子100%的顏色
                        {offset: 1, color: '#CFF91E'}
                    ]
                )
                }
            }
             }],
            itemStyle: { // 折線拐點標志的樣式。
                normal: { // 普通狀態時的樣式
                    lineStyle: {
                        width:0
                    },
                    opacity: 0.3
                },
                emphasis: { // 高亮時的樣式
                lineStyle: {
                },
                opacity: 1
            }
            },
        }]
    }
myChart.setOption(option)

</script>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ECharts雷達圖 echarts雷達圖 Echarts-雷達圖 Echarts - 雷達圖（用過的屬性） JS Echarts之雷達圖的使用 echarts雷達圖怎么給每個拐點設置不同的顏色 echarts雷達圖大小自適應 ECharts雷達圖詳細配置說明 ECharts雷達圖詳細配置說明關於ECharts的使用總結——餅圖、雷達圖、儀表盤

Echarts雷達圖 實例

免責聲明！

Echarts雷達圖實例