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

实训

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

ECharts数据可视化（第三章实训）相关推荐

Echarts数据可视化第4章 Echarts可视化图 4.7 漏斗图
Echarts数据可视化文章目录 Echarts数据可视化第4章 Echarts可视化图 4.7 漏斗图 Echarts数据可视化:入门.实战与进阶第4章 Echarts可视化图 4.7 漏斗图 ...
一零四、大数据可视化技术与应用实训（展示大屏幕）
目录一.定义二.技能标准三.实训安排四.前台页面展示五.项目架构六.static 七.py文件 app.py data.py data_corp.py data_job.py readsp ...
陕西国防 c语言第三章实训三答案,C语言程序设计实验指导
<C语言程序设计实验指导与习题精选 >是编写团队多年教学的结晶,同时配套全国计算机等级考试内容,读者学习本书,可以加强实践环节训练,深入理解书中的算法,提高学习效率 /2019-03-01 ...
python数据分析与可视化——第四章实训
1.导入模块 import pandas as pd import numpy as np import matplotlib.pyplot as plt plt.rcParams['font.san ...
陕西国防 c语言第三章实训三答案,C语言程序设计(上)
大家好!欢迎你们!无论是新同学还是老朋友,都非常高兴能在这里和大家相聚! 我们一如既往还说C,因为它称霸于计算机语言,超乎我们的想象. 如果想深刻的理解这个时代,就要理解计算机编程! 编程完成了基于计 ...
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
第一本 ECharts 数据可视化书籍出版了！
L说:这是朋友王大伟的著作,推荐大家购买. 我的第一本书终于出版了,书名叫做<ECharts数据可视化:入门.实战与进阶>,目前在当当.京东已经上架,可购买学习! 什么是ECharts E ...
一本 ECharts 数据可视化书籍
对Echarts感兴趣的同学,给大家推荐一本很不错的书籍. PS:文末小z还给大家争取了两本的福利. Apache ECharts (incubating),下文简称ECharts,是由百度捐献给Ap ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

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

ECharts数据可视化（第三章实训）相关推荐

最新文章

热门文章