training
Comparative analysis of training sales manager ability
1. Training points (1) Master the grid and coordinate axis configuration method in the Cartesian coordinate system. (2) Master the configuration methods of title components and legend components.
(3) Master the configuration methods of toolbox components and detail prompt box components.
(4) Master the configuration method of marking points and marking lines.
2. Requirements Description
The data in the "Sales Manager Ability Assessment Form. xlsx" file is the scoring data obtained from a company's assessment of three sales representatives Wang Bin, Liu Qian, and Yuan Bo from various aspects. The scoring items specifically include sales, communication, and service. , collaboration, training and organization. Draw a histogram, and configure the grid and coordinate axes, title components, legend components, toolbox
components detail prompt box components, marker points and marker lines in the Cartesian coordinate system to achieve a clearer and more convenient analysis of the sales manager ability.
3. Implementation ideas and steps
(1) Create a comparative analysis of sales manager capabilities in Eclipse. html file. (2) Draw a histogram. First of all, the comparative analysis of the sales manager's ability. The echarts. js library file is introduced into the html file. Next, prepare a div container with a specified size, and initialize the container with the init0 method. Finally, set the configuration item of the histogram and the data of "sales manager ability assessment form. xlsx" to complete the drawing of the histogram.
(3) Configure the grid and coordinate axes. Use the grid component to set the grid border and background color for the drawn histogram, and use the coordinate axis component to set the axis tick mark and the axis text label for the axis.
(4) Configure the title component and legend component. Use the title component to set the main title "Comparative Analysis of Sales Manager Ability" in red font just above the drawn histogram, and use the legend component to configure the legend in the upper left corner of the histogram.
(5) Configure toolbox components and detail prompt box components. Use the toolbox component to configure a toolbox with a border in the upper right corner of the drawn histogram, and use the detail prompt box component to configure a detail prompt box for the drawn histogram.
(6) Configure marker points and marker lines. Use markers to mark the highest and lowest scores on the assessment scale, and
mark the average score on the assessment score with boundary marks.
<!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>
or the following (style comparison first)
<!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>
