|
|
@@ -1,824 +0,0 @@
|
|
|
-/**
|
|
|
- * 发送阿贾克斯请求 获取数据库信息,放到 arrX和 arrY中
|
|
|
- * @param {String} val 输入year 或者 score 即抓取年份还是值还是
|
|
|
- * @param {Array} arr 输入arrX 或者 arrY
|
|
|
- * @param {String} address 请求地址
|
|
|
- */
|
|
|
-function findData(val, arr, address) {
|
|
|
- $.ajax({
|
|
|
- type: "post",
|
|
|
- async: false,
|
|
|
- url: address,
|
|
|
- data: {},
|
|
|
- dataType: "json", //返回数据形式为json,这里是N个 {name:'xxx',num:x}
|
|
|
- success: function (result) {
|
|
|
- console.log('result', result);
|
|
|
- if (result) {
|
|
|
- for (var i = 0; i < result.length; i++) {
|
|
|
- // console.log('temp', result);
|
|
|
- arr.push(result[i][val]); //把每一项的名字或者值存起来
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- error: function (errorMsg) {
|
|
|
- alert("不好意思，大爷，图表请求数据失败啦!");
|
|
|
- myChart.hideLoading();
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 切换
|
|
|
- */
|
|
|
-switcher();
|
|
|
-
|
|
|
-function switcher() {
|
|
|
- //先阻止默认事件
|
|
|
- $('#banner a').click(function (e) {
|
|
|
- e.preventDefault();
|
|
|
- });
|
|
|
-
|
|
|
- //工具箱的切换
|
|
|
- //样式选项卡切换
|
|
|
- $('#banner li').on('click', function () {
|
|
|
- $(this).siblings('li').css({
|
|
|
- 'background-color': '',
|
|
|
- 'border-radius': '0px',
|
|
|
- 'box-shadow': '0 0 0 0',
|
|
|
- });
|
|
|
- $(this).siblings('li').children('a').css('color', 'white');
|
|
|
- $(this).css({
|
|
|
- 'background-color': '#6a19c1',
|
|
|
- 'border-radius': '7px',
|
|
|
- 'box-shadow': '0 0 10px 0 #6a19c1',
|
|
|
- });
|
|
|
- $(this).children('a').css('color', '#008c8c');
|
|
|
- });
|
|
|
-
|
|
|
- $('#banner li:eq(0)').on('click', function () {
|
|
|
- $('#pie').hide();
|
|
|
- $('#line').css('visibility', 'hidden');
|
|
|
- // $('#line div').remove();
|
|
|
- $('#bar').css('visibility', 'visible');
|
|
|
- barGraph();
|
|
|
- console.log('柱状图');
|
|
|
-
|
|
|
- //导航栏控制内容的切换
|
|
|
- $('.tools .pieList').hide();
|
|
|
- $('.tools .lineList').show();
|
|
|
- $('.tools .lineList').children('input[placeholder="请输入名字"]').val('詹皇');
|
|
|
- console.log('工具箱big');
|
|
|
- });
|
|
|
-
|
|
|
- $('#banner li:eq(1)').on('click', function () {
|
|
|
- $('#pie').hide();
|
|
|
- $('#line').css('visibility', 'visible');
|
|
|
- // $('#line div').remove();
|
|
|
- $('#bar').css('visibility', 'hidden');
|
|
|
- lineGraph();
|
|
|
- console.log('折线图');
|
|
|
-
|
|
|
- $('.tools .pieList').hide();
|
|
|
- $('.tools .lineList').show();
|
|
|
- $('.tools .lineList').children('input[placeholder="请输入名字"]').val('');
|
|
|
- console.log('工具箱big');
|
|
|
- });
|
|
|
-
|
|
|
- $('#banner li:eq(2)').on('click', function () {
|
|
|
- $('#pie').show();
|
|
|
- $('#line').css('visibility', 'hidden');
|
|
|
- // $('#line div').remove();
|
|
|
- $('#bar').css('visibility', 'hidden');
|
|
|
- // $('#bar div').remove();
|
|
|
- pieGraph();
|
|
|
- console.log('饼图');
|
|
|
-
|
|
|
- $('.tools .lineList').hide();
|
|
|
- $('.tools .pieList').show();
|
|
|
- $('.tools .lineList').children('input[placeholder="请输入名字"]').val('');
|
|
|
- console.log('工具箱mini');
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 工具箱_控制(增删改)
|
|
|
- */
|
|
|
-controlGraph();
|
|
|
-
|
|
|
-function controlGraph() {
|
|
|
- //内容显示
|
|
|
- $(".tools").on('mouseover', function () {
|
|
|
- $(this).children().css({
|
|
|
- 'visibility': 'visible',
|
|
|
- });
|
|
|
- $(this).find('button').css({
|
|
|
- 'transition': '1s',
|
|
|
- })
|
|
|
- }).on('mouseleave', function () {
|
|
|
- $(this).children().css({
|
|
|
- 'visibility': 'hidden',
|
|
|
- });
|
|
|
- $(this).find('button').css({
|
|
|
- 'transition': '0s',
|
|
|
- });
|
|
|
- $(this).children('.iconfont').css('visibility', 'visible');
|
|
|
- });
|
|
|
-
|
|
|
- //添加
|
|
|
- $('.tools button:eq(0)').on('click', function () {
|
|
|
- var keyX = $(this).prev().prev().prev().val(), //抓取输入的名字
|
|
|
- keyY = $(this).prev().prev().val(), //抓取输入的年份
|
|
|
- keyZ = $(this).prev().val(); //抓取输入的得分
|
|
|
- console.log(keyX, keyY, keyZ);
|
|
|
- if (keyX != '') {
|
|
|
- if (keyY == '') { //如果没设置值
|
|
|
- keyY = 0;
|
|
|
- }
|
|
|
- $.ajax({
|
|
|
- type: 'post',
|
|
|
- url: 'Add',
|
|
|
- data: {
|
|
|
- "setName": keyX,
|
|
|
- "setYear": keyY,
|
|
|
- "setScore": keyZ,
|
|
|
- }
|
|
|
- })
|
|
|
- .done(function () {
|
|
|
- alert('添加成功');
|
|
|
- barGraph();
|
|
|
- })
|
|
|
- .fail(function () {
|
|
|
- alert('添加失败');
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- var key = $('#bar').css('visibility');
|
|
|
- if (key == 'visible') { //如果目前看的是柱状图
|
|
|
- /* if (keyX != '詹皇' || keyX != '詹姆斯') {
|
|
|
- alert('提示一下：你目前看的是詹皇的数据,所以你刚刚输入的名字不能在图中显示');
|
|
|
- } */
|
|
|
- barGraph();
|
|
|
- } else {
|
|
|
- lineGraph();
|
|
|
- }
|
|
|
- console.log('添加成功');
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- //修改
|
|
|
- $('.tools button:eq(2)').on('click', function () {
|
|
|
- var keyX = $(this).prev().prev().prev().val(), //抓取输入的名字
|
|
|
- keyY = $(this).prev().prev().val(), //抓取输入的年份
|
|
|
- keyZ = $(this).prev().val(); //抓取输入的得分
|
|
|
-
|
|
|
- // console.log(name, value);
|
|
|
- $.ajax({
|
|
|
- type: 'post',
|
|
|
- url: 'changePerform',
|
|
|
- data: {
|
|
|
- "changeName": keyX,
|
|
|
- "changeYear": keyY,
|
|
|
- "changeScore": keyZ,
|
|
|
- }
|
|
|
- })
|
|
|
- .done(function () {
|
|
|
- alert('修改成功');
|
|
|
- barGraph();
|
|
|
- })
|
|
|
- .fail(function () {
|
|
|
- alert('修改失败');
|
|
|
- })
|
|
|
-
|
|
|
- var key = $('#bar').css('visibility');
|
|
|
- if (key == 'visible') {
|
|
|
- barGraph();
|
|
|
- } else {
|
|
|
- lineGraph();
|
|
|
- }
|
|
|
- console.log('修改成功');
|
|
|
- });
|
|
|
-
|
|
|
- //删除
|
|
|
- $('.tools button:eq(1)').on('click', function () {
|
|
|
- var name = $(this).prev().prev().val(),
|
|
|
- year = $(this).prev().val();
|
|
|
- // console.log(name);
|
|
|
- $.ajax({
|
|
|
- type: 'post',
|
|
|
- url: 'Delete',
|
|
|
- data: {
|
|
|
- delName: name,
|
|
|
- delYear: year,
|
|
|
- }
|
|
|
- })
|
|
|
- .done(function () {
|
|
|
- barGraph();
|
|
|
- alert('删除成功！');
|
|
|
- })
|
|
|
- .fail(function () {
|
|
|
- alert('删除失败');
|
|
|
- });
|
|
|
-
|
|
|
- var key = $('#bar').css('visibility');
|
|
|
- if (key == 'visible') {
|
|
|
- barGraph();
|
|
|
- } else {
|
|
|
- lineGraph();
|
|
|
- }
|
|
|
- console.log('删除成功');
|
|
|
- });
|
|
|
-
|
|
|
- //饼图的修改
|
|
|
- $('.tools .changePie').on('click', function () {
|
|
|
- var keyX = $(this).prev().prev().val(), //抓取输入的名字
|
|
|
- keyY = $(this).prev().val(); //抓取输入的值
|
|
|
- /* var name = $(this).prev().prev().val(),
|
|
|
- value = $(this).prev().val(); */
|
|
|
- // console.log(name, value);
|
|
|
-
|
|
|
- $.ajax({
|
|
|
- type: 'post',
|
|
|
- url: 'pieChange',
|
|
|
- data: {
|
|
|
- "changeName": keyX,
|
|
|
- "changeScore": keyY,
|
|
|
- }
|
|
|
- })
|
|
|
- .done(function () {
|
|
|
- alert('修改成功');
|
|
|
- barGraph();
|
|
|
- })
|
|
|
- .fail(function () {
|
|
|
- alert('修改失败');
|
|
|
- });
|
|
|
- pieGraph();
|
|
|
- console.log('修改成功！');
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/**
|
|
|
- * 柱状图
|
|
|
- */
|
|
|
-// barGraph();
|
|
|
-
|
|
|
-function barGraph() {
|
|
|
- var arrX = [], //用来保存键(名字)
|
|
|
- arrY = []; //用来保存值(数量)
|
|
|
-
|
|
|
- //获取数据库信息
|
|
|
- findData('year', arrX, "bar.do"); //获取名字
|
|
|
- findData('score', arrY, "bar.do"); //获取值
|
|
|
-
|
|
|
- //初始化
|
|
|
- var myChart = echarts.init(document.getElementById('bar'));
|
|
|
- var option = {
|
|
|
- color: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8',
|
|
|
- '#8d4653', '#91e8e1'
|
|
|
- ],
|
|
|
- title: {
|
|
|
- text: '詹皇2016以来的场均得分',
|
|
|
- x: 'center'
|
|
|
- },
|
|
|
- tooltip: {},
|
|
|
- xAxis3D: {
|
|
|
- type: 'category',
|
|
|
- data: arrX,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'purple',
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // xAxis.axisTick.interval:{},
|
|
|
- axisLabel: {
|
|
|
- interval: 0 //强制显示所有标签
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis3D: {
|
|
|
- type: 'category',
|
|
|
- data: [''],
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'purple',
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- zAxis3D: {
|
|
|
- type: 'value',
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'purple',
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- grid3D: {
|
|
|
- boxWidth: 200,
|
|
|
- boxDepth: 30,
|
|
|
- axisPointer: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- light: {
|
|
|
- main: {
|
|
|
- intensity: 1.2
|
|
|
- },
|
|
|
- ambient: {
|
|
|
- intensity: 0.3
|
|
|
- }
|
|
|
- },
|
|
|
- viewControl: {
|
|
|
- alpha: 10, //控制场景平移旋转
|
|
|
- beta: 20,
|
|
|
- minAlpha: 10,
|
|
|
- maxAlpha: 10,
|
|
|
- minBeta: 20,
|
|
|
- maxBeta: 20
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'bar3D',
|
|
|
- name: '1',
|
|
|
- barSize: 10,
|
|
|
- data: (function () {
|
|
|
- var tempRecordY = []; //临时记录 arrY 中的每一项
|
|
|
- arrY.forEach(function (item, i, self) { //将arrY中每一项拿出来
|
|
|
- if (i % 2 == 0) {
|
|
|
- tempRecordY.push([i, 0, item]);
|
|
|
- }
|
|
|
- });
|
|
|
- return tempRecordY; //将他返回给data
|
|
|
- }()),
|
|
|
- stack: 'stack',
|
|
|
- shading: 'lambert',
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }
|
|
|
- }, {
|
|
|
- type: 'bar3D',
|
|
|
- name: '2',
|
|
|
- barSize: 10,
|
|
|
- data: (function () {
|
|
|
- var tempRecordY = [];
|
|
|
- arrY.forEach(function (item, i, self) {
|
|
|
- if (i % 2 !== 0) {
|
|
|
- tempRecordY.push([i, 0, item]);
|
|
|
- }
|
|
|
- });
|
|
|
- return tempRecordY;
|
|
|
- }()),
|
|
|
- // stack: 'stack', 第二个不设置，不然会飞起来对不齐
|
|
|
- shading: 'lambert',
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }
|
|
|
- }]
|
|
|
- };
|
|
|
- // 使用刚指定的配置项和数据显示图表。
|
|
|
- myChart.setOption(option);
|
|
|
-
|
|
|
- console.log(arrX);
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/**
|
|
|
- * 饼图
|
|
|
- */
|
|
|
-// pieGraph();
|
|
|
-
|
|
|
-function pieGraph() {
|
|
|
- //根据json数据生成饼状图，并将饼状图显示到div中
|
|
|
- var arrX = [],
|
|
|
- arrY = [];
|
|
|
-
|
|
|
- findData('name', arrX, "pie.do");
|
|
|
- findData('score', arrY, "pie.do");
|
|
|
-
|
|
|
- // 转为 [{},{},{},{}] 格式
|
|
|
- var j = 0,
|
|
|
- lenY = arrY.length;
|
|
|
- var jsonPerform = [];
|
|
|
- for (var i = 0, lenX = arrX.length; i < lenX; i++) {
|
|
|
- for (; j < lenY;) {
|
|
|
- jsonPerform.push({
|
|
|
- 'name': arrX[i],
|
|
|
- 'value': arrY[j],
|
|
|
- });
|
|
|
- j++;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- // console.log('new',arrX,arrY);
|
|
|
- // console.log('newLast', jsonPerform);
|
|
|
-
|
|
|
- MakeChart(jsonPerform);
|
|
|
-
|
|
|
- function MakeChart(json) {
|
|
|
- chartData = eval(json);
|
|
|
- //饼状图
|
|
|
- chart = new AmCharts.AmPieChart();
|
|
|
- chart.dataProvider = chartData;
|
|
|
- //标题数据
|
|
|
- chart.titleField = "name";
|
|
|
- //值数据
|
|
|
- chart.valueField = "value";
|
|
|
- //边框线颜色
|
|
|
- chart.outlineColor = "#fff";
|
|
|
- //边框线的透明度
|
|
|
- chart.outlineAlpha = .8;
|
|
|
- //边框线的狂宽度
|
|
|
- chart.outlineThickness = 1;
|
|
|
- chart.depth3D = 20;
|
|
|
- chart.angle = 30;
|
|
|
- chart.write("pie");
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 折线图
|
|
|
- */
|
|
|
-lineGraph();
|
|
|
-
|
|
|
-function lineGraph() {
|
|
|
- var arrX = [],
|
|
|
- arrY1 = [],
|
|
|
- arrY2 = [];
|
|
|
-
|
|
|
- //获取数据库信息
|
|
|
- findData('year', arrX, "line.do"); //获取年份
|
|
|
- findData('score', arrY1, "line.do"); //获取詹皇分数
|
|
|
- findData('score2', arrY2, "line2.do"); //获取戴维斯分数
|
|
|
- console.log('詹皇', arrY1);
|
|
|
- console.log('年份', arrX);
|
|
|
- console.log('戴维斯', arrY2);
|
|
|
- /**
|
|
|
- * 画双折线图
|
|
|
- * @param container 容器
|
|
|
- * @param titleName 标题
|
|
|
- * @param xData x轴数据
|
|
|
- * @param seriesNameOne 第一条折线图表名称
|
|
|
- * @param seriesDataOne 第一条折线图表数据
|
|
|
- * @param seriesNameTwo 第二条折线图表名称
|
|
|
- * @param seriesDataTwo 第二条折线图表数据
|
|
|
- */
|
|
|
- drawDoubleLine('doubleLine', '年份', arrX, '詹皇', arrY1, '戴维斯', arrY2);
|
|
|
-
|
|
|
- function drawDoubleLine(container, titleName, xData, seriesNameOne, seriesDataOne, seriesNameTwo, seriesDataTwo) {
|
|
|
- var doubleLine = echarts.init(document.getElementById('line'));
|
|
|
- doubleLineOption = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- //指示器
|
|
|
- axisPointer: {
|
|
|
- type: 'line',
|
|
|
- lineStyle: {
|
|
|
- color: '#7171C6'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- //标题样式
|
|
|
- title: {
|
|
|
- text: titleName,
|
|
|
- textStyle: {
|
|
|
- color: 'white',
|
|
|
- },
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
- //图形位置
|
|
|
- grid: {
|
|
|
- left: '4%',
|
|
|
- right: '6%',
|
|
|
- bottom: '4%',
|
|
|
- top: 50,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- //x轴坐标点开始与结束点位置都不在最边缘
|
|
|
- boundaryGap: true,
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- //x轴线样式
|
|
|
- lineStyle: {
|
|
|
- color: '#17273B',
|
|
|
- width: 1,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- },
|
|
|
- //x轴字体设置
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- fontSize: 12,
|
|
|
- color: 'white'
|
|
|
- },
|
|
|
- data: xData
|
|
|
- }],
|
|
|
- yAxis: [{
|
|
|
- type: 'value',
|
|
|
- //y轴字体设置
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- color: 'white',
|
|
|
- fontSize: 12,
|
|
|
- formatter: function (value) {
|
|
|
- if (value >= 1000) {
|
|
|
- value = value / 1000 + 'k';
|
|
|
- }
|
|
|
- return value;
|
|
|
- }
|
|
|
- },
|
|
|
- //y轴线设置显示
|
|
|
- axisLine: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- //与x轴平行的线样式
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#17273B',
|
|
|
- width: 1,
|
|
|
- type: 'solid',
|
|
|
- }
|
|
|
- }
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: seriesNameOne,
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- lineStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#00F2B1' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#00F2B1' // 100% 处的颜色
|
|
|
- }],
|
|
|
- globalCoord: false
|
|
|
- },
|
|
|
- width: 2,
|
|
|
- type: 'solid',
|
|
|
- },
|
|
|
- //折线连接点样式
|
|
|
- itemStyle: {
|
|
|
- color: '#00E5DE'
|
|
|
- },
|
|
|
- //折线堆积区域样式
|
|
|
- areaStyle: {
|
|
|
- color: '#004c5E'
|
|
|
- },
|
|
|
- data: seriesDataOne
|
|
|
- }, {
|
|
|
- name: seriesNameTwo,
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- lineStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#0AB2F9' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#0AB2F9' // 100% 处的颜色
|
|
|
- }],
|
|
|
- globalCoord: false
|
|
|
- },
|
|
|
- width: 2,
|
|
|
- type: 'solid',
|
|
|
- },
|
|
|
- //折线连接点样式
|
|
|
- itemStyle: {
|
|
|
- color: '#00E5DE'
|
|
|
- },
|
|
|
- //折线堆积区域样式
|
|
|
- areaStyle: {
|
|
|
- color: '#004c5E'
|
|
|
- },
|
|
|
- data: seriesDataTwo
|
|
|
- }]
|
|
|
- };
|
|
|
- doubleLine.setOption(doubleLineOption);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 交互图
|
|
|
- */
|
|
|
-rect();
|
|
|
-
|
|
|
-function rect() {
|
|
|
- var arrX = [],
|
|
|
- arrY1 = [],
|
|
|
- arrY2 = [];
|
|
|
-
|
|
|
- //获取数据库信息
|
|
|
- findData('year', arrX, "line.do"); //获取年份
|
|
|
- findData('score', arrY1, "line.do"); //获取詹皇分数
|
|
|
- findData('score2', arrY2, "line2.do"); //获取戴维斯分数
|
|
|
- // 路径配置
|
|
|
- require.config({
|
|
|
- paths: {
|
|
|
- echarts: 'http://echarts.baidu.com/build/dist'
|
|
|
- }
|
|
|
- });
|
|
|
- // 使用
|
|
|
- require(['echarts', 'echarts/chart/bar', 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
|
|
|
- ],
|
|
|
- drewEcharts
|
|
|
- );
|
|
|
-
|
|
|
- function drewEcharts(ec) {
|
|
|
- // 基于准备好的dom，初始化echarts图表
|
|
|
- var myChart = ec.init(document.getElementById('rect'));
|
|
|
-
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- text: '湖人队主力',
|
|
|
- // subtext: '纯属虚构'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['詹皇', '戴维斯']
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show: true,
|
|
|
- feature: {
|
|
|
- dataView: {
|
|
|
- show: true,
|
|
|
- readOnly: false
|
|
|
- },
|
|
|
- magicType: {
|
|
|
- show: true,
|
|
|
- type: ['line', 'bar']
|
|
|
- },
|
|
|
- restore: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- saveAsImage: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- calculable: true,
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- data: arrX,
|
|
|
- }],
|
|
|
- yAxis: [{
|
|
|
- type: 'value'
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- "name": "詹皇",
|
|
|
- "type": "bar",
|
|
|
- "data": arrY1,
|
|
|
-
|
|
|
- markPoint: {
|
|
|
- data: [{
|
|
|
- type: 'max',
|
|
|
- name: '最大值'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'min',
|
|
|
- name: '最小值'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- markLine: {
|
|
|
- data: [{
|
|
|
- type: 'average',
|
|
|
- name: '平均值'
|
|
|
- }]
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: '戴维斯',
|
|
|
- type: 'bar',
|
|
|
- "data": arrY2,
|
|
|
- markPoint: {
|
|
|
- data: [{
|
|
|
- type: 'max',
|
|
|
- name: '最大值'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'min',
|
|
|
- name: '最小值'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- markLine: {
|
|
|
- data: [{
|
|
|
- type: 'average',
|
|
|
- name: '平均值'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- // 为echarts对象加载数据
|
|
|
- myChart.setOption(option);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 浮现效果
|
|
|
- */
|
|
|
-document.addEventListener("DOMContentLoaded", function () {
|
|
|
- appear();
|
|
|
-})
|
|
|
-
|
|
|
-function appear() {
|
|
|
- //先把内容全部隐藏
|
|
|
- $('.info .James').children().hide();
|
|
|
- //鼠标移入头像
|
|
|
- $('header img').on('mouseover', function () {
|
|
|
- $('.info .James').animate({
|
|
|
- 'height': 200,
|
|
|
- }, function () {
|
|
|
- var height = $('.info .James').height();
|
|
|
- if (height == 200) {
|
|
|
- $('.info .James').children().show();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- });
|
|
|
- //鼠标移出头像
|
|
|
- $('header img').on('mouseleave', function () {
|
|
|
- $('.info .James').stop();
|
|
|
- $('.info .James').children().hide();
|
|
|
- $('.info .James').animate({
|
|
|
- 'height': '0',
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- //鼠标移入more
|
|
|
- /* $('.more').children().hide();
|
|
|
- $('.more').find('.iconfont').show();
|
|
|
- $('.more').on('mouseover', function () {
|
|
|
- $('.more .more_list').animate({
|
|
|
- 'height': '250px',
|
|
|
- }, function () {
|
|
|
- $('.more').children().show();
|
|
|
- });
|
|
|
- });
|
|
|
- //鼠标移出more
|
|
|
- $('.more').on('mouseleave', function () {
|
|
|
- $(this).children().hide();
|
|
|
- $('.more .more_list').animate({
|
|
|
- 'height': '0',
|
|
|
- });
|
|
|
- $(this).find('.iconfont').show();
|
|
|
- }); */
|
|
|
-}
|
|
|
-
|
|
|
-/**数字数据 */
|
|
|
-numDigi();
|
|
|
-
|
|
|
-function numDigi() {
|
|
|
- var arrY1 = [], //记录詹皇的分
|
|
|
- arrY2 = []; //记录戴维斯的分
|
|
|
- //获取数据库信息
|
|
|
- findData('score', arrY1, "line.do"); //获取名字
|
|
|
- findData('score2', arrY2, "line2.do"); //获取名字
|
|
|
- console.log('分数k', arrY1);
|
|
|
- console.log('分数d', arrY2);
|
|
|
-
|
|
|
- /* for (var i = 0, len = arrY2.length; i < len; i++) {
|
|
|
- arrY2[i].toFixed(2);
|
|
|
- console.log('arrY2',arrY2)
|
|
|
- } */
|
|
|
-
|
|
|
- $('.digital tr:eq(1) td:eq(1)').text(arrY1[0]);
|
|
|
- $('.digital tr:eq(1) td:eq(2)').text(arrY2[0]);
|
|
|
-
|
|
|
- $('.digital tr:eq(2) td:eq(1)').text(arrY1[1]);
|
|
|
- $('.digital tr:eq(2) td:eq(2)').text(arrY2[1]);
|
|
|
-
|
|
|
- $('.digital tr:eq(3) td:eq(1)').text(arrY1[2]);
|
|
|
- $('.digital tr:eq(3) td:eq(2)').text(arrY2[2]);
|
|
|
-
|
|
|
- $('.digital tr:eq(4) td:eq(1)').text(arrY1[3]);
|
|
|
- $('.digital tr:eq(4) td:eq(2)').text(arrY2[3]);
|
|
|
-}
|
