xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

push

Browse Source
This commit is contained in:
xuziqiang
2024-05-15 17:29:42 +08:00
commit d0155dbe3c
7296 changed files with 1832517 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
lib/component/echarts/components/chart/Base.vue Normal file
View File

43
lib/component/echarts/components/chart/bar/BaseBar.vue Normal file
View 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
View 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
View 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
View 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>

270
lib/component/echarts/components/chart/bar/StackedHorizontalBar.vue Normal file
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}