文章目录


好文章 记得收藏+点赞+关注额 ！！！

---- Nick.Peng

一、Echarts图表制作准备工作

  • 引入Echarts.js
  • 分别为饼图和柱状图指定 Dom 大小
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>饼&柱混搭图表</title>
</head>
<body>
    <div>
	    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <!-- 1. 饼状图Dom -->
        <div id="main1" style="width: 500px;height:500px;"></div>
        <!-- 2. 柱状图Dom -->
        <div id="main2" style="width: 500px;height:420px;"></div>
    </div>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</body>
</html>

二、给饼图和柱状图增加配置项

  • 分别对饼图和柱状图进行配置
    <script type="text/javascript">
        // 指定饼状图图表的配置项和数据
        var option1 = {
            // 图表标题
            title : {
                text: '某站点用户访问来源',  // 标题内容
                subtext: '纯属虚构',
                x:'center'                 // 居中显示
            },
            // 鼠标触发提示
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"  // 展示格式
            },
            // 图例
            legend: {
                orient : 'vertical',    // 垂直显示
                x : 'left',             // 显示位置--左上
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', 225],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };

        // 指定柱状图图表的配置项和数据
        var option2 = {
            tooltip : {
                trigger: 'axis',
                axisPointer : { // 指示器类型，shadow为阴影指示器
                    type: 'shadow'
                }
            },
            legend: {
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            // 工具栏组件
            toolbox: {
                show : true,
                orient : 'vertical',
                top : 'center',
                feature : {
                    mark : {show: true},
                    // 启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},     // 是否支持配置项还原
                    saveAsImage : {show: true}  // 保存图片
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitArea : {show : true}
                }
            ],
            grid: {
                x2:40
            },
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    stack: '总量',
                    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, 201, 154, 190, 330, 410]
                },
                {
                    name:'搜索引擎',
                    type:'bar',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
</script>

三、分别画饼图和柱状图

  • 初始化两个 echarts 实例
  • 分别按照指定配置项展示图表
    <script>
		// 对饼状图dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        myChart1.setOption(option1);    // 按option1展示myChart1图表

        // 对柱状图dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption(option2);
</script>

四、配置两个图表样式 ------ 显示在一行

  • 默认两个图表垂直方向显示，添加float属性，让其显示在一行
    <head>
    <meta charset="utf-8">
    <title>饼&柱混合图</title>
    <style>
        /* 配置样式让两个图表显示在一行 */
        div{float: left}
    </style>
</head>

五、实现多图联动

  • 使用 connect 方法将 myChart1 和 myChart2 进行关联，实现多图联动
    <script>
		......
		// 将myChart1和myChart2关联起来
        echarts.connect([myChart1, myChart2])
        ......
</script>
  • 多图联通效果如下：
    在这里插入图片描述

六、完整源代码

  • 可作为模板，使用时只需要修改其中的配置项即可

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>饼&柱混搭图表</title>
    <style>
        /* 配置样式让两个图表显示在一行 */
        div{float: left}
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div>
        <!-- 饼状图Dom -->
        <div id="main1" style="width: 500px;height:500px;"></div>
        <!-- 柱状图Dom -->
        <div id="main2" style="width: 500px;height:420px;"></div>
    </div>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
    <script type="text/javascript">
        // 指定饼状图图表的配置项和数据
        var option1 = {
            // 图表标题
            title : {
                text: '某站点用户访问来源',  // 标题内容
                subtext: '纯属虚构',
                x:'center'                 // 居中显示
            },
            // 鼠标触发提示
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"  // 展示格式
            },
            // 图例
            legend: {
                orient : 'vertical',    // 垂直显示
                x : 'left',             // 显示位置--左上
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', 225],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };

        // 指定柱状图图表的配置项和数据
        var option2 = {
            tooltip : {
                trigger: 'axis',
                axisPointer : { // 指示器类型，shadow为阴影指示器
                    type: 'shadow'
                }
            },
            legend: {
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            // 工具栏组件
            toolbox: {
                show : true,
                orient : 'vertical',
                top : 'center',
                feature : {
                    mark : {show: true},
                    // 启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},     // 是否支持配置项还原
                    saveAsImage : {show: true}  // 保存图片
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitArea : {show : true}
                }
            ],
            grid: {
                x2:40
            },
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    stack: '总量',
                    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, 201, 154, 190, 330, 410]
                },
                {
                    name:'搜索引擎',
                    type:'bar',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // 对饼状图dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        myChart1.setOption(option1);    // 按option1展示myChart1图表

        // 对柱状图dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption(option2);

        // 将myChart1和myChart2关联起来
        echarts.connect([myChart1, myChart2])

        // 配置自动适应Windows窗口大小
        setTimeout(function (){
            window.onresize = function () {
                myChart.resize();
                myChart2.resize();
            }
        },200)

    </script>
</body>
</html>

完结。。。

Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

OpenLoong项目通过技术监督委员会（TOC）评审

OpenLoong项目通过技术监督委员会（TOC）评审

avatar 开放原子开发者工作坊

开发者谈开源：KWDB开源数据库的未来路径与生态构建实践

开发者谈开源：KWDB开源数据库的未来路径与生态构建实践

avatar 开放原子开发者工作坊

开发者谈开源：洞悉协作创新背后的机遇与挑战

近日，在2024开放原子开发者大会暨首届开源技术学术大会开幕式上，开放原子开源基金会与openKylin、EasyAda、KWDB开源项目举行捐赠签约仪式。 一场捐赠签约仪式，让三个开源项目及其背后的开发者们受到瞩目。本次，我们与“龘”（EasyAda）核心维护者王伶卓开启了对话。

avatar 开放原子开发者工作坊