You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
5.7 KiB
223 lines
5.7 KiB
7 months ago
|
<!-- @format -->
|
||
|
|
||
|
<script>
|
||
|
import { defineComponent } from 'vue';
|
||
|
import BaseLine from './BaseLine.vue';
|
||
|
import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
|
||
|
|
||
|
export default defineComponent({
|
||
|
name: 'LineStackedArea',
|
||
|
extends: BaseLine,
|
||
|
props: {
|
||
|
xAxis: {
|
||
|
type: Array,
|
||
|
required: true,
|
||
|
},
|
||
|
series: {
|
||
|
type: Array,
|
||
|
required: true,
|
||
|
},
|
||
|
yAxisName: {
|
||
|
type: String,
|
||
|
required: true,
|
||
|
},
|
||
|
smooth: {
|
||
|
type: Boolean,
|
||
|
default: false,
|
||
|
},
|
||
|
axisLabelRotate: {
|
||
|
type: Number,
|
||
|
default: 0,
|
||
|
},
|
||
|
colorDatas: {
|
||
|
type: Array,
|
||
|
default: ['#32C5FF', '#0CCDC3', '#2FC25B'],
|
||
|
},
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
colorRgb: [],
|
||
|
};
|
||
|
},
|
||
|
computed: {},
|
||
|
created() {},
|
||
|
mounted() {
|
||
|
for (let i = 0; i < this.colorDatas.length; i++) {
|
||
|
this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
|
||
|
}
|
||
|
let optionData = this.optionHandle();
|
||
|
|
||
|
this.setOption(optionData);
|
||
|
this.renderChart();
|
||
|
},
|
||
|
methods: {
|
||
|
getChangeData() {
|
||
|
var seriesDatas = [];
|
||
|
var legendDatas = [];
|
||
|
var xAxisInterval = 0;
|
||
|
var maxLen = 0;
|
||
|
for (let i = 0; i < this.series.length; i++) {
|
||
|
if (i == 0) {
|
||
|
maxLen = this.series[i].data.length;
|
||
|
} else if (this.series[i].data.length > maxLen) {
|
||
|
maxLen = this.series[i].data.length;
|
||
|
}
|
||
|
legendDatas.push({
|
||
|
name: this.series[i].name,
|
||
|
icon: 'rect',
|
||
|
});
|
||
|
seriesDatas.push({
|
||
|
name: this.series[i].name,
|
||
|
type: 'line',
|
||
|
smooth: this.smooth,
|
||
|
showSymbol: false,
|
||
|
lineStyle: {
|
||
|
width: 2,
|
||
|
color: this.colorDatas[i],
|
||
|
},
|
||
|
itemStyle: {
|
||
|
color: this.colorDatas[i],
|
||
|
},
|
||
|
emphasis: {
|
||
|
itemStyle: {
|
||
|
focus: 'series',
|
||
|
color: '#2A2A2A',
|
||
|
borderColor: this.colorDatas[i],
|
||
|
borderWidth: 2,
|
||
|
},
|
||
|
},
|
||
|
|
||
|
data: this.series[i].data,
|
||
|
});
|
||
|
}
|
||
|
if (maxLen > 15) {
|
||
|
xAxisInterval = Math.ceil(maxLen / 15) - 1;
|
||
|
}
|
||
|
return { series: seriesDatas, legendData: legendDatas, xAxisInterval: xAxisInterval };
|
||
|
},
|
||
|
optionHandle() {
|
||
|
let mouseCurValue = 0;
|
||
|
let changeData = this.getChangeData();
|
||
|
let yAxisName = this.yAxisName;
|
||
|
var offVal = yAxisName.length * 10 + 20;
|
||
|
var offArr = [0, 0, 0, -offVal];
|
||
|
let option = {
|
||
|
animationDuration: 500,
|
||
|
animationEasing: 'linear',
|
||
|
textStyle: {
|
||
|
color: '#fff',
|
||
|
fontFamily: 'Microsoft YaHei',
|
||
|
},
|
||
|
tooltip: {
|
||
|
trigger: 'axis',
|
||
|
backgroundColor: 'rgba(0,0,0,0.65)',
|
||
|
borderColor: 'rgba(0,0,0,0.65)',
|
||
|
padding: [4, 8],
|
||
|
axisPointer: {
|
||
|
type: 'line',
|
||
|
axis: 'auto',
|
||
|
},
|
||
|
formatter: function (params) {
|
||
|
let res = '',
|
||
|
sum = 0;
|
||
|
let minOffset = -1;
|
||
|
let minIndex = -1;
|
||
|
for (let i = 0; i < params.length; i++) {
|
||
|
let { name, color, data, seriesName } = params[i];
|
||
|
var resDiv = lineToolTips(name, color, data, seriesName, i);
|
||
|
res += resDiv;
|
||
|
}
|
||
|
|
||
|
return res;
|
||
|
},
|
||
|
},
|
||
|
legend: {
|
||
|
textStyle: {
|
||
|
color: '#FFFFFF',
|
||
|
opacity: 0.85,
|
||
|
},
|
||
|
itemHeight: 8,
|
||
|
itemWidth: 8,
|
||
|
itemGap: 28,
|
||
|
data: changeData.legendData,
|
||
|
right: '24',
|
||
|
bottom: '24',
|
||
|
top: '24',
|
||
|
},
|
||
|
grid: {
|
||
|
left: '24',
|
||
|
right: '24',
|
||
|
bottom: '24',
|
||
|
containLabel: true,
|
||
|
},
|
||
|
xAxis: {
|
||
|
type: 'category',
|
||
|
data: this.xAxis,
|
||
|
axisTick: {
|
||
|
show: true,
|
||
|
alignWithLabel: true,
|
||
|
inside: true,
|
||
|
lineStyle: {
|
||
|
color: '#FFFFFF',
|
||
|
width: 1,
|
||
|
opacity: 0.2,
|
||
|
},
|
||
|
},
|
||
|
axisLabel: {
|
||
|
show: true,
|
||
|
opacity: 0.65,
|
||
|
fontSize: 11,
|
||
|
interval: changeData.xAxisInterval,
|
||
|
rotate: this.axisLabelRotate,
|
||
|
},
|
||
|
axisLine: {
|
||
|
onZero: false,
|
||
|
lineStyle: {
|
||
|
color: '#FFFFFF',
|
||
|
width: 1,
|
||
|
opacity: 0.2,
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
yAxis: {
|
||
|
show: true,
|
||
|
name: yAxisName,
|
||
|
nameTextStyle: {
|
||
|
padding: offArr,
|
||
|
opacity: 0.34,
|
||
|
fontSize: 11,
|
||
|
},
|
||
|
nameLocation: 'end',
|
||
|
axisLine: {
|
||
|
show: true,
|
||
|
onZero: false,
|
||
|
lineStyle: {
|
||
|
color: '#FFFFFF',
|
||
|
width: 1,
|
||
|
opacity: 0.2,
|
||
|
},
|
||
|
},
|
||
|
splitLine: {
|
||
|
lineStyle: {
|
||
|
color: '#FFFFFF',
|
||
|
width: 1,
|
||
|
opacity: 0.2,
|
||
|
},
|
||
|
},
|
||
|
axisLabel: {
|
||
|
show: true,
|
||
|
opacity: 0.65,
|
||
|
fontSize: 11,
|
||
|
formatter: function (v) {
|
||
|
return tranNumber(v);
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
series: changeData.series,
|
||
|
};
|
||
|
return option;
|
||
|
},
|
||
|
},
|
||
|
});
|
||
|
</script>
|