Echarts图表混搭之柱状图与饼图混搭图表

最新推荐文章于 2024-08-28 20:06:37 发布
最新推荐文章于 2024-08-28 20:06:37 发布
阅读量1.3k 收藏 13
点赞数 20
文章标签： echarts 信息可视化 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wqqstudy/article/details/139110844
版权

在ECharts的图表混搭中，一个图表包含唯一图例、工具箱、数据区域缩放 模块、值域漫游模块和一个直角坐标系，直角坐标系可包含一条或多条类目轴线、一条或多条值轴线，类目轴线和值轴线最多上下左右共4条。 ECharts中支持任意图表的混搭，其中常见的图表混搭有折线图与柱状图的混搭、折线图与饼状图的混搭等。

利用ECharts各图表的在线构建次数、各图表组件的使用次数、各版本下载和各主题下载情况的数据绘制柱状图与饼图混搭图表

由图可知，由左边的两个柱状图和右边的两个饼图共同组成了一个混搭的图表。左边的两个柱状图分别表示在线构建的各种不同图表的次数和各图表组件的使用次数。 从左上角的柱状图中可以看出，折线图、柱状图和饼图3种图表最为常用；从左下角的柱状图中可以看出，在各种图表组件中，使用较多的图表组件分别有标题组件（title）、提示组件（tooltip）、图例组件（legend）和直角坐标系组件（grid）。 右边的两个饼图分别表示各种ECharts版本的下载情况的统计分析和各种主题（Themes）下载情况的统计分析

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 引入 ECharts 文件 -->

    <script src="echarts.js"></script>

    <title>5-2 柱状图与饼图混搭图</title>

</head>

<body>

    <div id="main" style="width: 880px; height: 750px"></div>

    <script type="text/javascript">

        //基于准备好的dom，初始化ECharts图表

        var myChart = echarts.init(document.getElementById("main"));

        var builderJson = {

            "all": 10887,

            "charts": {  //各ECharts图表的json数据

                "地理坐标图": 3237, "路径图": 2164, "柱状图": 7561, "折线图": 7778,

                "饼图": 7355, "散点图": 2405, "K线图": 1842, "雷达图": 2090,

                "热力图": 1762, "矩形树图": 1593, "关系图": 2060, "盒须图": 1537,

                "平行坐标系": 1908, "仪表盘图": 2107, "漏斗图": 1692, "桑基图": 1568

            },

            "components": {  //各ECharts组件的json数据

                "地理坐标系组件": 2788, "标题组件": 9575, "图例组件": 9400,

                "提示组件": 9466, "直角坐标系组件": 9266, "图表标注组件": 3419,

                "图表标线组件": 2984, "时间线组件": 2739, "区域缩放组件": 2744,

                "视觉映射组件": 2466, "工具框组件": 3034, "极坐标系组件": 1945

            },

            //"ie": 9743没效果

        };

        var downloadJson = {  //各ECharts版本下载的json数据

            "完整版": 17365, "精简版": 4079,

            "常用版": 6929, "源代码版": 14890

        };

        var themeJson = {  //各ECharts下载的主题json数据

            "黑色主题": 1594, "信息主题": 925, "明亮主题": 1608,

            "罗马主题": 721, "马卡龙主题": 2179, "复古主题": 1982

        };

        var waterMarkText = 'ECharts';  //设置水印的字符

        var canvas = document.createElement('canvas');

        var ctx = canvas.getContext('2d');

        canvas.width = canvas.height = 100;

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.globalAlpha = 0.1;

        ctx.font = '20px Microsoft Yahei';  //设置水印文字的字体

        ctx.translate(50, 50);  //设置水印文字的偏转值

        ctx.rotate(-Math.PI / 4);  //设置水印旋转的角度

        ctx.fillText(waterMarkText, 0, 0);  //设置填充水印

        var option = {  //指定图表的配置项和数据

            backgroundColor: { type: 'pattern', image: canvas, repeat: 'repeat' },

            tooltip: {},

            title: [{  //配置标题组件

                text: '在线构建次数',

                subtext: '总计 ' + Object.keys(builderJson.charts).reduce(function (all, key) {

                    return all + builderJson.charts[key];

                }, 0),

                x: '25%',

                textAlign: 'center'

            }, {  //配置标题组件

                text: '各图表组件的使用次数',

                subtext: '总计 ' + Object.keys(builderJson.components).reduce(function (all, key) {

                    return all + builderJson.components[key];

                }, 0),

                x: '25%', y: '53%',

                textAlign: 'center'

            }, {

                text: '各版本下载',

                subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {

                    return all + downloadJson[key];

                }, 0),

                x: '75%', textAlign: 'center'

            }, {

                text: '主题下载',

                subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {

                    return all + themeJson[key];

                }, 0),

                x: '75%', y: '50%',

                textAlign: 'center'

            }],

            grid: [{  //配置网格组件

                top: 50, width: '50%', bottom: '50%',

                left: 10, containLabel: true

            }, {

                top: '55%', width: '50%',

                bottom: 0, top:'60%', left: 10, containLabel: true

            }],

            xAxis: [{  //配置x轴坐标系

                type: 'value',

                max: builderJson.all,

                splitLine: { show: false }

            }, {

                type: 'value',

                max: builderJson.all,

                gridIndex: 1,

                splitLine: { show: false }

            }],

            yAxis: [{  //配置y轴坐标系

                type: 'category',

                data: Object.keys(builderJson.charts),

                axisLabel: { interval: 0, rotate: 20 },

                splitLine: { show: false }

            }, {

                gridIndex: 1,

                type: 'category',

                data: Object.keys(builderJson.components),

                axisLabel: { interval: 0, rotate: 20 },

                splitLine: { show: false }

            }],

            series: [{  //配置数据系列

                type: 'bar', stack: 'chart', z: 3,

                label: { normal: { position: 'right', show: true } },

                data: Object.keys(builderJson.charts).map(function (key) {

                    return builderJson.charts[key];

                })

            }, {

                type: 'bar', stack: 'chart', silent: true,

                itemStyle: { normal: { color: '#eee' } },

                data: Object.keys(builderJson.charts).map(function (key) {

                    return builderJson.all - builderJson.charts[key];

                })

            }, {

                type: 'bar', stack: 'component', xAxisIndex: 1, yAxisIndex: 1, z: 3,

                label: { normal: { position: 'right', show: true } },

                data: Object.keys(builderJson.components).map(function (key) {

                    return builderJson.components[key];

                })

            }, {

                type: 'bar', stack: 'component', silent: true,

                xAxisIndex: 1, yAxisIndex: 1,

                itemStyle: { normal: { color: '#eee' } },

                data: Object.keys(builderJson.components).map(function (key) {

                    return builderJson.all - builderJson.components[key];

                })

            }, {

                type: 'pie', radius: [0, '30%'], center: ['75%', '25%'],

                data: Object.keys(downloadJson).map(function (key) {

                    return {

                        name: key.replace('.js', ''),

                        value: downloadJson[key]

                    }

                })

            }, {

                type: 'pie', radius: [0, '30%'], center: ['75%', '75%'],

                data: Object.keys(themeJson).map(function (key) {

                    return {

                        name: key.replace('.js', ''),

                        value: themeJson[key]

                    }

                })

            }]

        };

        myChart.setOption(option);  //为echarts对象加载数据

    </script>

   

</body>

</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 ECharts 文件 -->
	<script src="echarts.js"></script>
	<title>5-2 柱状图与饼图混搭图</title>
</head>
<body>
    <div id="main" style="width: 880px; height: 750px"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		var builderJson = {
			"all": 10887,
			"charts": {  //各ECharts图表的json数据
				"地理坐标图": 3237, "路径图": 2164, "柱状图": 7561, "折线图": 7778,
				"饼图": 7355, "散点图": 2405, "K线图": 1842, "雷达图": 2090,
				"热力图": 1762, "矩形树图": 1593, "关系图": 2060, "盒须图": 1537,
				"平行坐标系": 1908, "仪表盘图": 2107, "漏斗图": 1692, "桑基图": 1568
			},
			"components": {  //各ECharts组件的json数据
				"地理坐标系组件": 2788, "标题组件": 9575, "图例组件": 9400,
				"提示组件": 9466, "直角坐标系组件": 9266, "图表标注组件": 3419,
				"图表标线组件": 2984, "时间线组件": 2739, "区域缩放组件": 2744,
				"视觉映射组件": 2466, "工具框组件": 3034, "极坐标系组件": 1945
			},
			//"ie": 9743没效果
		};
		var downloadJson = {  //各ECharts版本下载的json数据
			"完整版": 17365, "精简版": 4079,
			"常用版": 6929, "源代码版": 14890
		};
		var themeJson = {  //各ECharts下载的主题json数据
			"黑色主题": 1594, "信息主题": 925, "明亮主题": 1608,
			"罗马主题": 721, "马卡龙主题": 2179, "复古主题": 1982
		};
		var waterMarkText = 'ECharts';  //设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.globalAlpha = 0.1;
		ctx.font = '20px Microsoft Yahei';  //设置水印文字的字体
		ctx.translate(50, 50);  //设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4);  //设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0);  //设置填充水印
		var option = {  //指定图表的配置项和数据
			backgroundColor: { type: 'pattern', image: canvas, repeat: 'repeat' },
			tooltip: {},
			title: [{  //配置标题组件
				text: '在线构建次数',
				subtext: '总计 ' + Object.keys(builderJson.charts).reduce(function (all, key) {
					return all + builderJson.charts[key];
				}, 0),
				x: '25%',
				textAlign: 'center'
			}, {  //配置标题组件
				text: '各图表组件的使用次数',
				subtext: '总计 ' + Object.keys(builderJson.components).reduce(function (all, key) {
					return all + builderJson.components[key];
				}, 0),
				x: '25%', y: '53%',
				textAlign: 'center'
			}, {
				text: '各版本下载',
				subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
					return all + downloadJson[key];
				}, 0),
				x: '75%', textAlign: 'center'
			}, {
				text: '主题下载',
				subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
					return all + themeJson[key];
				}, 0),
				x: '75%', y: '50%',
				textAlign: 'center'
			}],
			grid: [{  //配置网格组件
				top: 50, width: '50%', bottom: '50%',
				left: 10, containLabel: true
			}, {
				top: '55%', width: '50%',
				bottom: 0, top:'60%', left: 10, containLabel: true
			}],
			xAxis: [{  //配置x轴坐标系
				type: 'value',
				max: builderJson.all,
				splitLine: { show: false }
			}, {
				type: 'value',
				max: builderJson.all,
				gridIndex: 1,
				splitLine: { show: false }
			}],
			yAxis: [{  //配置y轴坐标系
				type: 'category',
				data: Object.keys(builderJson.charts),
				axisLabel: { interval: 0, rotate: 20 },
				splitLine: { show: false }
			}, {
				gridIndex: 1,
				type: 'category',
				data: Object.keys(builderJson.components),
				axisLabel: { interval: 0, rotate: 20 },
				splitLine: { show: false }
			}],
			series: [{  //配置数据系列
				type: 'bar', stack: 'chart', z: 3,
				label: { normal: { position: 'right', show: true } },
				data: Object.keys(builderJson.charts).map(function (key) {
					return builderJson.charts[key];
				})
			}, {
				type: 'bar', stack: 'chart', silent: true,
				itemStyle: { normal: { color: '#eee' } },
				data: Object.keys(builderJson.charts).map(function (key) {
					return builderJson.all - builderJson.charts[key];
				})
			}, {
				type: 'bar', stack: 'component', xAxisIndex: 1, yAxisIndex: 1, z: 3,
				label: { normal: { position: 'right', show: true } },
				data: Object.keys(builderJson.components).map(function (key) {
					return builderJson.components[key];
				})
			}, {
				type: 'bar', stack: 'component', silent: true,
				xAxisIndex: 1, yAxisIndex: 1,
				itemStyle: { normal: { color: '#eee' } },
				data: Object.keys(builderJson.components).map(function (key) {
					return builderJson.all - builderJson.components[key];
				})
			}, {
				type: 'pie', radius: [0, '30%'], center: ['75%', '25%'],
				data: Object.keys(downloadJson).map(function (key) {
					return {
						name: key.replace('.js', ''),
						value: downloadJson[key]
					}
				})
			}, {
				type: 'pie', radius: [0, '30%'], center: ['75%', '75%'],
				data: Object.keys(themeJson).map(function (key) {
					return {
						name: key.replace('.js', ''),
						value: themeJson[key]
					}
				})
			}]
		};
		myChart.setOption(option);  //为echarts对象加载数据 
	</script>
    
</body>
</html>

wqqstudy
关注
Echarts实例1-折线、饼图、柱状图混搭
sweetyhyh的博客
05-23 1万+
html> head> meta charset="utf-8"> title>EChartstitle> head> body> div id="main" style="height:400px">div> script src="http://echarts.baidu.com/build/dist/echarts.js">script> script type="te
echarts组合图 柱图+饼图
qq_36521848的博客
05-25 1499
效果： 代码示例： option = { tooltip: { trigger: 'axis' }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, .
ECharts柱状图和饼图实现案例
10-26
使用ECharts+Java实现的完整案例，包括实现柱状图和饼图，代码完整，有数据库文件，数据库为Oracle
echarts 饼图图例展示名称及数值/百分比
最新发布
weixin_54930261的博客
08-28 433
【代码】echarts 饼图图例展示名称及数值/百分比。
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
wqqstudy的博客
05-22 2666
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
EChart使用（折柱混合图，饼图）
Dreamer
03-11 1019
ECharts，可以流畅的运行在 PC 和移动设备上，提供可高度个性化定制的数据可视化图表。
echarts初体验————制作柱状图和饼图
qq_53825610的博客
09-07 490
今天开发涉及到了图形，特意去看了下相关文档，实现了柱状图和饼图。柱状图样式（点击上面的蓝绿黄可以选择是否显示这个记录）controller层：返回的是一个map集合。
vue3 | 数据可视化实战echarts图表柱状图和饼图的联动
weixin_42974827的博客
09-22 6649
echarts图表在大数据可视化中间非常实用，图表之间联动效果更具直观性，同时需要掌握echarts的配置，属性，熟练应用功能，要具备抽象思维，封装组件思维，数据驱动页面思维，把基础的功能组件做好，后续的维护和扩展性才会更加方便。
使用echarts实现立体-柱状图
07-21
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
ECharts JavaScript图表库-其他
06-11
创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。</p><p>...
Echarts简单折线/柱状图混合实例
Mentina的小屋
04-18 7551
    前段时间面试+学校项目占用了小生很大一部分时间，博客也没有在记录了。在这样下去上个月获得的“持之以恒”勋章就要被收回去了(ಥ﹏ಥ)    为了勋章，今日小生特地爬上来整理、记录最近做项目新学的可视化库——Echarts//=======================================================================一、Echarts简介Ech...
Echarts混合图（柱状图、折线图）倒立对比展示
03-13
该文档是用于介绍echarts图形中的柱状图和折线图混合示例，因为官方文档事例中有，这里介绍的是柱状图与折线图Y轴上下对应，折线图正常显示，柱状图倒立展示，共用一个X轴的比较图例情况。
web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)
05-19
最近针对web端实现单页面展示多个echarts图表，更直观的展示数据的变化，响应式
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图
L1542334210的博客
10-24 3499
Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图1、前言2、案列（基于电影推荐系统）2.1 观众年龄分配占比`在这里插入代码片`2.2 不同职位观影情况2.3 电影类型分配占比2.4 观影性别占比3、文末彩蛋 1、前言        ECharts 提供了常规的折线图、柱状图、散点图、...
Echarts的饼图和柱图
xiaosao_的博客
10-18 439
1、首先我们先引入echarts的js文件 2、初始化实例 3、手动设置饼图和柱图的配置项和数据 设置标题和字体大小， 设置提示框组件： Trigger：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）； Formatter：’{a} {b} 人数:{c};比例:{d}%（饼图：{a}(系列名称)，{b}（数据项名称），{c}（数值），{d}（百分比）） 设置图列： orient: ‘horizontal’（图列列表的朝向） left: ‘left’，top: 20（图表靠左，离
饼图+柱图+折线图 组合
weixin_30536513的博客
11-13 530
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script ...
Echarts显示柱状图与饼状图
强哥的博客
04-26 3114
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;日志信息图&lt;/title&gt; &amp
echarts实现3D柱状图（视觉层面）和3D饼图
热门推荐
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值