push
This commit is contained in:
xuziqiang
0
lib/component/echarts/components/chart/Base.vue
Normal file
0
lib/component/echarts/components/chart/Base.vue
Normal file
43
lib/component/echarts/components/chart/bar/BaseBar.vue
Normal file
43
lib/component/echarts/components/chart/bar/BaseBar.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div class="base-bar" id="basebar" ref="BaseBarRef"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { init } from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BaseBar',
|
||||
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.BaseBarRef, null, { renderer: 'svg' });
|
||||
}
|
||||
this.chartbox.clear();
|
||||
let option = this.getOption();
|
||||
this.chartbox.setOption(option, { notMerge: false });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.base-bar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
255
lib/component/echarts/components/chart/bar/MixedLineBar.vue
Normal file
255
lib/component/echarts/components/chart/bar/MixedLineBar.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<!-- @format -->
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import BaseBar from './BaseBar.vue';
|
||||
import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MultipleBar',
|
||||
extends: BaseBar,
|
||||
props: {
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
yAxisName: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
axisLabelRotate: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
colorDatas: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['#33B8CB', '#00F0FF', '#00F3FF', '#32C691'];
|
||||
},
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#24B0D4',
|
||||
},
|
||||
shadowColor: {
|
||||
type: String,
|
||||
default: '#2DBFDD',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorRgb: [],
|
||||
borderColorRGB: {},
|
||||
shadowColorRGB: {},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
for (let i = 0; i < this.colorDatas.length; i++) {
|
||||
this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
|
||||
}
|
||||
this.borderColorRGB = colorTransferToRgb(this.borderColor);
|
||||
this.shadowColorRGB = colorTransferToRgb(this.shadowColor);
|
||||
|
||||
let optionData = this.optionHandle();
|
||||
|
||||
this.setOption(optionData);
|
||||
this.renderChart();
|
||||
},
|
||||
methods: {
|
||||
getChangeData() {
|
||||
var seriesDatas = [];
|
||||
var legendDatas = [];
|
||||
var barObject = {
|
||||
name: this.series[0].name,
|
||||
barMaxWidth: '36%',
|
||||
data: this.series[0].data,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${this.colorRgb[1].r},${this.colorRgb[1].g},${this.colorRgb[1].b}, 1)`, // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.13,
|
||||
color: `rgba(${this.colorRgb[0].r},${this.colorRgb[0].g},${this.colorRgb[0].b},1)`, // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.colorRgb[0].r},${this.colorRgb[0].g},${this.colorRgb[0].b},0.1)`, // 0% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
type: this.series[0].type,
|
||||
};
|
||||
var lineObject = {
|
||||
type: this.series[1].type,
|
||||
name: this.series[1].name,
|
||||
data: this.series[1].data,
|
||||
yAxisIndex: 1,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#0F3A46',
|
||||
borderColor: '#00F0FF',
|
||||
borderWidth: 2,
|
||||
},
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${this.colorRgb[2].r},${this.colorRgb[2].g},${this.colorRgb[2].b}, 1)`, // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: `rgba(${this.colorRgb[2].r},${this.colorRgb[2].g},${this.colorRgb[2].b}, 1)`, // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.colorRgb[3].r},${this.colorRgb[3].g},${this.colorRgb[3].b},1)`, // 0% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
seriesDatas = [barObject, lineObject];
|
||||
for (let i = 0; i < this.series.length; i++) {
|
||||
legendDatas.push({
|
||||
name: this.series[i].name,
|
||||
icon: 'rect',
|
||||
itemStyle: {
|
||||
color: this.colorDatas[i],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return { series: seriesDatas, legendData: legendDatas };
|
||||
},
|
||||
getyAxisDatas() {
|
||||
let yAxisArr = [];
|
||||
for (let i = 0; i < this.yAxisName.length; i++) {
|
||||
let name = this.yAxisName[i].length ? this.yAxisName[i] : '';
|
||||
var offVal = name.length * 10 + 20;
|
||||
var offArr = i == 0 ? [0, 0, 0, -offVal] : [0, -offVal, 0, 0];
|
||||
yAxisArr.push({
|
||||
type: 'value',
|
||||
alignTicks: true,
|
||||
name: this.yAxisName[i],
|
||||
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);
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return yAxisArr;
|
||||
},
|
||||
optionHandle() {
|
||||
let colorDatas = this.colorDatas;
|
||||
let changeData = this.getChangeData();
|
||||
let yAxisDatas = this.getyAxisDatas();
|
||||
var option = {
|
||||
animationDuration: 300,
|
||||
animationEasing: 'linear',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.65)',
|
||||
borderColor: 'rgba(0,0,0,0.65)',
|
||||
padding: [4, 8],
|
||||
|
||||
formatter: function (params) {
|
||||
let res = '';
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
let { name, data, seriesName } = params[i];
|
||||
let color = colorDatas[i];
|
||||
var resDiv = lineToolTips(name, color, data, seriesName, i);
|
||||
res += resDiv;
|
||||
}
|
||||
|
||||
return res;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// top:'24',
|
||||
left: '24',
|
||||
right: '24',
|
||||
bottom: '24',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.xAxis,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
// 文字斜着
|
||||
rotate: this.axisLabelRotate,
|
||||
},
|
||||
axisTick: {
|
||||
//x轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: yAxisDatas,
|
||||
series: changeData.series,
|
||||
};
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
223
lib/component/echarts/components/chart/bar/MultipleBar.vue
Normal file
223
lib/component/echarts/components/chart/bar/MultipleBar.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<!-- @format -->
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import BaseBar from './BaseBar.vue';
|
||||
import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MultipleBar',
|
||||
extends: BaseBar,
|
||||
props: {
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
yAxisName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
axisLabelRotate: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
colorDatas: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['#10DDDD', '#E0CFA3', '#50F3A8', '#88B8FF'];
|
||||
},
|
||||
},
|
||||
},
|
||||
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 = [];
|
||||
|
||||
for (let i = 0; i < this.series.length; i++) {
|
||||
legendDatas.push({
|
||||
name: this.series[i].name,
|
||||
icon: 'rect',
|
||||
itemStyle: {
|
||||
color: this.colorDatas[i],
|
||||
},
|
||||
});
|
||||
seriesDatas.push({
|
||||
name: this.series[i].name,
|
||||
barMaxWidth: 15,
|
||||
data: this.series[i].data,
|
||||
itemStyle: {
|
||||
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.8)`, // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.colorRgb[i].r},${this.colorRgb[i].g},${this.colorRgb[i].b}, 0)`, // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// emphasis:{
|
||||
// color:"#ff00ff"
|
||||
// },
|
||||
type: 'bar',
|
||||
});
|
||||
}
|
||||
|
||||
return { series: seriesDatas, legendData: legendDatas };
|
||||
},
|
||||
optionHandle() {
|
||||
let colorDatas = this.colorDatas;
|
||||
let changeData = this.getChangeData();
|
||||
let offVal = this.yAxisName.length * 10 + 20;
|
||||
let offArr = [0, 0, 0, -offVal];
|
||||
let option = {
|
||||
animationDuration: 300,
|
||||
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: 'shadow',
|
||||
shadowStyle: {
|
||||
color: '#ffffff',
|
||||
opacity: 0.08,
|
||||
width: 'auto',
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
let res = '';
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
let { name, data, seriesName } = params[i];
|
||||
let color = colorDatas[i];
|
||||
var resDiv = lineToolTips(name, color, data, seriesName, i);
|
||||
res += resDiv;
|
||||
}
|
||||
|
||||
return res;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
x: 'center', //可设定图例在左、右、居中
|
||||
y: 'top', //可设定图例在上、下、居中
|
||||
// padding:[25,10,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
||||
show: true,
|
||||
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,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
// 文字斜着
|
||||
rotate: this.axisLabelRotate,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#FFFFFF',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//x轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
name: this.yAxisName,
|
||||
nameTextStyle: {
|
||||
padding: offArr,
|
||||
opacity: 0.34,
|
||||
fontSize: 11,
|
||||
},
|
||||
nameLocation: 'end',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
onZero: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
formatter: function (v) {
|
||||
return tranNumber(v);
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//y轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: changeData.series,
|
||||
};
|
||||
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
236
lib/component/echarts/components/chart/bar/SingleBar.vue
Normal file
236
lib/component/echarts/components/chart/bar/SingleBar.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<!-- @format -->
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import BaseBar from './BaseBar.vue';
|
||||
import { tranNumber, colorTransferToRgb } from '../tool.js';
|
||||
// import * as from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MultipleBar',
|
||||
extends: BaseBar,
|
||||
props: {
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
yAxisName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
axisLabelRotate: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
colorDatas: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['#40E0F0', '#047CB6'];
|
||||
},
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#24B0D4',
|
||||
},
|
||||
shadowColor: {
|
||||
type: String,
|
||||
default: '#2DBFDD',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorRgb: [],
|
||||
borderColorRGB: {},
|
||||
shadowColorRGB: {},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
for (let i = 0; i < 2; i++) {
|
||||
this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
|
||||
}
|
||||
this.borderColorRGB = colorTransferToRgb(this.borderColor);
|
||||
this.shadowColorRGB = colorTransferToRgb(this.shadowColor);
|
||||
|
||||
let optionData = this.optionHandle();
|
||||
|
||||
this.setOption(optionData);
|
||||
this.renderChart();
|
||||
},
|
||||
methods: {
|
||||
getChangeData() {
|
||||
var seriesDatas = [];
|
||||
var legendDatas = [];
|
||||
for (let i = 0; i < this.series.length; i++) {
|
||||
legendDatas.push({
|
||||
name: this.series[i].name,
|
||||
icon: 'rect',
|
||||
itemStyle: {
|
||||
color: this.colorDatas[i],
|
||||
},
|
||||
});
|
||||
seriesDatas.push({
|
||||
name: this.series[i].name,
|
||||
barMaxWidth: '24',
|
||||
data: this.series[i].data,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b}, 0.2)`, //color: 'rgba(64, 224, 240, 0.7)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.3,
|
||||
color: `rgba(180, 180, 180, 0.1)`, // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: `rgba(180, 180, 180, 0.1)`, // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b}, 0.2)`, // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
borderColor: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b},1)`, //'rgba(36, 176, 212, 1)',
|
||||
borderWidth: 0.5,
|
||||
borderType: 'solid',
|
||||
shadowColor: `rgba(${this.shadowColorRGB.r},${this.shadowColorRGB.g},${this.shadowColorRGB.b},1)`, //'rgba(45, 191, 221, 0.7)',
|
||||
shadowBlur: 3,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontWeight: 400,
|
||||
},
|
||||
// textStyle: {
|
||||
|
||||
// },
|
||||
itemStyle: {
|
||||
shadowColor: '#30C6E1',
|
||||
shadowBlur: 4,
|
||||
borderWidth: 0.5,
|
||||
borderColor: '#00F0FF',
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${this.colorRgb[0].r},${this.colorRgb[0].g},${this.colorRgb[0].b},0.5)`, //color: 'rgba(64, 224, 240, 0.7)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.colorRgb[1].r},${this.colorRgb[1].g},${this.colorRgb[1].b},0.7)`, // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
type: 'bar',
|
||||
});
|
||||
}
|
||||
|
||||
return { series: seriesDatas, legendData: legendDatas };
|
||||
},
|
||||
optionHandle() {
|
||||
let colorDatas = this.colorDatas;
|
||||
let changeData = this.getChangeData();
|
||||
let yAxisName = this.yAxisName;
|
||||
var offVal = yAxisName.length * 10 + 20;
|
||||
var offArr = [0, 0, 0, -offVal];
|
||||
var option = {
|
||||
animationDuration: 300,
|
||||
animationEasing: 'linear',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
},
|
||||
grid: {
|
||||
// top:'24',
|
||||
left: '24',
|
||||
right: '24',
|
||||
bottom: '24',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.xAxis,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
rotate: this.axisLabelRotate,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#FFFFFF',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//x轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
name: this.yAxisName,
|
||||
nameTextStyle: {
|
||||
padding: offArr,
|
||||
opacity: 0.34,
|
||||
fontSize: 11,
|
||||
},
|
||||
nameLocation: 'end',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
onZero: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
formatter: function (v) {
|
||||
return tranNumber(v);
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: changeData.series,
|
||||
};
|
||||
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,270 @@
|
||||
<!-- @format -->
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import BaseBar from './BaseBar.vue';
|
||||
import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MultipleBar',
|
||||
extends: BaseBar,
|
||||
props: {
|
||||
yAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
axisLabelRotate: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
colorDatas: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
'#085779',
|
||||
'#16C5EC',
|
||||
'#087D76',
|
||||
'#14FFF1',
|
||||
'#135572',
|
||||
'#1593C9',
|
||||
'#04613F',
|
||||
'#11D683',
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
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 = [];
|
||||
|
||||
for (let i = 0; i < this.series.length; i++) {
|
||||
legendDatas.push({
|
||||
name: this.series[i].name,
|
||||
icon: 'rect',
|
||||
});
|
||||
seriesDatas.push({
|
||||
name: this.series[i].name,
|
||||
type: 'bar',
|
||||
barMaxWidth: '40%',
|
||||
showBackground: false,
|
||||
stack: 'total',
|
||||
barMinWidth: 5,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#FFFFFF',
|
||||
distance: 0,
|
||||
formatter: function (params) {
|
||||
if (params.value > 0) {
|
||||
return params.value;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
// position:'insideRight'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
showBackground: false,
|
||||
},
|
||||
data: this.series[i].data,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${this.colorRgb[i * 2].r},${this.colorRgb[i * 2].g},${
|
||||
this.colorRgb[i * 2].b
|
||||
},1)`, // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.colorRgb[i * 2 + 1].r},${this.colorRgb[i * 2 + 1].g},${
|
||||
this.colorRgb[i * 2 + 1].b
|
||||
}, 1)`, // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
type: 'bar',
|
||||
});
|
||||
}
|
||||
|
||||
return { series: seriesDatas, legendData: legendDatas };
|
||||
},
|
||||
optionHandle() {
|
||||
let colorDatas = this.colorDatas;
|
||||
let changeData = this.getChangeData();
|
||||
var option = {
|
||||
animationDuration: 300,
|
||||
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: 'shadow',
|
||||
shadowStyle: {
|
||||
color: '#ffffff',
|
||||
opacity: 0.08,
|
||||
width: 'auto',
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
let res = '';
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
let { name, data, seriesName } = params[i];
|
||||
let color = colorDatas[i * 2];
|
||||
var resDiv = lineToolTips(name, color, data, seriesName, i);
|
||||
res += resDiv;
|
||||
}
|
||||
|
||||
return res;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
x: 'right', //可设定图例在左、右、居中
|
||||
y: 'top', //可设定图例在上、下、居中
|
||||
padding: [0, 24, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
opacity: 0.85,
|
||||
},
|
||||
itemHeight: 8,
|
||||
itemWidth: 8,
|
||||
itemGap: 28,
|
||||
data: changeData.legendData,
|
||||
top: '24',
|
||||
},
|
||||
grid: {
|
||||
left: '24',
|
||||
right: '24',
|
||||
bottom: '24',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'bottom',
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 2,
|
||||
lineStyle: {
|
||||
color: '#FFFFFF',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//x轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 2,
|
||||
lineStyle: {
|
||||
color: '#FFFFFF',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//x轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: this.yAxis,
|
||||
show: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
onZero: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
rotate: this.axisLabelRotate,
|
||||
},
|
||||
axisTick: {
|
||||
//y轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: changeData.series,
|
||||
};
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
26
lib/component/echarts/components/chart/chartData.json
Normal file
26
lib/component/echarts/components/chart/chartData.json
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
{
|
||||
"line":{
|
||||
"name":"折线图表",
|
||||
|
||||
"LineStackedArea":{
|
||||
"id":"lsa",
|
||||
"name":"面积折线图",
|
||||
"component":"LineStackedConmmon.vue",
|
||||
"boxWidth":700,
|
||||
"boxHeight":500,
|
||||
"smooth":1
|
||||
},
|
||||
"LineStack":{
|
||||
"id":"ls",
|
||||
"name":"折线图",
|
||||
"component":"LineStackedConmmon.vue",
|
||||
"boxWidth":700,
|
||||
"boxHeight":500,
|
||||
"smooth":0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
43
lib/component/echarts/components/chart/gauge/BaseGauge.vue
Normal file
43
lib/component/echarts/components/chart/gauge/BaseGauge.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div class="base-gauge" id="basegauge" ref="BaseGaugeRef"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { init } from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BaseGauge',
|
||||
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.BaseGaugeRef, null, { renderer: 'svg' });
|
||||
}
|
||||
this.chartbox.clear();
|
||||
let option = this.getOption();
|
||||
this.chartbox.setOption(option, { notMerge: false });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.base-gauge {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
309
lib/component/echarts/components/chart/gauge/SimpleGauge.vue
Normal file
309
lib/component/echarts/components/chart/gauge/SimpleGauge.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<!-- @format -->
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import BaseBar from './BaseGauge.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SimpleGauge',
|
||||
extends: BaseBar,
|
||||
props: {
|
||||
datas: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#73FBFD',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#C0FAFF',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
let optionData = this.optionHandle();
|
||||
|
||||
this.setOption(optionData);
|
||||
this.renderChart();
|
||||
},
|
||||
methods: {
|
||||
optionHandle() {
|
||||
let _this = this;
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
radius: '80%',
|
||||
type: 'gauge',
|
||||
detail: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [[1, _this.color]],
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
min: _this.min,
|
||||
max: _this.max,
|
||||
radius: '75%',
|
||||
splitNumber: 12,
|
||||
itemStyle: {
|
||||
color: _this.color,
|
||||
},
|
||||
center: ['50%', '50%'],
|
||||
progress: {
|
||||
show: true,
|
||||
width: _this.progress,
|
||||
itemStyle: {
|
||||
color: _this.color,
|
||||
opacity: 0.7,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M1.6861, 33.5189L1.33874, 1.07101L2.2249, 1.06152L2.57226, 33.5094L1.6861, 33.5189Z,M0.649407, 20.0229L0.760354, 0.860351L3.41895, 0.875744L3.308, 20.0382L0.649407, 20.0229Z',
|
||||
// keepAspect:true,
|
||||
// icon:'path://M7.15528, 44.1242C8.9665, 44.1242, 10.4348, 42.656, 10.4348, 40.8447C10.4348, 39.0335, 8.9665, 37.5652, 7.15528, 37.5652C5.34406, 37.5652, 3.87578, 39.0335, 3.87578, 40.8447C3.87578, 42.656, 5.34406, 44.1242, 7.15528, 44.1242ZM7.15528, 48C11.107, 48, 14.3106, 44.7965, 14.3106, 40.8447C14.3106, 36.893, 11.107, 33.6895, 7.15528, 33.6895C3.20353, 33.6895, 0, 36.893, 0, 40.8447C0, 44.7965, 3.20353, 48, 7.15528, 48Z,M6.70801, 0H7.60242V33.9876H6.70801V0Z,M5.81348 0H8.49671V19.2298H5.81348V0Z',
|
||||
// icon:'path://M7.15528 44.1242C8.9665 44.1242 10.4348 42.656 10.4348 40.8447C10.4348 39.0335 8.9665 37.5652 7.15528 37.5652C5.34406 37.5652 3.87578 39.0335 3.87578 40.8447C3.87578 42.656 5.34406 44.1242 7.15528 44.1242ZM7.15528 48C11.107 48 14.3106 44.7965 14.3106 40.8447C14.3106 36.893 11.107 33.6895 7.15528 33.6895C3.20353 33.6895 0 36.893 0 40.8447C0 44.7965 3.20353 48 7.15528 48Z,M6.70801 0H7.60242V33.9876H6.70801V0Z,M5.81348 0H8.49671V19.2298H5.81348V0Z',
|
||||
|
||||
length: '75%',
|
||||
},
|
||||
// anchor:{
|
||||
// show: true,
|
||||
// size:6,
|
||||
// icon:'circle',
|
||||
// itemStyle:{
|
||||
// color:'#fff'
|
||||
// }
|
||||
// },
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
color: _this.textColor,
|
||||
fontSize: 26,
|
||||
fontWeight: 400,
|
||||
offsetCenter: [0, '70%'],
|
||||
formatter: function (value) {
|
||||
// '{80|' + value.toFixed(0) + '}{unit|%}';
|
||||
return `${value}{unit|${_this.label}}`;
|
||||
},
|
||||
rich: {
|
||||
unit: {
|
||||
fontSize: 9,
|
||||
color: _this.textColor,
|
||||
|
||||
padding: [0, 0, -15, 3],
|
||||
},
|
||||
},
|
||||
},
|
||||
data: _this.datas,
|
||||
},
|
||||
{
|
||||
radius: '58%',
|
||||
type: 'gauge',
|
||||
detail: { show: false },
|
||||
axisLine: {
|
||||
// 坐标轴线
|
||||
lineStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
color: [[1, _this.color]],
|
||||
width: 2,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
radius: '58%',
|
||||
type: 'gauge',
|
||||
detail: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [[1, _this.color]],
|
||||
width: 16,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
//内圆1
|
||||
type: 'pie',
|
||||
radius: '25%',
|
||||
center: ['50%', '50%'],
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
animation: false,
|
||||
itemStyle: {
|
||||
color: '#6DB9C6',
|
||||
opacity: 0.2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
{
|
||||
//内圆1
|
||||
type: 'pie',
|
||||
radius: '20%',
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
animation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: '#6DB9C6',
|
||||
opacity: 0.2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
{
|
||||
//内圆1
|
||||
type: 'pie',
|
||||
radius: ['8%', '4%'],
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
animation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: '#6DB9C6',
|
||||
opacity: 1,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
{
|
||||
//内圆1
|
||||
type: 'pie',
|
||||
radius: '4%',
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
animation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: '#274348',
|
||||
opacity: 1,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
],
|
||||
};
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
398
lib/component/echarts/components/chart/gauge/index.vue
Normal file
398
lib/component/echarts/components/chart/gauge/index.vue
Normal file
@@ -0,0 +1,398 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div class="content-chart">
|
||||
<div class="chartContainer1" id="chartContainer1" ref="ChartEl1"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
// import { get_all_data } from './main';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Dashboard',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
// map: {},
|
||||
// growthRatioRate: null,
|
||||
// complaintSumCount: 0, //累计投诉数量
|
||||
// todayComplaintCount: 0, //今日投诉数量
|
||||
// sumCount: null, //累计反馈总数
|
||||
// todaySumCount: null, //今日反馈总数
|
||||
// replyCount: null, //累计回复总数
|
||||
// growthRatioType: null,
|
||||
// valueStyle: `background: linear-gradient(180deg, #E1F5FE 0%, #E1F5FE 28.7%, #4DC6F5 31.13%, #11B6EE 56.06%);
|
||||
// -webkit-background-clip:
|
||||
// text;color: transparent;
|
||||
// font-size:32px;
|
||||
// height:40px;
|
||||
// line-height: 40px;
|
||||
// font-weight: bold;
|
||||
// letter-spacing:0px;`,
|
||||
// chart: null,
|
||||
// chart1: null,
|
||||
// dataSource: [],
|
||||
// selectItem: '',
|
||||
// timer: {},
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// debugger;
|
||||
// var jsonData = get_all_data();
|
||||
this.setChart();
|
||||
},
|
||||
methods: {
|
||||
setChart() {
|
||||
// debugger;
|
||||
if (!this.chart1) {
|
||||
this.chart1 = echarts.init(this.$refs.ChartEl1, null, { renderer: 'svg' });
|
||||
}
|
||||
this.chart1.clear();
|
||||
let options1 = {
|
||||
series: [
|
||||
{
|
||||
radius: '80%',
|
||||
type: 'gauge',
|
||||
detail: { show: false },
|
||||
axisLine: {
|
||||
// 坐标轴线
|
||||
lineStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
color: [[1, '#0EE5E5']],
|
||||
width: 2,
|
||||
// ,
|
||||
// shadowColor: '#fff', //默认透明
|
||||
// shadowBlur: 10
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: 'gauge',
|
||||
// startAngle: -45,
|
||||
// endAngle: 180,
|
||||
min: 0,
|
||||
max: 180,
|
||||
radius: '75%',
|
||||
splitNumber: 12,
|
||||
itemStyle: {
|
||||
color: 'rgb(82,180,182)',
|
||||
},
|
||||
center: ['50%', '50%'],
|
||||
progress: {
|
||||
show: true,
|
||||
// roundCap: true,
|
||||
width: 18,
|
||||
itemStyle: {
|
||||
// borderWidth: 2,
|
||||
// borderColor: "rgba(227, 18, 18, 1)",
|
||||
// borderType: "solid",
|
||||
// borderCap: "square",
|
||||
// borderMiterLimit:20,
|
||||
// borderDashOffset:15,
|
||||
// shadowColor: 'rgba(250, 250, 0, 0.5)',
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetY:30,
|
||||
// borderType: [15, 15],
|
||||
// borderSolidOffset: 5,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#73FBFD', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#73FBFD', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
// roundCap: true,
|
||||
// lineStyle: {
|
||||
// color: [
|
||||
// [0, '#1B444F'],
|
||||
// [1, '#1B4488'],
|
||||
// ],
|
||||
|
||||
// width: 18,
|
||||
// },
|
||||
},
|
||||
// axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
// show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
// lineStyle: { // 仪表盘轴线样式。
|
||||
// color: [
|
||||
// [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// {
|
||||
// offset: 0.1,
|
||||
// color: "#AAF02E"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.3,
|
||||
// color: "#CEE326"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: "#EBD212"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#FF6A00"
|
||||
// }
|
||||
// ])
|
||||
// ]
|
||||
// ],
|
||||
// // color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
// opacity: 0.8, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
// width: 15, //轴线宽度,默认 30。
|
||||
// shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
|
||||
// }
|
||||
// },
|
||||
pointer: {
|
||||
//circle', 'rect', 'roundRect' 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||||
// icon:'path://M1.28582 2.53393L34.9873 16.8505,M1.28582 2.53393L34.9873 16.8505,M1.28564 1.98535L21.0455 10.7669',
|
||||
length: '75%',
|
||||
},
|
||||
anchor: {
|
||||
show: true,
|
||||
size: 6,
|
||||
icon: 'circle',
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
// distance: 2,
|
||||
// length: 6,
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// },
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
color: '#0FB9DC',
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
offsetCenter: [0, '50%'],
|
||||
formatter: function (value) {
|
||||
// return 80 + '%';
|
||||
return '{80|' + value.toFixed(0) + '}{unit|%}';
|
||||
},
|
||||
rich: {
|
||||
// value: {
|
||||
// fontSize: 50,
|
||||
// fontWeight: 'bolder',
|
||||
// color: '#777000'
|
||||
// },
|
||||
unit: {
|
||||
fontSize: 15,
|
||||
color: '#0FB9DC',
|
||||
|
||||
padding: [0, 0, -15, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 80,
|
||||
name: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
radius: '58%',
|
||||
type: 'gauge',
|
||||
detail: { show: false },
|
||||
axisLine: {
|
||||
// 坐标轴线
|
||||
lineStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
color: [[1, '#0EE5E5']],
|
||||
width: 2,
|
||||
opacity: 0.4,
|
||||
// ,
|
||||
// shadowColor: '#fff', //默认透明
|
||||
// shadowBlur: 10
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
radius: '58%',
|
||||
type: 'gauge',
|
||||
detail: { show: false },
|
||||
axisLine: {
|
||||
// 坐标轴线
|
||||
lineStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
color: [[1, '#0EE5E5']],
|
||||
width: 16,
|
||||
opacity: 0.2,
|
||||
// ,
|
||||
// shadowColor: '#fff', //默认透明
|
||||
// shadowBlur: 10
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
//内圆1
|
||||
type: 'pie',
|
||||
radius: '20%',
|
||||
center: ['50%', '50%'],
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#0EE5E5',
|
||||
opacity: 0.2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
{
|
||||
//内圆1
|
||||
type: 'pie',
|
||||
radius: '15%',
|
||||
center: ['50%', '50%'],
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#0EE5E5',
|
||||
opacity: 0.2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
// ,
|
||||
// {
|
||||
// radius: '20%',
|
||||
// type: 'gauge',
|
||||
// startAngle:0,
|
||||
// endAngle:360,
|
||||
// detail: {show:false},
|
||||
// axisLine: { // 坐标轴线
|
||||
// lineStyle: { // 属性lineStyle控制线条样式
|
||||
// color: [ [1, '#0EE5E5']],
|
||||
// width: 16,
|
||||
// opacity:0.2
|
||||
// // ,
|
||||
// // shadowColor: '#fff', //默认透明
|
||||
// // shadowBlur: 10
|
||||
// }
|
||||
// },
|
||||
// axisLabel:{
|
||||
// show:false
|
||||
// },
|
||||
// splitLine:{
|
||||
// show:false
|
||||
// },
|
||||
// axisTick:{
|
||||
// show:false
|
||||
// },
|
||||
// pointer:{
|
||||
// show:false
|
||||
// }
|
||||
// }
|
||||
],
|
||||
};
|
||||
this.chart1.setOption(options1, { notMerge: false });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.content-chart {
|
||||
margin: 30px auto;
|
||||
padding: 0 16px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
// position: relative;
|
||||
|
||||
.chartContainer1 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
43
lib/component/echarts/components/chart/pie/BasePie.vue
Normal file
43
lib/component/echarts/components/chart/pie/BasePie.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div class="base-pie" id="basepie" ref="BasePieRef"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { init } from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasePie',
|
||||
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.BasePieRef, null, { renderer: 'svg' });
|
||||
}
|
||||
this.chartbox.clear();
|
||||
let option = this.getOption();
|
||||
this.chartbox.setOption(option, { notMerge: false });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.base-pie {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
219
lib/component/echarts/components/chart/pie/PieLabelLineAlign.vue
Normal file
219
lib/component/echarts/components/chart/pie/PieLabelLineAlign.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<!-- @format -->
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import BaseBar from './BasePie.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PieLabelLineAlign',
|
||||
extends: BaseBar,
|
||||
props: {
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
colorDatas: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
'#15B0A7',
|
||||
'#2193D3',
|
||||
'#2D71D8',
|
||||
'#10AAB4',
|
||||
'#1AA5E1',
|
||||
'#15B0A7',
|
||||
'#1AA5E1',
|
||||
'#30BB78',
|
||||
'#04C19F',
|
||||
'#37B2E7',
|
||||
'#397ADC',
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
let optionData = this.optionHandle();
|
||||
|
||||
this.setOption(optionData);
|
||||
this.renderChart();
|
||||
},
|
||||
methods: {
|
||||
optionHandle() {
|
||||
let clientWidth = parseInt(this.$refs.BasePieRef.clientWidth);
|
||||
let colorDatas = this.colorDatas;
|
||||
let colorLen = colorDatas.length;
|
||||
let borderColor = this.borderColor;
|
||||
let { name: titleName, data: seriesDatas, total } = this.series[0];
|
||||
let option = {
|
||||
animationDuration: 300,
|
||||
animationEasing: 'linear',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
},
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '44%',
|
||||
z: 5,
|
||||
style: {
|
||||
text: titleName,
|
||||
textAlign: 'center',
|
||||
font: '400 0.563em "Microsoft YaHei"',
|
||||
fill: '#EBF9FF',
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '49%',
|
||||
z: 5,
|
||||
style: {
|
||||
text: total,
|
||||
textAlign: 'center',
|
||||
font: '500 1.8125em "Microsoft YaHei"',
|
||||
fill: '#E1F5FE',
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: titleName,
|
||||
type: 'pie',
|
||||
radius: ['35%', '50%'],
|
||||
itemStyle: {
|
||||
borderColor: borderColor,
|
||||
borderWidth: 2,
|
||||
color: function (params) {
|
||||
var idx = params.dataIndex;
|
||||
|
||||
return colorDatas[idx % colorLen];
|
||||
// debugger;
|
||||
},
|
||||
},
|
||||
textStyle: { fontSize: '12', fontFamily: 'Microsoft YaHei' },
|
||||
data: seriesDatas.map((item, index) => {
|
||||
item.label = {
|
||||
color: colorDatas[index % colorLen],
|
||||
};
|
||||
return item;
|
||||
}),
|
||||
label: {
|
||||
show: true,
|
||||
alignTo: 'labelLine',
|
||||
minMargin: 8,
|
||||
edgeDistance: 20,
|
||||
lineHeight: 15,
|
||||
// 这里定义了文本 百分比 是'value'样式的
|
||||
formatter: '{value|{b}} {c} {d}%',
|
||||
rich: {
|
||||
// 这个'value'样式表示文字颜色为白色
|
||||
value: {
|
||||
fontSize: 11,
|
||||
color: '#EFFFFF',
|
||||
opacity: 0.65,
|
||||
},
|
||||
},
|
||||
// color:function (params){
|
||||
// var idx = params.dataIndex;
|
||||
|
||||
// return colorDatas[idx%colorLen];
|
||||
// // debugger;
|
||||
// },
|
||||
// formatter: function(val){
|
||||
// debugger;
|
||||
// let data = val.data;
|
||||
// let rStr = "";
|
||||
// let index = -1;
|
||||
// for(let key in data){
|
||||
// index += 1;
|
||||
// let m = 'mark'+index;
|
||||
// rStr += data[key]+"-";//`{${m}|${data[key]}}`
|
||||
// }
|
||||
// return rStr;
|
||||
// },
|
||||
// rich: {
|
||||
// mark0:{
|
||||
// fontSize: 11,
|
||||
// color:'#EFFFFF',
|
||||
// opacity:0.65
|
||||
// }
|
||||
// ,
|
||||
// mark1:{
|
||||
// padding: [0,0,0,8],
|
||||
// color:'#397ADC',
|
||||
// opacity:0.65
|
||||
// },
|
||||
// mark2:{
|
||||
// padding: [0,0,0,8],
|
||||
// color:'#397ADC',
|
||||
// opacity:0.65
|
||||
// }
|
||||
// }
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#FFFFFF', opacity: 0.35 },
|
||||
length: 10,
|
||||
length2: 2,
|
||||
maxSurfaceAngle: 60,
|
||||
},
|
||||
labelLayout: function (params) {
|
||||
const isLeft = params.labelRect.x < clientWidth / 2;
|
||||
const points = params.labelLinePoints;
|
||||
params.labelRect.y = params.labelRect.y - 7;
|
||||
points[2][0] = isLeft
|
||||
? params.labelRect.x
|
||||
: params.labelRect.x + params.labelRect.width;
|
||||
return {
|
||||
dy: -8,
|
||||
labelLinePoints: points,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bg',
|
||||
type: 'pie',
|
||||
radius: '30%',
|
||||
showEmptyCircle: true,
|
||||
emptyCircleStyle: {
|
||||
color: '#00667C',
|
||||
opacity: 0.3,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bg2',
|
||||
type: 'pie',
|
||||
radius: '25%',
|
||||
showEmptyCircle: true,
|
||||
emptyCircleStyle: {
|
||||
color: '#027D98',
|
||||
borderWidth: 1,
|
||||
shadowColor: 'rgba(2, 125, 152, 1)',
|
||||
shadowBlur: 2,
|
||||
opacity: 0.4,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
43
lib/component/echarts/components/chart/radar/BaseRadar.vue
Normal file
43
lib/component/echarts/components/chart/radar/BaseRadar.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div class="base-radar" id="baseradar" ref="BaseRadarRef"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { init } from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BaseRadar',
|
||||
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.BaseRadarRef, null, { renderer: 'svg' });
|
||||
}
|
||||
this.chartbox.clear();
|
||||
let option = this.getOption();
|
||||
this.chartbox.setOption(option, { notMerge: false });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.base-radar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
141
lib/component/echarts/components/chart/radar/CustomizedRadar.vue
Normal file
141
lib/component/echarts/components/chart/radar/CustomizedRadar.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<!-- @format -->
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import BaseRadar from './BaseRadar.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicRadar',
|
||||
extends: BaseRadar,
|
||||
props: {
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
indicator: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '75%',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
let optionData = this.optionHandle();
|
||||
|
||||
this.setOption(optionData);
|
||||
this.renderChart();
|
||||
},
|
||||
methods: {
|
||||
optionHandle() {
|
||||
let _this = this;
|
||||
let index = 0;
|
||||
let color = [
|
||||
'#0075FF',
|
||||
'#7a7b82',
|
||||
'#B2BCF3',
|
||||
'#655ADC',
|
||||
'#D04CFF',
|
||||
'#F14A4A',
|
||||
'#EB9260',
|
||||
'#E8EB60',
|
||||
'#3FE280',
|
||||
'#3FC5E2',
|
||||
];
|
||||
let richObj = {
|
||||
top: {
|
||||
color: '#10C8D8',
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
align: 'left',
|
||||
padding: [0, 0, 5, 10],
|
||||
},
|
||||
// 属性下部分样式
|
||||
end: {
|
||||
color: 'rgba(255, 255, 250, 0.65)',
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fonSize: 12,
|
||||
fontWeight: 400,
|
||||
align: 'center',
|
||||
},
|
||||
};
|
||||
for (let i = 0; i < color.length; i++) {
|
||||
var obj = { height: 6, width: 6, align: 'center', backgroundColor: color[i] };
|
||||
richObj['rect' + (i + 1)] = obj;
|
||||
}
|
||||
let option = {
|
||||
animationDuration: 300,
|
||||
animationEasing: 'linear',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
},
|
||||
radar: {
|
||||
radius: '70%',
|
||||
splitNumber: 2, // 雷达图圈数设置
|
||||
axisName: {
|
||||
formatter: (params) => {
|
||||
// 使用formatter可以将结果进行重定义，同时可以使用语法`{|}`来引入富文本样式
|
||||
// debugger;
|
||||
// console.log(params);
|
||||
let a = params.split(',')[0];
|
||||
let b = params.split(',')[1];
|
||||
// `${0}px`
|
||||
index++;
|
||||
var rect = 'rect' + index;
|
||||
return `{top|${a}}\n{${rect}|} {end|${b}}`;
|
||||
// return '{top|'+a+'}' + '\n' + '{rect|}{end|'+b+'}'
|
||||
},
|
||||
// 富文本样式定义
|
||||
rich: richObj,
|
||||
},
|
||||
// 设置雷达图坐标轴线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 205, 0.05)',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: 'rgba(255,0,0,0)', // 图表背景的颜色
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: ['rgba(255, 255, 255, 0.1)', 'rgba(6, 235, 238, 0.1)'],
|
||||
// color: 'rgba(255, 255, 255, 0.1)', // 设置网格的颜色
|
||||
},
|
||||
},
|
||||
indicator: _this.indicator,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#06EBEE',
|
||||
width: 2,
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(6, 235, 238, 0.1)',
|
||||
},
|
||||
data: _this.series,
|
||||
},
|
||||
],
|
||||
};
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
89
lib/component/echarts/components/chart/tool.js
Normal file
89
lib/component/echarts/components/chart/tool.js
Normal file
@@ -0,0 +1,89 @@
|
||||
import chartdatas from './chartData.json';
|
||||
|
||||
const chartDatas = chartdatas;
|
||||
|
||||
export function getAllChartdatas(){
|
||||
return chartDatas;
|
||||
}
|
||||
export function getChartData(name,childName){
|
||||
return chartDatas[name][childName];
|
||||
}
|
||||
|
||||
export function tranNumber(num){
|
||||
let numStr = num.toString();
|
||||
let numV = 0;
|
||||
// 十万以内直接返回
|
||||
if (numStr.length < 5 ) {
|
||||
return numStr;
|
||||
}else if(numStr.length>=5 && numStr.length<=7){
|
||||
// 单位用K（千）
|
||||
numV =parseInt(num/1000);
|
||||
return numV+'K';
|
||||
}else if(numStr.length>=8 && numStr.length<=10){
|
||||
numV =parseInt(num/10000);
|
||||
return numV+'W';
|
||||
}else if(numStr.length>=11){
|
||||
numV =parseInt(num/100000000);
|
||||
return numV+'M';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// 折线 图表 统一弹窗
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @export
|
||||
* @param {*} name 标题
|
||||
* backgrouncolor 背景色
|
||||
* @param {*} data 数据
|
||||
* @param {*} seriesName 系列名
|
||||
* @param {*} label 数据后面的单位
|
||||
*/
|
||||
export function lineToolTips(name,backgrouncolor,data,seriesName,index){
|
||||
// var res = `<div>
|
||||
|
||||
// </div>`
|
||||
// var top = index==0?0:15;
|
||||
var res = `<div style="font-size:12px; color:#ffffff;text-align:left;">
|
||||
<span style="display:inline-block;margin-right:0px;width:8px;height:8px;border-radius:0px;background-color:${backgrouncolor};"></span>
|
||||
<span style="margin-right:3px;opacity: 0.65;">${seriesName}</span>
|
||||
<span style="opacity: 0.65;">${name}</span>
|
||||
<span style="font-weight:400;color:#fff;margin-left:3px;">
|
||||
${data}</span>
|
||||
</div>`
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @export 16进制颜色值转RGB
|
||||
* @param {*} color
|
||||
* @return {*}
|
||||
*/
|
||||
export function colorTransferToRgb(color) {
|
||||
var colorObj = {r:0,g:0,b:0};
|
||||
if (typeof color !== 'string' && !(color instanceof String)) return console.error("请输入16进制字符串形式的颜色值");
|
||||
color = color.charAt(0) === '#' ? color.substring(1) : color;
|
||||
if (color.length !== 6 && color.length !== 3) return console.error("请输入正确的颜色值")
|
||||
if (color.length === 3) {
|
||||
color = color.replace(/(\w)(\w)(\w)/, '$1$1$2$2$3$3')
|
||||
}
|
||||
var reg = /\w{2}/g;
|
||||
var colors = color.match(reg);
|
||||
for (var i = 0; i < colors.length; i++) {
|
||||
colors[i] = parseInt(colors[i], 16).toString();
|
||||
if(i==0){
|
||||
colorObj.r = parseInt(colors[i]);
|
||||
}else if(i==1){
|
||||
colorObj.g = parseInt(colors[i]);
|
||||
}else if(i==2){
|
||||
colorObj.b = parseInt(colors[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return colorObj;
|
||||
}
|
||||
293
lib/component/echarts/components/other/BasicTable copy 2.vue
Normal file
293
lib/component/echarts/components/other/BasicTable copy 2.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="table-view" id="tableView">
|
||||
<div class="thead">
|
||||
<div v-for="(value,key,index) in theadDatas" :key="index" :class="'flex'+index">{{value}}</div>
|
||||
</div>
|
||||
<div class="tbodymain">
|
||||
<div class="tbody b1" ref="tbody1">
|
||||
<div v-for="item in tableDatas1" :key="item.id" class="row">
|
||||
<div v-for="(value,key,index) in item" :key="index" :class="'flex'+index"><span :class=[timeHandle(key),colorHandle(key,value)]>{{value}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody b2" ref="tbody2">
|
||||
<div v-for="item in tableDatas2" :key="item.id" class="row">
|
||||
<div v-for="(value,key,index) in item" :key="index" :class="'flex'+index"><span :class=[timeHandle(key),colorHandle(key,value)]>{{value}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
// import { init } from './js/index.js'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'baisicTable',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
timeOut:null,
|
||||
srolltime:null,
|
||||
height:26,
|
||||
tableDatas:[
|
||||
{num:"沪866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"沪866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"沪866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"沪866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"沪866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"沪866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"沪866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"赣866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"赣866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"赣866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"赣866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"赣866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"赣866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"赣866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"}
|
||||
],
|
||||
theadDatas:{num:"车牌号",color:"车牌颜色",positon:"违停地点",time:"违停时间"},
|
||||
tableDatas1:[],
|
||||
tableDatas2:[],
|
||||
pageIndex:0,
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(this.tableDatas.length>=14){
|
||||
for(let i=0;i<7;i++){
|
||||
this.tableDatas1.push(this.tableDatas[i]);
|
||||
this.tableDatas2.push(this.tableDatas[i+7]);
|
||||
}
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// init();
|
||||
if(this.tableDatas.length>7){
|
||||
this.timeIntervalHandle();
|
||||
}else{
|
||||
this.tableDatas1 = this.tableDatas;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
timeIntervalHandle(){
|
||||
// debugger;
|
||||
console.log(this.$refs.tbody1);
|
||||
// this.$refs.tbody1.scrollTop = -20;
|
||||
this.$refs.tbody1.style.top = `${0}px`;
|
||||
this.$refs.tbody2.style.top = `${182}px`;
|
||||
// console.log(this.$refs.tbody1.scrollTop);
|
||||
this.srollHanle();
|
||||
},
|
||||
changDatas(){
|
||||
|
||||
},
|
||||
srollHanle(){
|
||||
let scrollH = 0;
|
||||
let _this = this;
|
||||
this.srolltime = setInterval(function(){
|
||||
scrollH += 2;
|
||||
// debugger;
|
||||
_this.$refs.tbody1.style.top = (parseInt(_this.$refs.tbody1.style.top) - 2)+"px";
|
||||
_this.$refs.tbody2.style.top = (parseInt(_this.$refs.tbody2.style.top) - 2)+"px";
|
||||
|
||||
if(scrollH>=26){
|
||||
clearInterval(_this.srolltime);
|
||||
if(parseInt(_this.$refs.tbody1.style.top)<=-182){
|
||||
_this.$refs.tbody1.style.top = 182+'px';
|
||||
// _this.$refs.tbody2.style.top = 0+'px';
|
||||
}else if(parseInt(_this.$refs.tbody2.style.top)<=-182){
|
||||
_this.$refs.tbody2.style.top = 182+'px';
|
||||
// _this.$refs.tbody1.style.top = 0+'px';
|
||||
}
|
||||
_this.timeOut = setTimeout(_this.srollHanle,1500);
|
||||
}
|
||||
},20)
|
||||
},
|
||||
timeHandle(key){
|
||||
// debugger;
|
||||
if(key=="time"){
|
||||
return 'time';
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
colorHandle(key,value){
|
||||
// debugger;
|
||||
if(key=="color"){
|
||||
if(value.indexOf('蓝') != -1){
|
||||
return 'blue';
|
||||
}else if(value.indexOf('黄') != -1){
|
||||
return 'yellow';
|
||||
}else if(value.indexOf('绿') != -1){
|
||||
return 'green';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.table-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0E748A;
|
||||
// border: 1.5px solid #0E748A;
|
||||
// box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
|
||||
color: #FFFFFF;
|
||||
background-color: #04465B;
|
||||
font-size: 10px;
|
||||
// text-transform: scale(0.75);
|
||||
// transform:scale(0.5,1);
|
||||
.thead{
|
||||
display: flex;
|
||||
background-color: #005062;
|
||||
border-bottom: 1px solid #0E748A;
|
||||
// padding: 10px 20px;
|
||||
// position: relative;
|
||||
div{
|
||||
flex: 1;//平均份
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
opacity: 0.85;
|
||||
margin: 5px 10px;
|
||||
word-break:keep-all; /* 不换行 */
|
||||
white-space:nowrap; /* 不换行 */
|
||||
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
|
||||
}
|
||||
.flex0{
|
||||
flex:1;
|
||||
}
|
||||
.flex1{
|
||||
flex:1;
|
||||
}
|
||||
.flex2{
|
||||
flex:3;
|
||||
}
|
||||
.flex3{
|
||||
flex:2.3;
|
||||
}
|
||||
}
|
||||
.tbodymain{
|
||||
position: relative;
|
||||
// width: 100%;
|
||||
height: 183px;
|
||||
|
||||
overflow: hidden;
|
||||
// display: flex;
|
||||
// flex
|
||||
.tbody{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top:0px;
|
||||
border-top: none;
|
||||
height: 182px;
|
||||
// display: flex;
|
||||
|
||||
.row:nth-child(odd){
|
||||
background-color: rgba(0,31,49,0.4);
|
||||
}
|
||||
.row:nth-child(even){
|
||||
background-color: rgba(0,70,105,0.4);
|
||||
}
|
||||
.row{
|
||||
height: 26px;
|
||||
display: flex;
|
||||
// justify-content:space-between;
|
||||
// padding: 10px 20px;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
|
||||
// opacity: 0.65;
|
||||
// background-color: #001F31;
|
||||
div{
|
||||
flex: 1;//平均份
|
||||
// padding: 10px 20px;
|
||||
margin: 5px 10px;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
// opacity: 0.65;
|
||||
word-break:keep-all; /* 不换行 */
|
||||
white-space:nowrap; /* 不换行 */
|
||||
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
|
||||
span{
|
||||
opacity: 0.65;
|
||||
}
|
||||
.blue{
|
||||
background-color:rgba(87, 208, 235, 0.2);
|
||||
color: #57D0EB;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(87, 208, 235, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.yellow{
|
||||
background-color:rgba(235, 211, 87, 0.2);
|
||||
color: #EBD357;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(235, 211, 87, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.green{
|
||||
background-color:rgba(87, 235, 155, 0.2);
|
||||
color: #57EB9B;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(87, 235, 155, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.time{
|
||||
background-color: #012539;
|
||||
border-radius: 2px;
|
||||
padding: 5px 10px;
|
||||
overflow:hidden;
|
||||
opacity: 0.7;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.flex0{
|
||||
flex:1;
|
||||
}
|
||||
.flex1{
|
||||
flex:1;
|
||||
}
|
||||
.flex2{
|
||||
flex:3;
|
||||
}
|
||||
.flex3{
|
||||
flex:2.3;
|
||||
}
|
||||
}
|
||||
|
||||
box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
|
||||
}
|
||||
.b2{
|
||||
.row:nth-child(odd){
|
||||
background-color: rgba(0,70,105,0.4);
|
||||
}
|
||||
.row:nth-child(even){
|
||||
background-color: rgba(0,31,49,0.4);
|
||||
}
|
||||
}
|
||||
// .b1{
|
||||
// top:0px;
|
||||
// }
|
||||
// .b2{
|
||||
// top: -40px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
88
lib/component/echarts/components/other/BasicTable copy.vue
Normal file
88
lib/component/echarts/components/other/BasicTable copy.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="table-view" id="tableView">
|
||||
|
||||
|
||||
<table class="table-main" border="0" cellpadding = "10" align="left" >
|
||||
<thead>
|
||||
<tr height="25" valign="middle">
|
||||
<td v-for="(value,key,index) in theadDatas" :key="index">{{value}}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableDatas" :key="item.id">
|
||||
<td v-for="(value,key,index) in item" :key="index">{{value}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
// import { init } from './js/index.js'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'baisicTable',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
theadDatas:{num:"车牌号",color:"车牌颜色",positon:"违停地点",time:"违停时间"},
|
||||
tableDatas:[
|
||||
{num:"沪866B61",color:"#57D0EB",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||||
{num:"沪866B61",color:"#57D0EB",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"}
|
||||
],
|
||||
theadKeys:null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.theadKeys = Object.keys(this.theadDatas);
|
||||
},
|
||||
mounted() {
|
||||
// init();
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.table-view{
|
||||
// position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1.5px solid #0E748A;
|
||||
box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
|
||||
.table-main{
|
||||
// border = "1" width = "90%" cellspacing="0" cellpadding = "10"
|
||||
color: #FFFFFF;
|
||||
font-size: 10;
|
||||
// border: 1.5px solid #0E748A;
|
||||
thead{
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
background-color: #005062;
|
||||
}
|
||||
td{
|
||||
// width:100%;
|
||||
|
||||
word-break:keep-all; /* 不换行 */
|
||||
|
||||
white-space:nowrap; /* 不换行 */
|
||||
|
||||
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
|
||||
|
||||
}
|
||||
thead{
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
368
lib/component/echarts/components/other/BasicTable-old.vue
Normal file
368
lib/component/echarts/components/other/BasicTable-old.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div class="table-view" id="tableView">
|
||||
<div class="thead">
|
||||
<div v-for="(value,key,index) in thead" :key="index" :class="'flex'+index">{{value}}</div>
|
||||
</div>
|
||||
<div class="tbodymain" @mouseenter="bodyMouseEnter" @mouseleave="bodyMouseLeave">
|
||||
<div class="tbody b1" ref="tbody1">
|
||||
<div v-for="item in tableDatas1" :key="item.id" class="row">
|
||||
<div v-for="(value,key,index) in item" :key="index" :class="'flex'+index">
|
||||
<!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
|
||||
<span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)]>{{value}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody b2" ref="tbody2">
|
||||
<div v-for="item in tableDatas2" :key="item.id" class="row">
|
||||
<div v-for="(value,key,index) in item" :key="index" :class="'flex'+index">
|
||||
<!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
|
||||
<span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)]>{{value}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'baisicTable',
|
||||
props: {
|
||||
datas:{
|
||||
type:Array,
|
||||
required: true
|
||||
},
|
||||
thead:{
|
||||
type:Array,
|
||||
required: true
|
||||
},
|
||||
fontScroll:{
|
||||
type:Number,
|
||||
default:14
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeOut:null,
|
||||
srolltime:null,
|
||||
tableDatas1:[],
|
||||
tableDatas2:[],
|
||||
pageIndex:0,
|
||||
isColScroll:true,
|
||||
total:0,
|
||||
curPage:0,
|
||||
|
||||
height:26,
|
||||
|
||||
tableDatas:[]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
datas:{
|
||||
handler(newval){
|
||||
this.tableDatas = newval;
|
||||
this.changDatas();
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.tableDatas = this.datas;
|
||||
let len = this.tableDatas.length;
|
||||
if(len>=14){
|
||||
this.tableDatas1 = this.tableDatas.slice(0,7);
|
||||
this.tableDatas2 = this.tableDatas.slice(7,14);
|
||||
}else if(len>7 && len<14){
|
||||
this.tableDatas1 = this.tableDatas.slice(0,7);
|
||||
this.tableDatas2 = this.tableDatas.slice(7,len);
|
||||
let addData = this.tableDatas.slice(0,7-this.tableDatas2.length);
|
||||
this.tableDatas2 = this.tableDatas2.concat(addData);
|
||||
}else if(len <= 7){
|
||||
this.tableDatas1 = this.tableDatas;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
if(this.tableDatas.length>7){
|
||||
this.timeIntervalHandle();
|
||||
}else{
|
||||
this.tableDatas1 = this.tableDatas;
|
||||
}
|
||||
if(this.tableDatas.length>14){
|
||||
this.changDatas();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changDatas(){
|
||||
let len = this.tableDatas.length;
|
||||
|
||||
this.page = Math.ceil(len/7);
|
||||
let endNum = len%7;
|
||||
if(endNum>0){
|
||||
let addNum = 7-endNum;
|
||||
let addArr = this.tableDatas.slice(0,addNum);
|
||||
this.tableDatas = this.tableDatas.concat(addArr);
|
||||
}
|
||||
this.curPage = 1;
|
||||
},
|
||||
bodyMouseEnter(){
|
||||
this.isColScroll = false;
|
||||
},
|
||||
bodyMouseLeave(){
|
||||
this.isColScroll = true;
|
||||
this.srollHandle();
|
||||
},
|
||||
marqueeStart(e){
|
||||
e.currentTarget.start();
|
||||
},
|
||||
marqueeStop(e){
|
||||
e.currentTarget.stop();
|
||||
},
|
||||
timeIntervalHandle(){
|
||||
this.$refs.tbody1.style.top = `${0}px`;
|
||||
this.$refs.tbody2.style.top = `${182}px`;
|
||||
setTimeout(this.srollHandle,3000);
|
||||
},
|
||||
srollHandle(){
|
||||
if(!this.isColScroll) return;
|
||||
let scrollH = 0;
|
||||
let _this = this;
|
||||
clearInterval(this.srolltime);
|
||||
clearTimeout(this.timeOut);
|
||||
this.srolltime = setInterval(function(){
|
||||
scrollH += 2;
|
||||
_this.$refs.tbody1.style.top = (parseInt(_this.$refs.tbody1.style.top) - 2)+"px";
|
||||
_this.$refs.tbody2.style.top = (parseInt(_this.$refs.tbody2.style.top) - 2)+"px";
|
||||
// console.log("执行");
|
||||
if(scrollH>=26){
|
||||
clearInterval(_this.srolltime);
|
||||
if(parseInt(_this.$refs.tbody1.style.top)<=-182){
|
||||
_this.$refs.tbody1.style.top = 182+'px';
|
||||
if(_this.page > 2){
|
||||
_this.updateData(1);
|
||||
}
|
||||
}else if(parseInt(_this.$refs.tbody2.style.top)<=-182){
|
||||
_this.$refs.tbody2.style.top = 182+'px';
|
||||
if(_this.page > 2){
|
||||
_this.updateData(2);
|
||||
}
|
||||
}
|
||||
_this.timeOut = setTimeout(_this.srollHandle,1500);
|
||||
}
|
||||
},24);
|
||||
},
|
||||
updateData(id){
|
||||
this.curPage++;
|
||||
if(this.curPage>=this.page){
|
||||
this.curPage = 0;
|
||||
}
|
||||
let start = parseInt(this.curPage*7);
|
||||
let end = start+7;
|
||||
let getData = this.tableDatas.slice(start,end);
|
||||
if(id==1){
|
||||
this.tableDatas1 = getData;
|
||||
}else{
|
||||
this.tableDatas2 = getData;
|
||||
}
|
||||
},
|
||||
timeHandle(key){
|
||||
if(key=="time"){
|
||||
return 'time';
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
scrollHandle(key,value){
|
||||
if(key=='positon' && value.length>this.fontScroll){
|
||||
return 'animate';
|
||||
}
|
||||
|
||||
},
|
||||
colorHandle(key,value){
|
||||
if(key=="color"){
|
||||
if(value.indexOf('蓝') != -1){
|
||||
return 'blue';
|
||||
}else if(value.indexOf('黄') != -1){
|
||||
return 'yellow';
|
||||
}else if(value.indexOf('绿') != -1){
|
||||
return 'green';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.table-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0E748A;
|
||||
color: #FFFFFF;
|
||||
background-color: #04465B;
|
||||
font-size: 10px;
|
||||
.thead{
|
||||
display: flex;
|
||||
background-color: #005062;
|
||||
border-bottom: 1px solid #0E748A;
|
||||
div{
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
opacity: 0.85;
|
||||
margin: 5px 10px;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
}
|
||||
.flex0{
|
||||
flex:1;
|
||||
}
|
||||
.flex1{
|
||||
flex:1;
|
||||
}
|
||||
.flex2{
|
||||
flex:3;
|
||||
}
|
||||
.flex3{
|
||||
flex:2.3;
|
||||
}
|
||||
}
|
||||
.tbodymain{
|
||||
position: relative;
|
||||
height: 183px;
|
||||
|
||||
overflow: hidden;
|
||||
.tbody{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top:0px;
|
||||
border-top: none;
|
||||
height: 182px;
|
||||
|
||||
.row:nth-child(odd){
|
||||
background-color: rgba(0,31,49,0.4);
|
||||
}
|
||||
.row:nth-child(even){
|
||||
background-color: rgba(0,70,105,0.4);
|
||||
}
|
||||
.row{
|
||||
height: 26px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
div{
|
||||
flex: 1;//平均份
|
||||
margin: 5px 12px;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
span{
|
||||
opacity: 0.65;
|
||||
}
|
||||
marquee{
|
||||
opacity: 0.65;
|
||||
}
|
||||
.blue{
|
||||
background-color:rgba(87, 208, 235, 0.2);
|
||||
color: #57D0EB;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(87, 208, 235, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.yellow{
|
||||
background-color:rgba(235, 211, 87, 0.2);
|
||||
color: #EBD357;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(235, 211, 87, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.green{
|
||||
background-color:rgba(87, 235, 155, 0.2);
|
||||
color: #57EB9B;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(87, 235, 155, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.time{
|
||||
background-color: #012539;
|
||||
border-radius: 2px;
|
||||
padding: 5px 10px;
|
||||
overflow:hidden;
|
||||
opacity: 0.7;
|
||||
font-size: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.animate {
|
||||
display: inline-block;
|
||||
animation: 13s wordsLoop linear infinite normal;
|
||||
}
|
||||
@keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
-webkit-transform: translateX(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex0{
|
||||
flex:1;
|
||||
}
|
||||
.flex1{
|
||||
flex:1;
|
||||
}
|
||||
.flex2{
|
||||
flex:3;
|
||||
}
|
||||
.flex3{
|
||||
flex:2.3;
|
||||
}
|
||||
}
|
||||
|
||||
box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
|
||||
}
|
||||
.b2{
|
||||
.row:nth-child(odd){
|
||||
background-color: rgba(0,70,105,0.4);
|
||||
}
|
||||
.row:nth-child(even){
|
||||
background-color: rgba(0,31,49,0.4);
|
||||
}
|
||||
}
|
||||
// .b1{
|
||||
// top:0px;
|
||||
// }
|
||||
// .b2{
|
||||
// top: -40px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
430
lib/component/echarts/components/other/BasicTable.vue
Normal file
430
lib/component/echarts/components/other/BasicTable.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div class="table-view" id="tableView" ref="tableView" :style="{fontSize:`${fontSize}px`}">
|
||||
<div class="thead" :style="{height: `${headHeight}px`}">
|
||||
<div v-for="(value,key,index) in thead" :key="index" :style="{height: `${headHeight-10}px`,lineHeight:`${headHeight-10}px`,flex:flexs[index]}">{{value}}</div>
|
||||
</div>
|
||||
<div class="tbodymain" :style="{height: `${bodyHeight}px`}" @mouseenter="bodyMouseEnter" @mouseleave="bodyMouseLeave">
|
||||
<div class="tbody b1" ref="tbody1" :style="{height: `${bodyHeight}px`}">
|
||||
<div v-for="item in tableDatas1" :key="item.id" class="row" :style="{height: `${cellHeight}px`}">
|
||||
<div v-for="(value,key,index) in item" :key="index" :style="{flex:flexs[index]}">
|
||||
<!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
|
||||
<span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)] :style="{height: `${cellHeight-10}px`,lineHeight:`${cellHeight-10}px`}">{{value}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody b2" ref="tbody2" :style="{height: `${bodyHeight}px`}">
|
||||
<div v-for="item in tableDatas2" :key="item.id" class="row" :style="{height: `${cellHeight}px`}">
|
||||
<div v-for="(value,key,index) in item" :key="index" :style="{flex:flexs[index]}">
|
||||
<!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
|
||||
<span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)] :style="{height: `${cellHeight-10}px`,lineHeight:`${cellHeight-10}px`}">{{value}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'baisicTable',
|
||||
props: {
|
||||
datas:{
|
||||
type:Array,
|
||||
required: true
|
||||
},
|
||||
thead:{
|
||||
type:Array,
|
||||
required: true
|
||||
},
|
||||
flexs:{
|
||||
type:Array,
|
||||
default:[1,1,3,2.3]
|
||||
},
|
||||
fontScroll:{
|
||||
type:Number,
|
||||
default:14
|
||||
},
|
||||
headHeight:{
|
||||
type:Number,
|
||||
default:37
|
||||
},
|
||||
rowNum:{
|
||||
type:Number,
|
||||
default:7
|
||||
},
|
||||
colNum:{
|
||||
type:Number,
|
||||
default:4
|
||||
},
|
||||
speed:{
|
||||
type:Number,
|
||||
default:2
|
||||
},
|
||||
fontSize:{
|
||||
type:Number,
|
||||
default:10
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeOut:null,
|
||||
srolltime:null,
|
||||
tableDatas1:[],
|
||||
tableDatas2:[],
|
||||
pageIndex:0,
|
||||
isColScroll:true,
|
||||
total:0,
|
||||
curPage:0,
|
||||
|
||||
cellHeight:26,
|
||||
|
||||
tableDatas:[],
|
||||
|
||||
bodyHeight:182
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
datas:{
|
||||
handler(newval){
|
||||
this.tableDatas = newval;
|
||||
this.changDatas();
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.tableDatas = this.datas;
|
||||
let len = this.tableDatas.length;
|
||||
let row = this.rowNum;
|
||||
let doubleRow = parseInt(row*2);
|
||||
if(len>=doubleRow){
|
||||
this.tableDatas1 = this.tableDatas.slice(0,row);
|
||||
this.tableDatas2 = this.tableDatas.slice(row,doubleRow);
|
||||
}else if(len>row && len<doubleRow){
|
||||
this.tableDatas1 = this.tableDatas.slice(0,row);
|
||||
this.tableDatas2 = this.tableDatas.slice(row,len);
|
||||
let addData = this.tableDatas.slice(0,row-this.tableDatas2.length);
|
||||
this.tableDatas2 = this.tableDatas2.concat(addData);
|
||||
}else if(len <= row){
|
||||
this.tableDatas1 = this.tableDatas;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getBodyMainHeight();
|
||||
let row = this.rowNum;
|
||||
let doubleRow = parseInt(row*2);
|
||||
if(this.tableDatas.length>row){
|
||||
this.timeIntervalHandle();
|
||||
}else{
|
||||
this.tableDatas1 = this.tableDatas;
|
||||
}
|
||||
if(this.tableDatas.length>doubleRow){
|
||||
this.changDatas();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBodyMainHeight(){
|
||||
// debugger;
|
||||
let tableDom = document.getElementById("tableView");
|
||||
// console.log(tableDom.clientHeight);
|
||||
this.bodyHeight = parseInt(tableDom.clientHeight-this.headHeight);
|
||||
// console.log(this.bodyHeight);
|
||||
|
||||
this.cellHeight = (this.bodyHeight/this.rowNum).toFixed(6);
|
||||
|
||||
console.log(this.cellHeight);
|
||||
},
|
||||
changDatas(){
|
||||
let len = this.tableDatas.length;
|
||||
let row = this.rowNum;
|
||||
this.page = Math.ceil(len/row);
|
||||
let endNum = len%row;
|
||||
if(endNum>0){
|
||||
let addNum = row-endNum;
|
||||
let addArr = this.tableDatas.slice(0,addNum);
|
||||
this.tableDatas = this.tableDatas.concat(addArr);
|
||||
}
|
||||
this.curPage = 1;
|
||||
},
|
||||
bodyMouseEnter(){
|
||||
this.isColScroll = false;
|
||||
},
|
||||
bodyMouseLeave(){
|
||||
this.isColScroll = true;
|
||||
this.srollHandle();
|
||||
},
|
||||
marqueeStart(e){
|
||||
e.currentTarget.start();
|
||||
},
|
||||
marqueeStop(e){
|
||||
e.currentTarget.stop();
|
||||
},
|
||||
timeIntervalHandle(){
|
||||
this.$refs.tbody1.style.top = `${0}px`;
|
||||
this.$refs.tbody2.style.top = `${this.bodyHeight}px`;
|
||||
setTimeout(this.srollHandle,3000);
|
||||
},
|
||||
srollHandle(){
|
||||
if(!this.isColScroll) return;
|
||||
let scrollSpeed = 0;
|
||||
let _this = this;
|
||||
clearInterval(this.srolltime);
|
||||
clearTimeout(this.timeOut);
|
||||
this.srolltime = setInterval(function(){
|
||||
scrollSpeed += _this.speed;
|
||||
if(scrollSpeed>_this.cellHeight){
|
||||
// 当前数据滚动完剩余的
|
||||
let v = (_this.cellHeight - (scrollSpeed-_this.speed)).toFixed(6);
|
||||
// console.log("剩余V：=====" + v);
|
||||
// console.log(parseFloat(_this.$refs.tbody1.style.top));
|
||||
_this.$refs.tbody1.style.top = (parseFloat(_this.$refs.tbody1.style.top) - v).toFixed(6)+"px";
|
||||
_this.$refs.tbody2.style.top = (parseFloat(_this.$refs.tbody2.style.top) - v).toFixed(6)+"px";
|
||||
// console.log(parseFloat(_this.$refs.tbody1.style.top));
|
||||
}else{
|
||||
_this.$refs.tbody1.style.top = (parseFloat(_this.$refs.tbody1.style.top) - _this.speed).toFixed(6)+"px";
|
||||
_this.$refs.tbody2.style.top = (parseFloat(_this.$refs.tbody2.style.top) - _this.speed).toFixed(6)+"px";
|
||||
// console.log("执行");
|
||||
}
|
||||
if(parseFloat(_this.$refs.tbody1.style.top)<=-_this.bodyHeight){
|
||||
// debugger;
|
||||
_this.$refs.tbody1.style.top = _this.bodyHeight+'px';
|
||||
if(_this.page > 2){
|
||||
_this.updateData(1);
|
||||
}
|
||||
}else if(parseFloat(_this.$refs.tbody2.style.top)<=-_this.bodyHeight){
|
||||
// debugger;
|
||||
_this.$refs.tbody2.style.top = _this.bodyHeight+'px';
|
||||
if(_this.page > 2){
|
||||
_this.updateData(2);
|
||||
}
|
||||
}
|
||||
if(scrollSpeed>=_this.cellHeight){
|
||||
clearInterval(_this.srolltime);
|
||||
|
||||
_this.timeOut = setTimeout(_this.srollHandle,1500);
|
||||
}
|
||||
},24);
|
||||
},
|
||||
updateData(id){
|
||||
let row = this.rowNum;
|
||||
this.curPage++;
|
||||
if(this.curPage>=this.page){
|
||||
this.curPage = 0;
|
||||
}
|
||||
let start = parseInt(this.curPage*row);
|
||||
let end = start+row;
|
||||
let getData = this.tableDatas.slice(start,end);
|
||||
if(id==1){
|
||||
this.tableDatas1 = getData;
|
||||
}else{
|
||||
this.tableDatas2 = getData;
|
||||
}
|
||||
},
|
||||
timeHandle(key){
|
||||
if(key=="time"){
|
||||
return 'time';
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
scrollHandle(index,key,value){
|
||||
if(key=='positon' && value.length>this.fontScroll){
|
||||
return 'animate';
|
||||
}
|
||||
|
||||
},
|
||||
colorHandle(key,value){
|
||||
if(key=="color"){
|
||||
if(value.indexOf('蓝') != -1){
|
||||
return 'blue';
|
||||
}else if(value.indexOf('黄') != -1){
|
||||
return 'yellow';
|
||||
}else if(value.indexOf('绿') != -1){
|
||||
return 'green';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.table-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0E748A;
|
||||
color: #FFFFFF;
|
||||
background-color: #04465B;
|
||||
// font-size: 10px;
|
||||
.thead{
|
||||
display: flex;
|
||||
background-color: #005062;
|
||||
border-bottom: 1px solid #0E748A;
|
||||
div{
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
opacity: 0.85;
|
||||
margin: 5px 10px;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
}
|
||||
.flex0{
|
||||
flex:1;
|
||||
}
|
||||
.flex1{
|
||||
flex:1;
|
||||
}
|
||||
.flex2{
|
||||
flex:3;
|
||||
}
|
||||
.flex3{
|
||||
flex:2.3;
|
||||
}
|
||||
}
|
||||
.tbodymain{
|
||||
position: relative;
|
||||
height: 183px;
|
||||
|
||||
overflow: hidden;
|
||||
.tbody{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top:0px;
|
||||
border-top: none;
|
||||
height: 182px;
|
||||
|
||||
.row:nth-child(odd){
|
||||
background-color: rgba(0,31,49,0.4);
|
||||
}
|
||||
.row:nth-child(even){
|
||||
background-color: rgba(0,70,105,0.4);
|
||||
}
|
||||
.row{
|
||||
height: 26px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
div{
|
||||
flex: 1;//平均份
|
||||
margin: 5px 12px;
|
||||
text-align: left;
|
||||
flex-wrap:nowrap;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
span{
|
||||
opacity: 0.65;
|
||||
// height: 37px;
|
||||
// line-height: 37px;
|
||||
// display: flex;
|
||||
// // justify-content: center; //水平
|
||||
// align-items: center; //
|
||||
}
|
||||
marquee{
|
||||
opacity: 0.65;
|
||||
}
|
||||
.blue{
|
||||
background-color:rgba(87, 208, 235, 0.2);
|
||||
color: #57D0EB;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(87, 208, 235, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
// font-size: 8px;
|
||||
// line-height: 16px;
|
||||
}
|
||||
.yellow{
|
||||
background-color:rgba(235, 211, 87, 0.2);
|
||||
color: #EBD357;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(235, 211, 87, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
// font-size: 8px;
|
||||
// line-height: 16px;
|
||||
}
|
||||
.green{
|
||||
background-color:rgba(87, 235, 155, 0.2);
|
||||
color: #57EB9B;
|
||||
padding: 0px 5px;
|
||||
border:1px solid rgba(87, 235, 155, 0.4);
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
// font-size: 8px;
|
||||
// line-height: 16px;
|
||||
}
|
||||
.time{
|
||||
background-color: #012539;
|
||||
border-radius: 2px;
|
||||
padding: 5px 10px;
|
||||
overflow:hidden;
|
||||
opacity: 0.7;
|
||||
// font-size: 8px;
|
||||
// line-height: 16px;
|
||||
}
|
||||
.animate {
|
||||
display: inline-block;
|
||||
animation: 13s wordsLoop linear infinite normal;
|
||||
}
|
||||
@keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
-webkit-transform: translateX(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex0{
|
||||
flex:1;
|
||||
}
|
||||
.flex1{
|
||||
flex:1;
|
||||
}
|
||||
.flex2{
|
||||
flex:3;
|
||||
}
|
||||
.flex3{
|
||||
flex:2.3;
|
||||
}
|
||||
}
|
||||
|
||||
box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
|
||||
}
|
||||
.b2{
|
||||
.row:nth-child(odd){
|
||||
background-color: rgba(0,70,105,0.4);
|
||||
}
|
||||
.row:nth-child(even){
|
||||
background-color: rgba(0,31,49,0.4);
|
||||
}
|
||||
}
|
||||
// .b1{
|
||||
// top:0px;
|
||||
// }
|
||||
// .b2{
|
||||
// top: -40px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
78
lib/component/echarts/echarts.vue
Normal file
78
lib/component/echarts/echarts.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="ns-chart">
|
||||
<v-chart :id="id" ref="chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import * as echarts from 'echarts/core';
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { defineComponent, onMounted, reactive, ref } from 'vue';
|
||||
import { PieChart, BarChart, ScatterChart, RadarChart } from 'echarts/charts';
|
||||
import 'echarts/lib/component/grid';
|
||||
import { GridComponent } from 'echarts/components';
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
LineChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
ScatterChart,
|
||||
RadarChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent,
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VChart,
|
||||
},
|
||||
provide: {
|
||||
[THEME_KEY]: 'light',
|
||||
},
|
||||
props: {
|
||||
id: String,
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
// var id=ref<String>('');
|
||||
onMounted(() => {
|
||||
const getOptions = () => {
|
||||
console.log('sdada');
|
||||
console.log(props.id);
|
||||
var chart = echarts.init(document.getElementById(props.id));
|
||||
chart.showLoading();
|
||||
setTimeout(() => {
|
||||
console.log('loading');
|
||||
chart.hideLoading();
|
||||
chart.setOption(props.option);
|
||||
}, 2000);
|
||||
};
|
||||
getOptions();
|
||||
});
|
||||
|
||||
return {
|
||||
props,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ns-chart {
|
||||
height: 500px;
|
||||
width: 450px;
|
||||
border: 1px solid #dcdfe2;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user