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

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>