|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="data_body">
|
|
|
- <div style="width: 100%; height: 100%" :style="{minWidth:ooption.hours.length * 75 + 'px'}">
|
|
|
+ <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,13 +26,59 @@ 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: []
|
|
|
},
|
|
|
};
|
|
|
},
|
|
@@ -71,39 +117,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 = chartObj;
|
|
|
this.chartObj.setOption(this.option);
|
|
@@ -146,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);
|
|
|
}
|
|
|
}
|