数据可视化echarts堆叠图自定义坐标轴

在代码里下毒

已于 2024-06-05 08:52:55 修改

阅读量509

点赞数

文章标签： visual studio code javascript 数据分析

于 2022-03-24 15:57:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46011557/article/details/123713448

版权

本文通过ECharts库展示了会员年龄段分布的柱状图，对比了男性和女性在不同年龄段的占比，用以呈现清晰的数据趋势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '会员年龄段分布情况',
                backgroundColor: '#ccff00',
                textStyle: {
                    color: 'red',
                },
               
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow' 
                }
            },
            legend: {
                data: ['男', '女']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['20~29岁', '30~39岁', '40~49岁']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    max:'12',
                }
            ],
            series: [
                {
                    barWidth:'66',
                    name: '男',
                    type: 'bar',
                    stack: '111',
                    data: [4, 0, 1],
                    color:'#4169E1',
                    label:{
                        show:true
                    },
                    
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '111', 
                    data: [6, 3, 0],
                    color:'#ff7f50',
                    label:{
                        show:true
                    },
                },
            ]
        };
        myChart.setOption(option); 
    </script>
</body>

</html>