ECharts数据可视化（第三章实训）

最新推荐文章于 2024-04-23 10:33:25 发布
最新推荐文章于 2024-04-23 10:33:25 发布
阅读量8k 收藏 88
点赞数 12
分类专栏： 数据可视化 文章标签： 大数据 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56814370/article/details/124333209
版权

实训

实训销售经理能力对比分析
1．训练要点(1）掌握直角坐标系下的网格及坐标轴的配置方法。(2）掌握标题组件与图例组件的配置方法。
(3）掌握工具箱组件与详情提示框组件的配置方法。
(4）掌握标记点和标记线的配置方法。
2．需求说明
“销售经理能力考核表． xlsx ”文件上的数据为某公司对王斌、刘倩、袁波3个销售代表从多方面进行考核得到的评分数据，评分项具体包括销售、沟通、服务、协作、培训和组织。绘制柱状图，并配置直角坐标系下的网格及坐标轴、标题组件、图例组件、工具箱组
件、详情提示框组件、标记点和标记线，实现更清晰、更便捷地分析销售经理的能力。
3．实现思路及步骤
(1）在 Eclipse 中创建销售经理能力对比分析． html 文件。(2）绘制柱状图。首先，在销售经理能力对比分析． html 文件中引人 echarts . js 库文件。其次，准备一个指定了大小的 div 容器，并使用init0方法初始化容器。最后，设置柱状图的配置项、“销售经理能力考核表． xlsx ”数据，完成柱状图绘制。
(3）配置网格及坐标轴。利用网格组件为绘制的柱状图设置网格边框和背景颜色，并利用坐标轴组件为标轴设置坐标轴刻度标记和坐标轴文本标签。
(4）配置标题组件和图例组件。利用标题组件在绘制的柱状图正上方设置红色字体的主标题“销售经理能力对比分析”，并利用图例组件在柱状图的左上角配置图例。
(5）配置工具箱组件和详情提示框组件。利用工具箱组件在绘制的柱状图右上角配置含有边框的工具箱，并利用详情提示框组件为绘制的柱状图配置详情提示框。
(6）配置标记点和标记线。利用标记点标记出考核评分中的最高分和最低分，并利用
际记线标记出考核评分中的平均分。
 

<!DOCTYPE html>
<html>

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

<body>
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById("main"));
		var mytextStyle = {
			color: 'blue',
			fontStyle: 'normal',
			fontWeight: 'normal',
			fontFamily: '黑体',
			fontSize: 14,
		};
		var option = {
			color: ['palegreen', 'turquoise', 'skyblue'],
			title: {
				text: '销售经理能力对比分析',
				target: 'blank',
				left: "center",
				top: "top",
				textStyle: mytextStyle,
				padding: 5,
				itemGap: 10,
				zlevel: 0,
				z: 2,
				left: '40%',
				top: '10',
				right: 'auto',
				bottom: 'auto',
				backgroundColor: 'yellow',
				borderColor: '#ccc',
				borderWidth: 2,
				shadowColor: 'red',
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				shadowBlur: 10,
			},
			grid: {
				show: true,
				x: 130,
				y: 66,
				x2: 100,
				y2: 100,
				width: '80%', height: '70%',
				borderColor: 'red',
				backgroundColor: '#f7f7f7',
			},
			tooltip: {
				trigger: 'axis',
				axisPointer:
				{
					type: 'shadow',
					lineStyle: {
						color: '#48b', width: 2, type: 'solid'
					},
					crossStyle: {
						color: '#1e90ff', width: 1, type: 'dashed'
					},
					shadowStyle: {
						color: 'rgba(150,150,150,0.2)', width: 'auto', type: 'default'
					}
				},
				showDelay: 0, hideDelay: 0, transitionDuration: 0,
				backgroundColor: 'rgba(0,222,0,0.5)',
				borderColor: '#f50', borderRadius: 8, borderWidth: 2,
				padding: 10,
				position: function (p) {
					return [p[0] + 10, p[1] - 10];
				},
				textStyle: {
					color: ' blue ', decoration: 'none', fontFamily: 'sans-serif',
					fontSize: 15, fontStyle: ' normal ', fontWeight: 'bold'
				},
				formatter: function (params, ticket, callback) {
					console.log(params)
					var res = '详情提示框 : <br/>' + params[0].name;
					for (var i = 0, l = params.length; i < l; i++) {
						res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
					}
					setTimeout(function () {
						callback(ticket, res);
					}, 500)
					return 'loading';
				}
			},
			legend: {
				orient: 'horizontal',
				backgroundColor: '#eee',
				borderColor: 'rgba(178,34,34,0.8)',
				borderWidth: 4,
				padding: 10,
				itemGap: 20,
				textStyle: { color: 'red' },
				data: ['王斌', '刘倩', '袁波'],
				x: 'left',
				y: 'top'
			},
			toolbox: {
				show: true,
				borderWidth: 1.5,
				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', position: 'bottom',
					boundaryGap: true, show: true,
					axisLine: { 
						lineStyle: {
							color: 'green', type: 'solid', width: 2
						}
					},
					axisTick: { 
						show: true, length: 10,
						lineStyle: {
							color: 'red', type: 'solid', width: 2
						}
					},
					axisLabel: {  
						show: true, interval: 'auto',
						rotate: 0, margin: 8,
						formatter: '{value}月',
						textStyle: {
							color: 'blue', fontFamily: 'sans-serif',
							fontSize: 15, fontStyle: 'italic', fontWeight: 'bold'
						}
					},
					splitLine: {  
						show: true,
						lineStyle: {
							color: '#483d8b', type: 'dashed', width: 1
						}
					},
					splitArea: {  
						show: true,
						areaStyle: {
							color: ['rgba(144,238,144,0.3)', 'rgba(135,200,250,0.3)']
						}
					},
					data: [
					"销售", "沟通", "服务", "协作", "培训", "组织"
					]
				}
			],
			yAxis:[
			{ 
					type: 'value', position: 'left',
					boundaryGap: [0, 0.1],
					axisLine: {  
						show: true,
						lineStyle: {
							color: 'red', type: 'dashed', width: 2
						}
					},
					axisTick: { 
						show: true,
						length: 10,
						lineStyle: {
							color: 'green', type: 'solid', width: 2
						}
					},
					axisLabel: { 
						show: true, interval: 'auto', rotate: -45, margin: 18,
						formatter: '{value}',
						textStyle: {
							color: '#1e90ff', fontFamily: 'verdana',
							fontSize: 10, fontStyle: 'normal',
							fontWeight: 'bold'
						}
					},
					splitLine: {  
						show: true,
						lineStyle: {
							color: '#483d8b', type: 'dotted', width: 2
						}
					},
					splitArea: {  
						show: true,
						areaStyle: {
							color: ['rgba(205,92,92,0.3)', 'rgba(255,215,0,0.3)']
						}
					}
				}
			],
			series: [
				{
					name: '王斌',
					type: 'bar',
					data: [87.50, 87.50, 90.00, 91.25, 85.00, 87.50],
					markPoint: {
						data: [
							{
								type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
								itemStyle: {
									normal: { color: 'blue' }
								},
							},
						]
					},
					markLine: {
						data: [
							{
								type: 'average', name: '平均值',
								itemStyle:
								{
									normal: { borderType: 'dotted', color: 'darkred' }
								},
							}],
					},
				},
				{
					name: '刘倩',
					type: 'bar',
					data: [90.00, 88.75, 85.00, 87.50, 88.75, 91.25],
					markPoint: {
						data: [
							{
								type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
								itemStyle: {
									normal: { color: 'blue' }
								},
							},
						]
					},
					markLine: {
						data: [
							{
								type: 'average', name: '平均值',
								itemStyle:
								{
									normal: { borderType: 'dotted', color: 'darkred' }
								},
							}],
					},
				},
				{
					name: '袁波',
					type: 'bar',
					data: [92.50, 91.25, 88.75, 92.50, 91.25, 88.75],
					markPoint: {
						data: [
							{
								type: 'max', name: '最大值', symbol: 'diamond', symbolSize: 25,
								itemStyle: {
									normal: { color: 'red' }
								},
							},
						]
					},
					markLine: {
						data: [
							{
								type: 'average', name: '平均值',
								itemStyle:
								{
									normal: { borderType: 'dotted', color: 'darkred' }
								},
							}],
					},
				},
			]
		};
		myChart.setOption(option);
	</script>
</body>

</html>

 或者是下面这个（样式比较第一）

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {  //配置标题组件，包含主标题和副标题
                text: '销售经理能力对比分析',
				left: "center",  //设置组件离容器左侧的距离
                top: "top",  //设置组件离容器上侧的距离
                textStyle: {   //设置标题的颜色
					color: 'red'
					}
            },
			grid: {  //配置网格组件
                show: true,  //设置网格组件是否显示
                width: '80%', height: '70%',  //设置网格的宽度和高度
                backgroundColor: '#f7f7f7',  //设置背景整个网格的颜色
            },
            tooltip: {//配置提示框组件
					trigger: 'axis',
				axisPointer:
				{
					type: 'shadow',
					lineStyle: {
						color: '#48b', width: 2, type: 'solid'
					},
					crossStyle: {
						color: '#1e90ff', width: 1, type: 'dashed'
					},
					shadowStyle: {
						color: 'rgba(150,150,150,0.2)', width: 'auto', type: 'default'
					}
				},
				showDelay: 0, hideDelay: 0, transitionDuration: 0,
				backgroundColor: 'rgba(0,222,0,0.5)',
				borderColor: '#f50', borderRadius: 8, borderWidth: 2,
				padding: 10,
				position: function (p) {
					//位置回调
					//console.log && console.log(p);
					return [p[0] + 10, p[1] - 10];
				},
				textStyle: {
					color: ' blue ', decoration: 'none', fontFamily: 'sans-serif',
					fontSize: 15, fontStyle: ' normal ', fontWeight: 'bold'
				},
				formatter: function (params, ticket, callback) {
					console.log(params)
					var res = '详情提示框 : <br/>' + params[0].name;
					for (var i = 0, l = params.length; i < l; i++) {
						res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
					}
					setTimeout(function () {
						//仅为了模拟异步回调
						callback(ticket, res);
					}, 500)
					return 'loading';
				}
				//formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
			},
            legend: {  //配置图例组件，一个echarts图表中可以存在多个图例组件
                data: ['王斌', '刘倩', '袁波'],
				x:'left',
				y:'top'
            },
			toolbox: {  //配置工具箱组件
				show: true,
				borderWidth: 1.5,
				feature: {
					mark: { show: true }, dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
					restore: { show: true }, saveAsImage: { show: true }
				}
			},
            xAxis: {  //配置x轴坐标系
                data: ["销售", "沟通", "服务", "协作", "培训", "组织"],
				splitLine: {
                show: true
              }
            },
            yAxis: {},  //配置y轴坐标系
            series: [
				{  //配置系列列表，每个系列通过type控制该系列图表类型
					name: '王斌',
					type: 'bar',  //设置柱状图
					data: [87.50, 87.50, 90.00, 91.25, 85.00, 87.50],
					markPoint: {  //设置标记点
					data: [
						{
							type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
							itemStyle: {  //设置标记点的样式
								normal: { color: 'blue' }
							},
						},
					]
				},
					markLine: {  //设置标记线
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:  //设置标记点的样式
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
				},
				},
				{
                    name: '刘倩',
                    type: 'bar',
                    data: [90.00, 88.75, 85.00, 87.50, 88.75, 91.25],
					markPoint: {  //设置标记点
					data: [
						{
							type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
							itemStyle: {  //设置标记点的样式
								normal: { color: 'blue' }
							},
						},
					]
				},
					markLine: {  //设置标记线
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:  //设置标记点的样式
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
				},
				},
				{
                    name: '袁波',
                    type: 'bar',
                    data: [92.50, 91.25, 88.75, 92.50, 91.25, 88.75],
					markPoint: {  //设置标记点
					data: [
						{
							type: 'max', name: '最大值', symbol: 'diamond', symbolSize: 25,
							itemStyle: {  //设置标记点的样式
								normal: { color: 'red' }
							},
						},
					]
				},
					markLine: {  //设置标记线
					data: [
						{
							type: 'average', name: '平均值',
							itemStyle:  //设置标记点的样式
							{
								normal: { borderType: 'dotted', color: 'darkred' }
							},
						}],
				},
				},
			]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

殊迟
关注
  • 12
    点赞
  • 踩
  • 88
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Echarts第四章实训
2303_77733754的博客
03-27 200
【代码】Echarts第四章实训。
Echarts数据可视化图表案例
01-11
Echarts数据可视化图表案例：包括柱图，饼图，折线图，地图等数据展示图表；案例下载后直接使用webstrom或idea打开，在编辑器内打开html
数据可视化第四章答案
qq_44421796的博客
05-17 1316
热狗大赛大胃王前三 from pyecharts import Pie import pandas as pd hotplace = pd.read_csv("hot-dog-places.csv", header=None) hotplace = pd.DataFrame(hotplace.values.T, index=hotplace.columns, columns=['year', 'A', 'B', 'C']) print (list(hotplace.A)[10]) pie = Pie( "
ECharts实训案列
Doryh1010的博客
03-20 328
析制。
实训四以及课堂作业
xidiexi的博客
04-02 271
首先radar.html文件中引入echarts.js库文件。其次，准备一个 具备大小(weight与height)的div容器， 并使用init)方法初始化容器。最后设置雷达图的 配置项、3个销售代表5 个方面的考核评分数据完成雷达图绘制。“销售经理能力考核表。xlsx” 文件中记录某公司销售能力的考核信息， 包含3个销售代表的销售、沟通、服务、 协作和培训这5个方面的考核评分， 通过绘制雷达图综合 展现3个销售代表各方面能力对比。(1)在VSCode中创建radar.html文件。
echarts 图表 设置柱状图，并将数据区域缩放20-40区间
qq_46011557的博客
03-22 5622
一、echarts是什么？ 一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进...
Echarts可视化大屏13套模板.zip
10-04
基于 Echarts 可视化数据大屏模板13套
项目实训（十）词云的制作
m0_46268374的博客
06-05 863
echarts官网下架了词云图，从网上找到不同的属性修改。 2、代码 设置颜色在自定义数组中随机选取设置字体大小从15-60，翻转角度从-45-90
CSDN开源夏令营 百度数据可视化实践 ECharts（6） 期中总结
信息学院嵌入式实验室
08-01 4068
CSDN开源夏令营 百度数据可视化实践 ECharts 期中总结 总结过去遇到的问题和难点
ECharts入门
qq_45835940的博客
01-03 3113
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
echarts数据可视化作业
01-14
echarts数据可视化 作业案例，js，html，css 帮助同学们更好的理解echarts 数据可视化 各个图表都做了案例
售货机大数据分析平台.rar
10-28
售货机大数据分析平台.rar
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。...还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
基于ECharts数据可视化大屏案例源码
12-03
基于ECharts数据可视化大屏案例源码
Echarts数据可视化通用模板
07-04
Echarts html 相关的 数据可视化通用模板，可借鉴设计
【ROMA解决方案和功能架构】
最新发布
数据也是生产力，保持热爱，奔赴山海！
04-23 719
1、基于ROMA融合集成平台，实现企业应用、数据、API 、OT设备、云服务、合作伙伴应用之间的集成连接。2、ROMA主要包含四个组件：数据集成（Fast Data Integration，简称FDI）、服务集成（API Connect，简称APIC）、消息集成（Message Queue Service，简称MQS）、设备集成（LINK）。
深入理解Java消息中间件-RabbitMQ
u011532237的博客
04-21 806
RabbitMQ是基于高级消息队列协议（AMQP）实现的一款开源消息代理软件，旨在提供高可用性、安全、互操作性强的企业消息系统。它由Erlang编写，因而继承了Erlang语言高并发、高可靠性的特点。
大数据——Zookeeper ZBA协议（四）
大数据爱好者的博客
04-20 875
对于分布式框架而言，基本上都会遵循CAP三大理论CAP(CAP理论是从客户端角度出发的！！！C(Consistency)：一致性。在一段时间内，访问这个集群获取到的数据是相同的。注意，此时，在一个时间段内，不要求每一台服务器的数据都一样，只要保证客户端获取到的数据一样就行A(Availability)：可用性。当客户端对集群中的节点发起请求的时候，节点能够在合理的时间内(一般理解为立刻)进行响应 - 时效性。注意，此处的可用性和服务器的高可用不是一回事儿！！！
echarts数据可视化期末考试习题
01-07
echarts是一款用于数据可视化的强大工具，能够帮助用户将复杂的数据以直观的方式展现出来。以下是一些关于echarts数据可视化的期末考试习题。 1. 请说明echarts数据可视化的主要特点及其在数据分析和决策中的作用。 2. 请列举echarts支持的常用图表类型，并分别举例说明其适用场景。 3. 请简要介绍echarts的基本用法，包括如何初始化图表、导入数据并设置图表样式。 4. 以某公司销售数据为例，使用echarts绘制一张柱状图，并分析该图表反映出的销售情况。 5. 以某城市天气数据为例，使用echarts绘制一张折线图，并分析该图表反映出的气温变化趋势。 6. 请结合具体案例，说明echarts在实际工作中的应用价值，并谈谈您对其未来发展方向的看法。 7. 请设计一个个性化的echarts图表，并说明您的设计理念和如何实现。 以上是关于echarts数据可视化的期末考试习题，希望同学们能够通过学习和实践，更好地掌握echarts数据可视化的技能，为未来的数据分析工作打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

殊迟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值