push
This commit is contained in:
xuziqiang
43
lib/component/echarts/components/chart/line/BaseLine.vue
Normal file
43
lib/component/echarts/components/chart/line/BaseLine.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div class="base-line" id="baseLine" ref="BaseLineRef"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { init } from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BaseLine',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
options: null,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
setOption(obj) {
|
||||
this.options = obj;
|
||||
},
|
||||
getOption() {
|
||||
return this.options;
|
||||
},
|
||||
renderChart() {
|
||||
if (!this.chartbox) {
|
||||
this.chartbox = init(this.$refs.BaseLineRef, null, { renderer: 'svg' });
|
||||
}
|
||||
this.chartbox.clear();
|
||||
let option = this.getOption();
|
||||
this.chartbox.setOption(option, { notMerge: false });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.base-line {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
222
lib/component/echarts/components/chart/line/LineStacked.vue
Normal file
222
lib/component/echarts/components/chart/line/LineStacked.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<!-- @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>
|
||||
248
lib/component/echarts/components/chart/line/LineStackedArea.vue
Normal file
248
lib/component/echarts/components/chart/line/LineStackedArea.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<!-- @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: true,
|
||||
},
|
||||
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,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${this.colorRgb[i].r},${this.colorRgb[i].g},${this.colorRgb[i].b},0.2)`, // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.colorRgb[i].r},${this.colorRgb[i].g},${this.colorRgb[i].b}, 0)`, // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 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: {
|
||||
// top:'24',
|
||||
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>
|
||||
Reference in New Issue
Block a user