ECharts绘制堆积柱状图

最新推荐文章于 2025-04-15 14:41:36 发布

殊迟

最新推荐文章于 2025-04-15 14:41:36 发布

阅读量2.4k

点赞数 4

本文链接：https://blog.youkuaiyun.com/weixin_56814370/article/details/123778053

版权

大数据专栏收录该内容

14 篇文章

订阅专栏

本文展示了一个使用ECharts库创建复杂柱状图的例子。该图表涵盖了多种数据源，包括直接访问、邮件营销等，并通过堆叠柱状图的形式展现一周内各渠道的流量变化。

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 700px; height: 500px;background-color: rgb(22, 214, 240);"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        var option = {
            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}
                }
            },
            xAxis:[
                {
                    type:'category',
                    data:['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis:[
                {type:'value'}
            ],
            series:[
            {
                        name:'直接访问',
                        type:'bar',
                        data:[320,332,301,334,390,330,320],
                    },
                    {
                        name:'邮件营销',
                        type:'bar',
                        stack:'广告',
                        data:[120,132,101,134,90,230,210]
                    },
                    {
                        name:'联盟广告',
                        type:'bar',
                        stack:'广告',
                        data:[220,182,191,234,290,330,310]
                    },
                    {
                        name:'视频广告',
                        type:'bar',
                        stack:'广告',
                        data:[150,232,202,154,190,330,310]
                    },
                    {
                        name:'搜索引擎',
                        type:'bar',
                        data:[862,1018,964,1026,1679,1600,1570]
                    },
                    {
                        name:'百度',
                        type:'bar',
                        with:5,
                        stack:'搜索引擎',
                        data:[620,732,701,734,1090,1130,1120]
                    },
                    {
                        name:'谷歌',
                        type:'bar',
                        stack:'搜索引擎',
                        data:[120,132,101,134,290,230,220]
                    },
                    {
                        name:'必应',
                        type:'bar',
                        stack:'搜索引擎',
                        data:[60,72,71,74,190,130,110]
                    },
                    {
                        name:'其他',
                        type:'bar',
                        stack:'搜索引擎',
                        data:[62,82,91,84,109,110,120]
                    },
            ],

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

</html>