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

最新推荐文章于 2024-04-25 13:47:25 发布

殊迟

最新推荐文章于 2024-04-25 13:47:25 发布

阅读量1w

点赞数 18

分类专栏：数据可视化文章标签：大数据 echarts

本文链接：https://blog.csdn.net/weixin_56814370/article/details/124333209

版权

数据可视化专栏收录该内容

4 篇文章

订阅专栏

实训

实训销售经理能力对比分析
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>