|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="bargraph">
|
|
|
<!--<div class="bargraph_title"><p>各校成绩排名</p></div>-->
|
|
|
- <div id="myChart" :style="{width: '100%', height: '450px'}"></div>
|
|
|
+ <div id="myChart" :style="{width: '100%', height: '460px'}"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -16,17 +16,14 @@
|
|
|
this.init();
|
|
|
},
|
|
|
computed:{
|
|
|
- // 命令发布监听
|
|
|
- //mode () {
|
|
|
- // return this.$store.state.zhuxhuang.mode
|
|
|
- //},
|
|
|
+
|
|
|
zhuxhuang () {
|
|
|
return this.$store.state.zhuxhuang
|
|
|
- },
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
methods:{
|
|
|
drawLine(obj) {
|
|
|
- console.log(obj, '这是调用教师页面方法');
|
|
|
let _this = this;
|
|
|
this.$store.state.zhuxhuang.mode = false;
|
|
|
let myChart = this.$echarts.init(document.getElementById('myChart'));
|
|
@@ -40,24 +37,24 @@
|
|
|
fontSize:16
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
tooltip : {
|
|
|
trigger: 'axis',
|
|
|
axisPointer : { // 坐标轴指示器,坐标轴触发有效
|
|
|
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
|
},
|
|
|
formatter: function (value) {
|
|
|
- //console.log(value[0])
|
|
|
- return value[0].name + '<br/>' +
|
|
|
- value[0].seriesName + ' : ' + value[0].data + '<br/>' +
|
|
|
- value[1].seriesName + ' : ' + value[1].data + '<br/>' +
|
|
|
- value[2].seriesName + ' : ' + value[2].data + '<br/>' +
|
|
|
- value[3].seriesName + ' : ' + value[3].data + '<br/>' +
|
|
|
- value[4].seriesName + ' : ' + value[4].data + '<br/>' +
|
|
|
- value[5].seriesName + ' : ' + value[5].data + '<br/>' +
|
|
|
- obj.one_average.name + ' : ' + obj.one_average.data + '<br/>' +
|
|
|
- obj.two_average.name + ' : ' + obj.two_average.data
|
|
|
- }
|
|
|
+ let arr = '';
|
|
|
+ for (var i = 0; i < value.length / 2; i++) {
|
|
|
+ //console.log(value[i].seriesName,666666)
|
|
|
+ var datalist = value[i].seriesName + ' : ' + value[i].data+'<br>';
|
|
|
+ arr += datalist;
|
|
|
+ };
|
|
|
+ let one_average = obj.one_average.name + ' : ' + obj.one_average.data + '<br/>';
|
|
|
+ let two_average = obj.two_average.name + ' : ' + obj.two_average.data;
|
|
|
+ arr+=(one_average);
|
|
|
+ arr+=(two_average);
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
},
|
|
|
legend: {
|
|
|
data:obj.titledata,
|
|
@@ -66,10 +63,10 @@
|
|
|
grid: {
|
|
|
left: '2%',
|
|
|
right: '4%',
|
|
|
- bottom: '0.5%',
|
|
|
+ bottom: '3.5%',
|
|
|
containLabel: true,
|
|
|
x:100,
|
|
|
- y2:200,
|
|
|
+ y2:100,
|
|
|
},
|
|
|
xAxis : [
|
|
|
{
|
|
@@ -77,10 +74,10 @@
|
|
|
data : obj.object_name,
|
|
|
axisLabel: {
|
|
|
interval: 0, //强制文字产生间隔
|
|
|
- rotate: 50, //文字逆时针旋转50°
|
|
|
+ rotate: 45, //文字逆时针旋转50°
|
|
|
textStyle: { //文字样式
|
|
|
color: "#333",
|
|
|
- fontSize: 11,
|
|
|
+ fontSize: 12,
|
|
|
fontFamily: 'Microsoft YaHei',
|
|
|
}
|
|
|
},
|
|
@@ -90,25 +87,39 @@
|
|
|
dataZoom: {
|
|
|
show: true,
|
|
|
realtime: true,
|
|
|
- y: 410,
|
|
|
- height: 20,
|
|
|
+ backgroundColor: "rgba(0,0,0,0)",
|
|
|
+ handleSize: 15,
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ showDataShadow: false,
|
|
|
+ handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
|
|
|
+ fillerColor: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
|
|
+ //给颜色设置渐变色 前面4个参数,给第一个设置1,第四个设置0 ,就是水平渐变
|
|
|
+ //给第一个设置0,第四个设置1,就是垂直渐变
|
|
|
+ offset: 0,
|
|
|
+ color: '#1eb5e5'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#5ccbb1'
|
|
|
+ }]),
|
|
|
+ handleColor: '#ddd',//h滑动图标的颜色
|
|
|
+ handleStyle: {
|
|
|
+ borderColor: "#cacaca",
|
|
|
+ borderWidth: "1",
|
|
|
+ shadowBlur: 0,
|
|
|
+ background: "#ddd",
|
|
|
+ shadowColor: "#ddd",
|
|
|
+ },
|
|
|
+ backgroundColor: '#eee',//两边未选中的滑动条区域的颜色
|
|
|
+ y: 420,
|
|
|
+ height: 8,
|
|
|
start: 0,
|
|
|
- end: 30,
|
|
|
+ end: 45,
|
|
|
},
|
|
|
yAxis : [
|
|
|
{
|
|
|
-
|
|
|
type : 'value',
|
|
|
}
|
|
|
],
|
|
|
- dataZoom: {
|
|
|
- show: true,
|
|
|
- realtime: true,
|
|
|
- y: 410,
|
|
|
- height: 15,
|
|
|
- start: 0,
|
|
|
- end: 50
|
|
|
- },
|
|
|
series : [
|
|
|
{
|
|
|
name:obj.one_data.name,
|
|
@@ -183,10 +194,10 @@
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: obj.anotherone_data.name,
|
|
|
+ name: obj.quyudata.anotherone_data.name,
|
|
|
type: 'bar',
|
|
|
stack: '区域',
|
|
|
- data: obj.anotherone_data.data,
|
|
|
+ data: obj.quyudata.anotherone_data.datalist,
|
|
|
barWidth : 20,
|
|
|
itemStyle:{
|
|
|
normal:{
|
|
@@ -195,10 +206,10 @@
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: obj.anothertwo_data.name,
|
|
|
+ name: obj.quyudata.anothertwo_data.name,
|
|
|
type: 'bar',
|
|
|
stack: '区域',
|
|
|
- data: obj.anothertwo_data.data,
|
|
|
+ data: obj.quyudata.anothertwo_data.datalist,
|
|
|
barWidth: 20,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
@@ -207,10 +218,10 @@
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: obj.anotherthree_data.name,
|
|
|
+ name: obj.quyudata.anotherthree_data.name,
|
|
|
type: 'bar',
|
|
|
stack: '区域',
|
|
|
- data: obj.anotherthree_data.data,
|
|
|
+ data: obj.quyudata.anotherthree_data.datalist,
|
|
|
barWidth: 20,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
@@ -219,10 +230,10 @@
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: obj.anotherfour_data.name,
|
|
|
+ name: obj.quyudata.anotherfour_data.name,
|
|
|
type: 'bar',
|
|
|
stack: '区域',
|
|
|
- data: obj.anotherfour_data.data,
|
|
|
+ data: obj.quyudata.anotherfour_data.datalist,
|
|
|
barWidth: 20,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
@@ -231,10 +242,10 @@
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: obj.anotherfive_data.name,
|
|
|
+ name: obj.quyudata.anotherfive_data.name,
|
|
|
type: 'bar',
|
|
|
stack: '区域',
|
|
|
- data: obj.anotherfive_data.data,
|
|
|
+ data: obj.quyudata.anotherfive_data.datalist,
|
|
|
barWidth: 20,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
@@ -243,10 +254,10 @@
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: obj.anothersix_data.name,
|
|
|
+ name: obj.quyudata.anothersix_data.name,
|
|
|
type: 'bar',
|
|
|
stack: '区域',
|
|
|
- data: obj.anothersix_data.data,
|
|
|
+ data: obj.quyudata.anothersix_data.datalist,
|
|
|
barWidth: 20,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
@@ -327,7 +338,6 @@
|
|
|
init() {
|
|
|
this.$api.FindBargraph({})
|
|
|
.then((response) => {
|
|
|
- //console.log(response.result, 111112);
|
|
|
this.$store.state.zhuxhuang = response.result.data;
|
|
|
})
|
|
|
},
|