当前位置： 文江博客话题详情

请问echarts怎么把柱状图和饼状图放在一个图表中啊？

发布于 2022-01-07 05:31:45 字数 55 浏览 856 评论 4

请问echarts怎么把柱状图和饼状图放在一个图表中啊？就是我想在柱状图中再嵌入饼状图能做到吗?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

乞讨 2022-01-07 20:01:55

加拿大的官方语言有两种：英语和法语。其国民来自五洲四洋，所以世界上的各种语言，加拿大这里差不多都有。以下案例，依据加拿大 2016 的人口普查数据，使用 Echars， 将一个柱状 (Histogram) 图 和 两个环形 (Doughnut) 图 (饼图也一样) 放到一起，创建了网页。点击底部的标题 "Top ten languages in Canada"， 可以打开数据源页面。

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <style>
	   #mapleLeaf{
			display:none;
		}
		#myCanvas{
			position:absolute;
			left:755px;
			top:150px;
			background-color:#FFC;
		}
	   #title{
		   position:absolute;
		   left:316px;
		   top:200px;
		   text-align:center;
		   font-family:Georgia, "Times New Roman", Times, serif;
		   font-weight:bold;
	   }
	   #container1{
		   position:absolute;
		   left:0px;
		   top:0px;
		   z-index:2;
	   }
	   #container2{
		   position:absolute;
		   left:453px;
		   top:0px;
		   z-index:2;
		   border-right:groove;
	   }
	   #container3{
		   position:absolute;
		   background-color:#9FF;
		   left:0px;
		   top:270px;
		   z-index:3;
		   border:groove;
	border-bottom-right-radius:25px;
	   }
	   #language{
		   position:absolute;
		   left:330px;
		   top:0px;
		   width:250px;
	   }
	   </style>
   </head>
   <body>
   <canvas id="myCanvas" width="150" height="120" >  
   <p>Your browserdoes not support the canvas element!</p>  
</canvas> 
<canvas id="mapleLeaf" width="490" height="370" ></canvas> 
   	<div id="container1" style="height:300px; width:450px"></div>
    <div id="container2" style="height:300px; width:450px"></div>
    <div id="container3" style="height: 300px; width: 900px"></div>
    <div id="title">Population with a mother tongue<br>other than English or french<br>Census 2016</div>
    <img id="language" src="http://p3.pstatp.com/large/b0d00012d7e7db5a01f">
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
      
       <script type="text/javascript">

////////////////
var dom = document.getElementById("container1");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = 'Ring';

option = {
    title:{
        text:'Mother Tongue',
		subtext: 'Number (in 10K)',
        x : 'center'
    },
    color:['#ff7f50','#0F0','#00F','#F0F','#000','#7faad4','#8a2be2','#F00','#7fff00','#8b0000'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['Russian', 'German', 'Bosnian', 'Philipino', 'Arabic', 'Spanish', 'Indo-Pakistani','Chinese']
    },
    series: [
        {
            name:'Mother Tongue:',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:19, name:'Russian'},
                {value:32, name:'German'},
                {value:21, name:'Bosnian'},
                {value:43, name:'Philipino'},
                {value:42, name:'Arabic'},
				{value:46, name:'Spanish'},
                {value:106, name:'Indo-Pakistani'},
                {value:125, name:'Chinese'}
            ]
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
//////////////////////////////////////////////
////////////////
var dom = document.getElementById("container2");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = 'Ring';

option = {
    title:{
        text:'Speaking At Home',
		subtext: 'Number (in 10K)',
        x : 'center'
    },
    color:['#ff7f50','#0F0','#00F','#F0F','#000','#7faad4','#8a2be2','#F00','#7fff00','#8b0000'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
	/*
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['Russian', 'German', 'Bosnian', 'Philipino', 'Arabic', 'Spanish', 'Indo-Pakistani','Chinese']
    },
	*/
    series: [
        {
            name:'Speaking at Home',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:12, name:'Russian'},
                {value:12, name:'German'},
                {value:14, name:'Bosnian'},
                {value:21, name:'Philipino'},
                {value:22, name:'Arabic'},
				{value:26, name:'Spanish'},
                {value:68, name:'Indo-Pakistani'},
                {value:91, name:'Chinese'}
            ]
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
//////////////////////////////
var dom = document.getElementById("container3");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
	title: {
                text: 'Top ten languages in Canada',
				link:'http://blog.sina.com.cn/s/blog_4fe2d6800102woqe.html',
				y:'bottom',
            	x:'center'

            },
	color:['#F00','#0F0','#00F','#FF0','#000','#7fffd4','#8a2be2','#ff7f50','#7fff00','#8b0000'],
		legend: {
        data:['Mather tongue', 'Speaking at homne'],
		align: 'left',
        left: 10
	
    },
	
	tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        },
		orient:'vertical'
    },
		


    yAxis: {
        type: 'category',
        data: ['Russian', 'German', 'Bosnian', 'Pilipino', 'Arabic', 'Spanish', 'Indo-Pakistani','Chinese','French','English','Total']
    },
    xAxis: [

        {
            type : 'value',
			name : '10K'
        },

    ],
    series : [
        {
            name:'Mather tongue',
            type:'bar',
            data: [19,32,21,43,42,46,106,125,717,1946,3097],
        	type: 'bar'
        },
        {
            name:'Speaking at homne',
            type:'bar',
            data: [12,12,14,21,22,26,68,91,694,2216,3176]
        }
   ]
};

if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

function drawMapleLeaf(){
var g = document.getElementById("mapleLeaf").getContext("2d");
g.fillStyle="red";

g.beginPath();
g.moveTo(255,6);
g.bezierCurveTo(296,80,301,75,334,53);
g.bezierCurveTo(298,206,320,173,370,114);
g.bezierCurveTo(390,144,396,144,442,132);
g.bezierCurveTo(424,194,428,194,454,204);
g.bezierCurveTo(330,292,344,296,360,315);
g.lineTo(260,302);
g.lineTo(263,394);
g.lineTo(247,394);
g.lineTo(250,302);
g.lineTo(150,315);
g.bezierCurveTo(178,290,174,290,56,204);
g.bezierCurveTo(83,201,87,189,68,132);
g.bezierCurveTo(126,142,122,142,143,114);
g.bezierCurveTo(198,189,210,189,176,53);
g.bezierCurveTo(216,76,214,80,255,6);
g.fill();
}
drawMapleLeaf();
g = document.getElementById("myCanvas").getContext("2d");
img = document.getElementById("mapleLeaf")

g.drawImage(img, 0,0,150,120);

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

 

回复
风苍溪 2022-01-07 20:01:44

有一个官方案例（share data set），倘若将折线(line)改成柱状(bar), 也可以显示楼主所期望的效果：
 

 

回复
岁月打碎记忆 2022-01-07 19:51:23

直方图加饼图(histogram + pie) 案例： 2011 全球人口众多国家的人口比较。

<html> 
<head>
    <meta charset="utf-8">
    <title>柱状图 + 饼图</title>
<script src="http://echarts.baidu.com/dist/echarts.js"> </script> 
<style>
#main{
	position:absolute;
	left:0px;
	top:0px;
	border:groove #0F3;
	width:800px;
	height:600px;
	z-index:1;
}
#main1{
	position:absolute;
	left:450px;
	width:300px;
	height:300px;
	z-index:2;
}

</style>

</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px   "></div>
    <div id="main1" style="height:400px   "></div>

</body>
<script type="text/javascript">
	  var myChart = echarts.init(document.getElementById('main1'));
option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 131744
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'全球人口统计',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:18203, name:'巴西'},
                {value:23489, name:'印尼'},
                {value:29034, name:'美国'},
                {value:104970, name:'印度'},
                {value:131744, name:'中国'}
            ]
        }
    ]
};                
   // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
				'echarts/chart/line' // 使用曲线状图就加载曲线模块，按需加载
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main')); 
       option = {
    title : {
        text: '全球人口统计 2011',
        subtext: '把柱状图和饼状图放在一个图表中',
    },
    tooltip : {
        trigger: 'axis'
    },
   
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'value',
            boundaryGap : [0, 0.01]
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ['巴西','印尼','美国','印度','中国'],
            axisLabel: {
               textStyle: {
               color: '#00F',
               fontSize:'14',
			   fontWeight:'bold'
                        },
                    },                    
        }			
    ],
    series : [
        {
            name:'2011年',
            type:'bar',
	
            itemStyle: {
                normal: {
                    color: 'tomato',
                    barBorderColor: 'tomato',
                    barBorderWidth: 6,
                    barBorderRadius:0,
                    label : {
                        show: true, position: 'right'
                    }
                }
            },
            data:[18203, 23489, 29034, 104970, 131744]
        }
    ]
};                                
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
</html>

 

回复
爱的故事 2022-01-07 18:34:15

 

  1. 通过 CSS 的定义，将 饼图、直方图、鼠年、红心 安排到不同元素('main','main1','rat','can')之中。
  2. 用 CSS 不同的属性   z-index 之值 (比如 1，2，... 10)  给各个元素安排不同层面。比如红心在最顶层('can' 的 z-index 为 3)，它得以压盖 'main1'及所有元素。而 直方图 ('main' 的 z-index 为 1)，得以被所有其它元素所掩盖。
  3. 用 CSS 的 属性：position, 确定各个元素的位置。
  4. 直方图和饼图也可以不在同一层，可以重叠，以达到"镶嵌"的效果。
<html> 
<head>
    <meta charset="utf-8">
    <title>饼图+直方图</title>
<script src="http://echarts.baidu.com/dist/echarts.js"> </script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script> 
<style>
#main1{
	border:groove #0F3;
	z-index:2;
}
#main{
	border:groove #0FF;
	z-index:2;
}
#rat{
	position:absolute;
	left:0px;
	top:180px;
	z-index:1;
}
#can{
	position:absolute;
	left:300px;
	top:30px;
	z-index:3;
}
</style>
<script>
function drawRat(){
var g = document.getElementById("rat").getContext("2d");
g.save();
g.translate(10,-15);

g.strokeStyle='grey';
g.lineWidth=3;
g.beginPath();
g.moveTo(202,87);
g.quadraticCurveTo(174,58, 173,  17);
g.stroke();  //须子

g.beginPath();
g.moveTo(202,84);
g.quadraticCurveTo(188, 63, 194,  34);
g.stroke(); //须子

g.beginPath();
g.moveTo(203,82);
g.quadraticCurveTo(200, 63, 212,  47);
g.stroke(); //须子

g.beginPath();
g.moveTo(155,152);
g.quadraticCurveTo(68,150, 101, 98);
g.quadraticCurveTo(130,78,162,134);
g.closePath();
g.fillStyle='#A0522D';
g.fill();  //耳朵

g.beginPath();
g.moveTo(208,83);
g.quadraticCurveTo(144, 62, 127, 103);
g.quadraticCurveTo(119,123, 131, 140);
g.quadraticCurveTo(198,172, 212,  96);
g.closePath();
g.fillStyle='#8B4513';
g.fill();  //头

 g.font="BOLD 23px ARIAL";
 g.fillStyle='red';
 g.fillText("2020", 113,200);

g.beginPath();
g.moveTo(160,100);
g.quadraticCurveTo(162, 107, 169, 108);
g.quadraticCurveTo(172,  96, 160, 100);
g.fillStyle="#000";
g.fill();  //眼

g.strokeStyle='brown';
g.beginPath();
g.moveTo(107,242);
g.quadraticCurveTo(147,279,207,270);
g.stroke();

g.beginPath();
g.moveTo(129,251);
g.quadraticCurveTo(153,269,205,265);
g.stroke();
g.beginPath();
g.moveTo(142,252);
g.quadraticCurveTo(161,263,205,259);
g.lineTo(207,270);
g.stroke();
for( i=0;i<3;i++){
g.beginPath();
g.moveTo(0,239 + i*6);
g.lineTo(300,239 + i*6);
g.stroke();
}

for (i=0;i<3;i++){
  g.beginPath();
  g.arc(139,194,58 - i*6,0,Math.PI*2);
  if (i==2){
	g.fillStyle='#8B4513';
	g.fill();
  }
  g.stroke();
 }
 
g.save();  //卡子
g.translate( 135,246);
for (i=0;i<2;i++){
g.beginPath();
g.rect(-4,-8, 16-i*8, 16);
g.fillStyle='#FFF';
g.fill();
g.stroke();
}
g.restore(); 

g.save(); //脖扣
g.translate( 160,144);
for(i=0;i<2;i++){
g.beginPath();
g.rect(-4,-8, 16-i*8, 16);
g.fillStyle='#FFF';
g.fill();
g.stroke();
}
g.restore();

g.save(); //嘴
g.translate(204,88);
g.rotate(Math.PI/180*65);
for(i=0;i<2;i++){
g.beginPath();
g.rect(-4,-8, 16-i*8 , 16);
g.fillStyle='#FFF';
g.fill();
g.stroke();
}
g.restore();

 g.font="BOLD 23px ARIAL";
 g.fillStyle='white';
 g.fillText("2020", 115,200);
 g.fillStyle='blue';
 g.fillText("YEAR", 200,200);
 g.fillText("OF RAT", 200,225);
g.restore();
}

function drawHeart(){
	var canvas = document.getElementById('can'), context;
	context = canvas.getContext('2d');
	context.fillStyle = 'red';
	context.beginPath();
	context.moveTo(75,40);
	context.bezierCurveTo(75,37,70,25,50,25);
	context.bezierCurveTo(20,25,20,62.5,20,62.5);
	context.bezierCurveTo(20,80,40,102,75,120);
	context.bezierCurveTo(110,102,130,80,130,62.5);
	context.bezierCurveTo(130,62.5,130,25,100,25);
	context.bezierCurveTo(85,25,75,37,75,40);
	context.fill();
}
</script>
</head>
<body onLoad="drawRat(),drawHeart()">
<canvas id="can" width="200" height="200"></canvas>
<canvas id='rat' width="400" height="260"></canvas>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="height:400px   "></div>
 <div id="main" style="height:400px   "></div>
</body>
<script type="text/javascript">
	  var myChart = echarts.init(document.getElementById('main1'));
option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
                    

   // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
require.config({
  paths: {
    echarts: 'http://echarts.baidu.com/build/dist'
  }
});
// 使用
require(
  [
    'echarts',
    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
    'echarts/chart/line'
  ],
  function (ec) {
    // 基于准备好的dom，初始化echarts图表
    var myChart = ec.init(document.getElementById('main')); 
	
	var curInt = null;
	
//设置数据
    var option = {
      //设置标题
      title:{
        text:'销量图',
        subtext:'纯属捏造，如有雷同，人品爆发。'
      },
      //设置提示
      tooltip: {
        show: true
      },
      //设置图例
      legend: {
        data:['销量']
      },
      //设置坐标轴
      xAxis : [
        {
          type : 'category',
          data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
        }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      //设置数据
      series : [
        //条形图
        {
          "name":"销量",
          "type":"bar",
          "data":[5, 20, 38, 10, 24, 20,24,32],
		      itemStyle:{
      			color: function(params){
        		var key = params.dataIndex;
        		if(key === curInt){
          			return '#E062AE';
        		}else{
          			return '#37A2DA';
        }
      }
    },
        },
        //折线图
         {
          "name":"销量",
          "type":"line",
          "data":[5, 20, 38, 10, 24, 20,24,32],
           //绘制平均线
           markLine : {
             data : [
               {type : 'average', name: '平均值'}
             ]
           },
          //绘制最高最低点
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        }
      ]
    };
	
	myChart.on('click', function (params) {
		
		curInt = params.dataIndex;
		myChart.setOption(option);
		});

    // 为echarts对象加载数据 
    myChart.setOption(option); 
  }
);                    
    </script>
</html>

 

回复
~没有更多了~

关于作者

梅窗月明清似水

暂无简介

0 文章
0 评论
499 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

小瓶盖

文章 0 评论 0

wxsp_Ukbq8xGR

文章 0 评论 0

1638627670

文章 0 评论 0

仅一夜美梦

文章 0 评论 0

夜访吸血鬼

文章 0 评论 0

近卫軍团

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文