实训

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


原文地址:https://blog.csdn.net/weixin_56814370/article/details/124333209

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_43862.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注