实训销售经理能力对比分析
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>
原文地址:https://blog.csdn.net/weixin_56814370/article/details/124333209
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_43862.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!