web数据可视化(Echarts版)4-11雷达图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 22:54:57 修改

阅读量594

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-20 22:50:17 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130786942

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

echarts.js文件下载地址: Apache ECharts

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <script src="echarts.js"></script>
         <title></title>
     </head>
<body>
	<div id = "main" style="width: 800px; height: 800px;"></div>
	<script type="text/javascript">
	var myChart =echarts.init(document.getElementById("main"));
var option = {
    backgroundColor: 'rgba(204, 204, 204, 0.7)',
    title: {
        text: '各教育阶段男女人数统计',
        target: 'blank',
        top: '10',
        left: '160',
        textStyle: {
            color: 'blue',
            fontSize: 18
        }
    },
    legend: {
        show: true,
        icon: 'rect',
        top: '14',
        left: 430,
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 30,
        orient: 'horizontal',
        textStyle: { fontSize: 15, color: '#fff' },
        data: [
            {
                name: '男',
                icon: 'rect',
                textStyle: { color: 'rgba(51,0,255,1)', fontWeight: 'bold' }
            },
            {
                name: '女',
                icon: 'rect',
                textStyle: { color: 'rgba(255,0,0,1)', fontWeight: 'bold' }
            }
        ]
    },
    tooltip: {
        confine: true,
        enterable: true,
    },
    radar: [{
        center: ['50%', '56%'],
        radius: 160,
        startAngle: 90,
        name: {
            formatter: '{value}',
            textStyle: { fontSize: 15, color: '#000' }
        },
        nameGap: 2,
        splitNumber: 2,
        axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid' } },
        splitLine: { lineStyle: { color: '#fff', width: 1 } },
        splitArea: {
            show: true,
            areaStyle: { color: ['#abc', '#abc', '#abc', '#abc'] }
        },
        indicator: [
            { name: '高中', max: 9000000 }, { name: '专科', max: 5000000 },
            { name: '本科', max: 3500000 }, { name: '硕士', max: 800000 },
            { name: '博士', max: 20000 }
        ]
    }],
    series: [{
        name: '雷达图',
        type: 'radar',
        symbol: 'triangle',
        itemStyle: {
            normal: { lineStyle: { width: 1 }, opacity: 0.2 },
            emphasis: { lineStyle: { width: 5 }, opacity: 1 }
        },
        data: [
            {
                name: '女',
                value: [4400000, 2700000, 1600000, 380000, 7000],
                symbol: 'triangle',
                symbolSize: 5,
                itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },
                lineStyle: { normal: { color: 'red', width: 1, opacity: 0.9 } }
            },
            {
                name: '男',
                value: [4600000, 2700000, 1900000, 420000, 13000],
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: { normal: { borderColor: 'rgba(51,0,255,1)', borderWidth: 3 } },
                lineStyle: { normal: { color: 'blue', width: 1, opacity: 0.9 } }
            }
        ]
    }]
};

       myChart.setOption(option);
    </script>
</body>
</html>