|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="data_body">
|
|
|
- <div style="width: 100%; height: 100%">
|
|
|
+ <div style="width: 100%; height: 100%" :style="{ minWidth: ooption.hours.length * 75 + 'px' }">
|
|
|
<div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -26,105 +26,63 @@ export default {
|
|
|
position: 'top',
|
|
|
formatter: function (params) {
|
|
|
// console.log(params);
|
|
|
- return params.marker + params.name + ' ' + params.data[1];//params.seriesName + '<br>' + params.
|
|
|
+ return params.marker + params.name + ' ' + params.data[2];//params.seriesName + '<br>' + params.
|
|
|
|
|
|
}
|
|
|
},
|
|
|
- title: [],
|
|
|
- singleAxis: [],
|
|
|
- series: []
|
|
|
+ grid: {
|
|
|
+ top: '5%',
|
|
|
+ left: 0,
|
|
|
+ bottom: '5%',
|
|
|
+ right: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ boundaryGap: false,
|
|
|
+ splitLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Punch Card',
|
|
|
+ type: 'scatter',
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return val[2] * 3;
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return idx * 5;
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: function(params) {
|
|
|
+ // 根据行索引设置不同的颜色
|
|
|
+ var row = params.value[1];
|
|
|
+ var colorList = ['hsl(170, 80%, 75%)', 'hsl(300, 99%, 70%)', 'hsl(139, 93%, 60%)', 'hsl(56, 73%, 69%)', 'hsl(352, 98%, 69%)', 'hsl(288, 76%, 66%)', 'hsl(167, 89%, 60%)', 'hsl(83, 81%, 74%)', 'hsl(359, 84%, 66%)', 'hsl(208, 96%, 66%)', 'hsl(259, 82%, 62%)', 'hsl(224, 95%, 64%)', 'hsl(119, 89%, 71%)', 'hsl(35, 75%, 70%)', 'hsl(48, 73%, 76%)', 'hsl(10, 73%, 69%)', 'hsl(112, 88%, 71%)', 'hsl(90, 87%, 61%)', 'hsl(37, 83%, 66%)', 'hsl(192, 86%, 72%)'];
|
|
|
+ return colorList[row % colorList.length];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // title: [],
|
|
|
+ // singleAxis: [],
|
|
|
+ // series: []
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- // setChart(option) {
|
|
|
- // // 雷达图显示的标签
|
|
|
- // let newPromise = new Promise((resolve) => {
|
|
|
- // resolve();
|
|
|
- // });
|
|
|
- // //然后异步执行echarts的初始化函数
|
|
|
- // newPromise.then(() => {
|
|
|
- // const chartObj = this.$echarts.init(
|
|
|
- // //劳动课程
|
|
|
- // this.$el.querySelector("#charts_canvas")
|
|
|
- // );
|
|
|
- // const hours = option.hours
|
|
|
- // // [
|
|
|
- // // // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
|
|
|
- // // // '劳动', '其他',
|
|
|
- // // ];
|
|
|
- // // prettier-ignore
|
|
|
- // const days = option.days
|
|
|
- // // [
|
|
|
- // // // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
|
|
|
- // // ];
|
|
|
- // // prettier-ignore
|
|
|
- // const data = option.data
|
|
|
- // // [
|
|
|
- // // // [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
|
|
|
- // // // [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
|
|
|
- // // // [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
|
|
|
- // // // [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
|
|
|
- // // // [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
|
|
|
- // // // [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
|
|
|
- // // ];
|
|
|
- // const title = [];
|
|
|
- // const singleAxis = [];
|
|
|
- // const series = [];
|
|
|
- // days.forEach(function (day, idx) {
|
|
|
- // title.push({
|
|
|
- // textBaseline: 'middle',
|
|
|
- // top: ((idx + 0.5) * 90) / days.length + '%',
|
|
|
- // text: day,
|
|
|
- // textStyle: {
|
|
|
- // fontSize: 12,
|
|
|
- // },
|
|
|
- // });
|
|
|
- // singleAxis.push({
|
|
|
- // left: 70,
|
|
|
- // type: 'category',
|
|
|
- // boundaryGap: false,
|
|
|
- // data: hours,
|
|
|
- // top: (idx * 90) / days.length + 5 + '%',
|
|
|
- // height: 90 / days.length - 10 + '%'
|
|
|
- // });
|
|
|
- // series.push({
|
|
|
- // singleAxisIndex: idx,
|
|
|
- // coordinateSystem: 'singleAxis',
|
|
|
- // type: 'scatter',
|
|
|
- // data: [],
|
|
|
- // symbolSize: function (dataItem) {
|
|
|
- // return dataItem[1] * 3;
|
|
|
- // }
|
|
|
- // });
|
|
|
- // });
|
|
|
- // data.forEach(function (dataItem) {
|
|
|
- // series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
|
|
|
- // });
|
|
|
- // chartObj.off('click')
|
|
|
- // let _this = this
|
|
|
- // chartObj.on('click', function (param) {
|
|
|
- // //param参数包含的内容有：
|
|
|
- // //param.name：X轴的值
|
|
|
- // //param.data：Y轴的值
|
|
|
- // //param.value：Y轴的值
|
|
|
- // //param.type：点击事件均为click
|
|
|
- // //param.seriesName：legend的名称
|
|
|
- // //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个）
|
|
|
- // //param.dataIndex：数值序列（X轴上当前点是第几个点）
|
|
|
- // //alert(param.seriesName); //legend的名称
|
|
|
- // console.log(param); //X轴的值
|
|
|
- // _this.$emit('openCourse',param.componentIndex,param.data[0])
|
|
|
- // });
|
|
|
-
|
|
|
- // this.option.title = title
|
|
|
- // this.option.singleAxis = singleAxis
|
|
|
- // this.option.series = series
|
|
|
- // // 初始化雷达图
|
|
|
- // this.chartObj = chartObj;
|
|
|
- // this.chartObj.setOption(this.option);
|
|
|
- // });
|
|
|
- // },
|
|
|
setChart(option) {
|
|
|
// 雷达图显示的标签
|
|
|
let newPromise = new Promise((resolve) => {
|
|
|
@@ -136,68 +94,73 @@ export default {
|
|
|
//劳动课程
|
|
|
this.$el.querySelector("#charts_canvas")
|
|
|
);
|
|
|
- const hours =
|
|
|
- [
|
|
|
- '1班', '2班', '3班', '4班', '5班', '6班'
|
|
|
- ];
|
|
|
+ const hours = option.hours
|
|
|
+ // [
|
|
|
+ // // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
|
|
|
+ // // '劳动', '其他',
|
|
|
+ // ];
|
|
|
// prettier-ignore
|
|
|
- const days =
|
|
|
- [
|
|
|
- '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
|
|
|
- ];
|
|
|
+ const days = option.days
|
|
|
+ // [
|
|
|
+ // // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
|
|
|
+ // ];
|
|
|
// prettier-ignore
|
|
|
- const data =
|
|
|
- [
|
|
|
- [0, 0, 34], [0, 1, 35], [0, 2, 40], [0, 3, 33], [0, 4, 35], [0, 5, 35],
|
|
|
- [1, 0, 34], [1, 1, 30], [1, 2, 35], [1, 3, 41], [1, 4, 42], [1, 5, 37],
|
|
|
- [2, 0, 45], [2, 1, 35], [2, 2, 44], [2, 3, 45], [2, 4, 41], [2, 5, 35],
|
|
|
- [3, 0, 41], [3, 1, 44], [3, 2, 43], [3, 3, 39], [3, 4, 42], [3, 5, 42],
|
|
|
- [4, 0, 34], [4, 1, 36], [4, 2, 40], [4, 3, 0], [4, 4, 0], [4, 5, 0],
|
|
|
- [5, 0, 44], [5, 1, 44], [5, 2, 34], [5, 3, 0], [5, 4, 0], [5, 5, 0],
|
|
|
- ];
|
|
|
+ const data = option.data
|
|
|
+ // [
|
|
|
+ // // [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
|
|
|
+ // // [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
|
|
|
+ // // [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
|
|
|
+ // // [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
|
|
|
+ // // [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
|
|
|
+ // // [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
|
|
|
+ // ];
|
|
|
const title = [];
|
|
|
const singleAxis = [];
|
|
|
const series = [];
|
|
|
- days.forEach(function (day, idx) {
|
|
|
- title.push({
|
|
|
- textBaseline: 'middle',
|
|
|
- top: ((idx + 0.5) * 90) / days.length + '%',
|
|
|
- text: day,
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- });
|
|
|
- singleAxis.push({
|
|
|
- left: 70,
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: hours,
|
|
|
- top: (idx * 90) / days.length + 5 + '%',
|
|
|
- height: 90 / days.length - 10 + '%'
|
|
|
- });
|
|
|
- series.push({
|
|
|
- singleAxisIndex: idx,
|
|
|
- coordinateSystem: 'singleAxis',
|
|
|
- type: 'scatter',
|
|
|
- data: [],
|
|
|
- symbolSize: function (dataItem) {
|
|
|
- return dataItem[1];
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- data.forEach(function (dataItem) {
|
|
|
- series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
|
|
|
- });
|
|
|
- this.option.title = title
|
|
|
- this.option.singleAxis = singleAxis
|
|
|
- this.option.series = series
|
|
|
+ // days.forEach(function (day, idx) {
|
|
|
+ // title.push({
|
|
|
+ // textBaseline: 'middle',
|
|
|
+ // top: ((idx + 0.5) * 90) / days.length + '%',
|
|
|
+ // text: day,
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 12,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // singleAxis.push({
|
|
|
+ // left: 70,
|
|
|
+ // type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ // data: hours,
|
|
|
+ // top: (idx * 90) / days.length + 5 + '%',
|
|
|
+ // height: 90 / days.length - 10 + '%'
|
|
|
+ // });
|
|
|
+ // series.push({
|
|
|
+ // singleAxisIndex: idx,
|
|
|
+ // coordinateSystem: 'singleAxis',
|
|
|
+ // type: 'scatter',
|
|
|
+ // data: [],
|
|
|
+ // symbolSize: function (dataItem) {
|
|
|
+ // return dataItem[1] * 3;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // data.forEach(function (dataItem) {
|
|
|
+ // series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
|
|
|
+ // });
|
|
|
+ this.option.xAxis.data = hours
|
|
|
+ this.option.yAxis.data = days
|
|
|
+ this.option.series[0].data = data.map(function (item) {
|
|
|
+ return [item[1], item[0], item[2]];
|
|
|
+ })
|
|
|
+ // this.option.title = title
|
|
|
+ // this.option.singleAxis = singleAxis
|
|
|
+ // this.option.series = series
|
|
|
// 初始化雷达图
|
|
|
this.chartObj = chartObj;
|
|
|
this.chartObj.setOption(this.option);
|
|
|
});
|
|
|
},
|
|
|
setJson(array) {
|
|
|
- this.setChart(this.ooption);
|
|
|
if (array != undefined && array.length > 0) {
|
|
|
this.ooption = {
|
|
|
hours: [],
|
|
|
@@ -234,40 +197,44 @@ export default {
|
|
|
const title = [];
|
|
|
const singleAxis = [];
|
|
|
const series = [];
|
|
|
- days.forEach(function (day, idx) {
|
|
|
- title.push({
|
|
|
- textBaseline: 'middle',
|
|
|
- top: ((idx + 0.5) * 90) / days.length + '%',
|
|
|
- text: day,
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- });
|
|
|
- singleAxis.push({
|
|
|
- left: 70,
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: hours,
|
|
|
- top: (idx * 90) / days.length + 5 + '%',
|
|
|
- height: 90 / days.length - 10 + '%'
|
|
|
- });
|
|
|
- series.push({
|
|
|
- singleAxisIndex: idx,
|
|
|
- coordinateSystem: 'singleAxis',
|
|
|
- type: 'scatter',
|
|
|
- data: [],
|
|
|
- symbolSize: function (dataItem) {
|
|
|
- return dataItem[1] * 3;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- data.forEach(function (dataItem) {
|
|
|
- series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
|
|
|
- });
|
|
|
-
|
|
|
- this.option.title = title
|
|
|
- this.option.singleAxis = singleAxis
|
|
|
- this.option.series = series
|
|
|
+ // days.forEach(function (day, idx) {
|
|
|
+ // title.push({
|
|
|
+ // textBaseline: 'middle',
|
|
|
+ // top: ((idx + 0.5) * 90) / days.length + '%',
|
|
|
+ // text: day,
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 12,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // singleAxis.push({
|
|
|
+ // left: 70,
|
|
|
+ // type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ // data: hours,
|
|
|
+ // top: (idx * 90) / days.length + 5 + '%',
|
|
|
+ // height: 90 / days.length - 10 + '%'
|
|
|
+ // });
|
|
|
+ // series.push({
|
|
|
+ // singleAxisIndex: idx,
|
|
|
+ // coordinateSystem: 'singleAxis',
|
|
|
+ // type: 'scatter',
|
|
|
+ // data: [],
|
|
|
+ // symbolSize: function (dataItem) {
|
|
|
+ // return dataItem[1] * 3;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // data.forEach(function (dataItem) {
|
|
|
+ // series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
|
|
|
+ // });
|
|
|
+ this.option.xAxis.data = hours
|
|
|
+ this.option.yAxis.data = days
|
|
|
+ this.option.series[0].data = data.map(function (item) {
|
|
|
+ return [item[1], item[0], item[2]];
|
|
|
+ })
|
|
|
+ // this.option.title = title
|
|
|
+ // this.option.singleAxis = singleAxis
|
|
|
+ // this.option.series = series
|
|
|
this.chartObj.setOption(this.option);
|
|
|
}
|
|
|
}
|
|
|
@@ -290,7 +257,6 @@ export default {
|
|
|
// this.courseArray = this.courseArray.filter(item => {
|
|
|
// return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
|
|
|
// })
|
|
|
-
|
|
|
this.setJson(this.courseArray)
|
|
|
var _this = this;
|
|
|
window.addEventListener("resize", () => {
|
|
|
@@ -312,6 +278,7 @@ export default {
|
|
|
padding: 0;
|
|
|
width: 95%;
|
|
|
background: #fff;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
</style>
|
|
|
|
