style: lint格式化文件
This commit is contained in:
@ -1,117 +1,117 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import { getLineData } from './data';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import { getLineData } from './data';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
const { barData, lineData, category } = getLineData;
|
||||
onMounted(() => {
|
||||
setOptions({
|
||||
backgroundColor: '#0f375f',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: '#333',
|
||||
},
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['line', 'bar'],
|
||||
textStyle: {
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showAllSymbol: 'auto',
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 15,
|
||||
data: lineData,
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#14c8d4' },
|
||||
{ offset: 1, color: '#43eec6' },
|
||||
]),
|
||||
},
|
||||
data: barData,
|
||||
},
|
||||
{
|
||||
name: 'line',
|
||||
type: 'bar',
|
||||
barGap: '-100%',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
|
||||
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
|
||||
{ offset: 1, color: 'rgba(20,200,212,0)' },
|
||||
]),
|
||||
},
|
||||
z: -12,
|
||||
data: lineData,
|
||||
},
|
||||
{
|
||||
name: 'dotted',
|
||||
type: 'pictorialBar',
|
||||
symbol: 'rect',
|
||||
itemStyle: {
|
||||
color: '#0f375f',
|
||||
},
|
||||
symbolRepeat: true,
|
||||
symbolSize: [12, 4],
|
||||
symbolMargin: 1,
|
||||
z: -10,
|
||||
data: lineData,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
return { chartRef };
|
||||
},
|
||||
});
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: 'calc(100vh - 78px)'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
const { barData, lineData, category } = getLineData;
|
||||
onMounted(() => {
|
||||
setOptions({
|
||||
backgroundColor: '#0f375f',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['line', 'bar'],
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showAllSymbol: 'auto',
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 15,
|
||||
data: lineData
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#14c8d4' },
|
||||
{ offset: 1, color: '#43eec6' }
|
||||
])
|
||||
},
|
||||
data: barData
|
||||
},
|
||||
{
|
||||
name: 'line',
|
||||
type: 'bar',
|
||||
barGap: '-100%',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
|
||||
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
|
||||
{ offset: 1, color: 'rgba(20,200,212,0)' }
|
||||
])
|
||||
},
|
||||
z: -12,
|
||||
data: lineData
|
||||
},
|
||||
{
|
||||
name: 'dotted',
|
||||
type: 'pictorialBar',
|
||||
symbol: 'rect',
|
||||
itemStyle: {
|
||||
color: '#0f375f'
|
||||
},
|
||||
symbolRepeat: true,
|
||||
symbolSize: [12, 4],
|
||||
symbolMargin: 1,
|
||||
z: -10,
|
||||
data: lineData
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
return { chartRef };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,75 +1,75 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import { mapData } from './data';
|
||||
import { registerMap } from 'echarts';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import { mapData } from './data';
|
||||
import { registerMap } from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: 'calc(100vh - 78px)'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
|
||||
onMounted(async () => {
|
||||
const json = (await (await import('./china.json')).default) as any;
|
||||
registerMap('china', json);
|
||||
setOptions({
|
||||
visualMap: [
|
||||
{
|
||||
min: 0,
|
||||
max: 1000,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'],
|
||||
calculable: false,
|
||||
orient: 'horizontal',
|
||||
inRange: {
|
||||
color: ['#e0ffff', '#006edd'],
|
||||
symbolSize: [30, 100],
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(0, 0, 0, .6)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'iphone4',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
label: {
|
||||
show: true,
|
||||
color: 'rgb(249, 249, 249)',
|
||||
fontSize: 10,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#2f82ce',
|
||||
borderColor: '#0DAAC1',
|
||||
},
|
||||
data: mapData,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
return { chartRef };
|
||||
},
|
||||
});
|
||||
onMounted(async () => {
|
||||
const json = (await (await import('./china.json')).default) as any;
|
||||
registerMap('china', json);
|
||||
setOptions({
|
||||
visualMap: [
|
||||
{
|
||||
min: 0,
|
||||
max: 1000,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'],
|
||||
calculable: false,
|
||||
orient: 'horizontal',
|
||||
inRange: {
|
||||
color: ['#e0ffff', '#006edd'],
|
||||
symbolSize: [30, 100]
|
||||
}
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(0, 0, 0, .6)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'iphone4',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
label: {
|
||||
show: true,
|
||||
color: 'rgb(249, 249, 249)',
|
||||
fontSize: 10
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#2f82ce',
|
||||
borderColor: '#0DAAC1'
|
||||
},
|
||||
data: mapData
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
return { chartRef };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,146 +1,135 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
|
||||
const yAxisData = [
|
||||
'原因1',
|
||||
'原因2',
|
||||
'原因3',
|
||||
'原因4',
|
||||
'原因5',
|
||||
'原因6',
|
||||
'原因7',
|
||||
'原因8',
|
||||
'原因9',
|
||||
'原因10',
|
||||
];
|
||||
onMounted(() => {
|
||||
setOptions({
|
||||
backgroundColor: '#0f375f',
|
||||
title: [
|
||||
{
|
||||
text: '各渠道投诉占比',
|
||||
left: '2%',
|
||||
top: '1%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%'
|
||||
},
|
||||
{
|
||||
text: '投诉原因TOP10',
|
||||
left: '40%',
|
||||
top: '1%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '各级别投诉占比',
|
||||
left: '2%',
|
||||
top: '50%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
|
||||
tooltip: {
|
||||
formatter: '{b} ({c})',
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLine: { show: false },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
interval: 0,
|
||||
data: yAxisData.reverse(),
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: true },
|
||||
splitLine: { show: false },
|
||||
axisLine: { show: true, lineStyle: { color: '#6173a3' } },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '各渠道投诉占比',
|
||||
type: 'pie',
|
||||
radius: '30%',
|
||||
center: ['22%', '25%'],
|
||||
data: [
|
||||
{ value: 335, name: '客服电话' },
|
||||
{ value: 310, name: '奥迪官网' },
|
||||
{ value: 234, name: '媒体曝光' },
|
||||
{ value: 135, name: '质检总局' },
|
||||
{ value: 105, name: '其他' },
|
||||
],
|
||||
labelLine: { show: false },
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b} \n ({d}%)',
|
||||
color: '#B1B9D3',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '各级别投诉占比',
|
||||
type: 'pie',
|
||||
radius: '30%',
|
||||
center: ['22%', '75%'],
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 335, name: 'A级' },
|
||||
{ value: 310, name: 'B级' },
|
||||
{ value: 234, name: 'C级' },
|
||||
{ value: 135, name: 'D级' },
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b} \n ({d}%)',
|
||||
color: '#B1B9D3',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '投诉原因TOP10',
|
||||
type: 'bar',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
barWidth: '45%',
|
||||
itemStyle: { color: '#86c9f4' },
|
||||
label: { show: true, position: 'right', color: '#9EA7C4' },
|
||||
data: dataAll.sort(),
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
return { chartRef };
|
||||
},
|
||||
});
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: 'calc(100vh - 78px)'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
|
||||
const yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10'];
|
||||
onMounted(() => {
|
||||
setOptions({
|
||||
backgroundColor: '#0f375f',
|
||||
title: [
|
||||
{
|
||||
text: '各渠道投诉占比',
|
||||
left: '2%',
|
||||
top: '1%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '投诉原因TOP10',
|
||||
left: '40%',
|
||||
top: '1%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '各级别投诉占比',
|
||||
left: '2%',
|
||||
top: '50%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
|
||||
tooltip: {
|
||||
formatter: '{b} ({c})'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLine: { show: false }
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
interval: 0,
|
||||
data: yAxisData.reverse(),
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: true },
|
||||
splitLine: { show: false },
|
||||
axisLine: { show: true, lineStyle: { color: '#6173a3' } }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '各渠道投诉占比',
|
||||
type: 'pie',
|
||||
radius: '30%',
|
||||
center: ['22%', '25%'],
|
||||
data: [
|
||||
{ value: 335, name: '客服电话' },
|
||||
{ value: 310, name: '奥迪官网' },
|
||||
{ value: 234, name: '媒体曝光' },
|
||||
{ value: 135, name: '质检总局' },
|
||||
{ value: 105, name: '其他' }
|
||||
],
|
||||
labelLine: { show: false },
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b} \n ({d}%)',
|
||||
color: '#B1B9D3'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '各级别投诉占比',
|
||||
type: 'pie',
|
||||
radius: '30%',
|
||||
center: ['22%', '75%'],
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 335, name: 'A级' },
|
||||
{ value: 310, name: 'B级' },
|
||||
{ value: 234, name: 'C级' },
|
||||
{ value: 135, name: 'D级' }
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b} \n ({d}%)',
|
||||
color: '#B1B9D3'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '投诉原因TOP10',
|
||||
type: 'bar',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
barWidth: '45%',
|
||||
itemStyle: { color: '#86c9f4' },
|
||||
label: { show: true, position: 'right', color: '#9EA7C4' },
|
||||
data: dataAll.sort()
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
return { chartRef };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,101 +1,101 @@
|
||||
<template>
|
||||
<Card title="销售统计" :loading="loading">
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
<Card title="销售统计" :loading="loading">
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import type { Ref } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Card },
|
||||
props: {
|
||||
loading: Boolean,
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: '400px',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
setOptions({
|
||||
legend: {
|
||||
bottom: 0,
|
||||
data: ['Visits', 'Sales'],
|
||||
export default defineComponent({
|
||||
components: { Card },
|
||||
props: {
|
||||
loading: Boolean,
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%'
|
||||
},
|
||||
tooltip: {},
|
||||
radar: {
|
||||
radius: '60%',
|
||||
splitNumber: 8,
|
||||
indicator: [
|
||||
{
|
||||
name: '2017',
|
||||
},
|
||||
{
|
||||
name: '2017',
|
||||
},
|
||||
{
|
||||
name: '2018',
|
||||
},
|
||||
{
|
||||
name: '2019',
|
||||
},
|
||||
{
|
||||
name: '2020',
|
||||
},
|
||||
{
|
||||
name: '2021',
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
shadowBlur: 0,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [90, 50, 86, 40, 50, 20],
|
||||
name: 'Visits',
|
||||
itemStyle: {
|
||||
color: '#9f8ed7',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: [70, 75, 70, 76, 20, 85],
|
||||
name: 'Sales',
|
||||
itemStyle: {
|
||||
color: '#1edec5',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: '400px'
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
return { chartRef };
|
||||
},
|
||||
});
|
||||
setup(props) {
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
setOptions({
|
||||
legend: {
|
||||
bottom: 0,
|
||||
data: ['Visits', 'Sales']
|
||||
},
|
||||
tooltip: {},
|
||||
radar: {
|
||||
radius: '60%',
|
||||
splitNumber: 8,
|
||||
indicator: [
|
||||
{
|
||||
name: '2017'
|
||||
},
|
||||
{
|
||||
name: '2017'
|
||||
},
|
||||
{
|
||||
name: '2018'
|
||||
},
|
||||
{
|
||||
name: '2019'
|
||||
},
|
||||
{
|
||||
name: '2020'
|
||||
},
|
||||
{
|
||||
name: '2021'
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
shadowBlur: 0,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [90, 50, 86, 40, 50, 20],
|
||||
name: 'Visits',
|
||||
itemStyle: {
|
||||
color: '#9f8ed7'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: [70, 75, 70, 76, 20, 85],
|
||||
name: 'Sales',
|
||||
itemStyle: {
|
||||
color: '#1edec5'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
return { chartRef };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,46 +1,45 @@
|
||||
<template>
|
||||
<div ref="wrapRef" :style="{ height, width }"></div>
|
||||
<div ref="wrapRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
|
||||
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
|
||||
|
||||
import { useScript } from '/@/hooks/web/useScript';
|
||||
import { useScript } from '/@/hooks/web/useScript';
|
||||
|
||||
const BAI_DU_MAP_URL =
|
||||
'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1';
|
||||
export default defineComponent({
|
||||
name: 'BaiduMap',
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const wrapRef = ref<HTMLDivElement | null>(null);
|
||||
const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
|
||||
const BAI_DU_MAP_URL = 'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1';
|
||||
export default defineComponent({
|
||||
name: 'BaiduMap',
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const wrapRef = ref<HTMLDivElement | null>(null);
|
||||
const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
|
||||
|
||||
async function initMap() {
|
||||
await toPromise();
|
||||
await nextTick();
|
||||
const wrapEl = unref(wrapRef);
|
||||
if (!wrapEl) return;
|
||||
const BMap = (window as any).BMap;
|
||||
const map = new BMap.Map(wrapEl);
|
||||
const point = new BMap.Point(116.404, 39.915);
|
||||
map.centerAndZoom(point, 15);
|
||||
map.enableScrollWheelZoom(true);
|
||||
}
|
||||
async function initMap() {
|
||||
await toPromise();
|
||||
await nextTick();
|
||||
const wrapEl = unref(wrapRef);
|
||||
if (!wrapEl) return;
|
||||
const BMap = (window as any).BMap;
|
||||
const map = new BMap.Map(wrapEl);
|
||||
const point = new BMap.Point(116.404, 39.915);
|
||||
map.centerAndZoom(point, 15);
|
||||
map.enableScrollWheelZoom(true);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
|
||||
return { wrapRef };
|
||||
},
|
||||
});
|
||||
return { wrapRef };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,47 +1,47 @@
|
||||
<template>
|
||||
<div ref="wrapRef" :style="{ height, width }"></div>
|
||||
<div ref="wrapRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
|
||||
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
|
||||
|
||||
import { useScript } from '/@/hooks/web/useScript';
|
||||
import { useScript } from '/@/hooks/web/useScript';
|
||||
|
||||
const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b';
|
||||
const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AMap',
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const wrapRef = ref<HTMLDivElement | null>(null);
|
||||
const { toPromise } = useScript({ src: A_MAP_URL });
|
||||
export default defineComponent({
|
||||
name: 'AMap',
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const wrapRef = ref<HTMLDivElement | null>(null);
|
||||
const { toPromise } = useScript({ src: A_MAP_URL });
|
||||
|
||||
async function initMap() {
|
||||
await toPromise();
|
||||
await nextTick();
|
||||
const wrapEl = unref(wrapRef);
|
||||
if (!wrapEl) return;
|
||||
const AMap = (window as any).AMap;
|
||||
new AMap.Map(wrapEl, {
|
||||
zoom: 11,
|
||||
center: [116.397428, 39.90923],
|
||||
viewMode: '3D',
|
||||
});
|
||||
}
|
||||
async function initMap() {
|
||||
await toPromise();
|
||||
await nextTick();
|
||||
const wrapEl = unref(wrapRef);
|
||||
if (!wrapEl) return;
|
||||
const AMap = (window as any).AMap;
|
||||
new AMap.Map(wrapEl, {
|
||||
zoom: 11,
|
||||
center: [116.397428, 39.90923],
|
||||
viewMode: '3D'
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
|
||||
return { wrapRef };
|
||||
},
|
||||
});
|
||||
return { wrapRef };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,53 +1,52 @@
|
||||
<template>
|
||||
<div ref="wrapRef" :style="{ height, width }"></div>
|
||||
<div ref="wrapRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
|
||||
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
|
||||
|
||||
import { useScript } from '/@/hooks/web/useScript';
|
||||
import { useScript } from '/@/hooks/web/useScript';
|
||||
|
||||
const MAP_URL =
|
||||
'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true';
|
||||
const MAP_URL = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'GoogleMap',
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const wrapRef = ref<HTMLDivElement | null>(null);
|
||||
const { toPromise } = useScript({ src: MAP_URL });
|
||||
export default defineComponent({
|
||||
name: 'GoogleMap',
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const wrapRef = ref<HTMLDivElement | null>(null);
|
||||
const { toPromise } = useScript({ src: MAP_URL });
|
||||
|
||||
async function initMap() {
|
||||
await toPromise();
|
||||
await nextTick();
|
||||
const wrapEl = unref(wrapRef);
|
||||
if (!wrapEl) return;
|
||||
const google = (window as any).google;
|
||||
const latLng = { lat: 116.404, lng: 39.915 };
|
||||
const map = new google.maps.Map(wrapEl, {
|
||||
zoom: 4,
|
||||
center: latLng,
|
||||
});
|
||||
new google.maps.Marker({
|
||||
position: latLng,
|
||||
map: map,
|
||||
title: 'Hello World!',
|
||||
});
|
||||
}
|
||||
async function initMap() {
|
||||
await toPromise();
|
||||
await nextTick();
|
||||
const wrapEl = unref(wrapRef);
|
||||
if (!wrapEl) return;
|
||||
const google = (window as any).google;
|
||||
const latLng = { lat: 116.404, lng: 39.915 };
|
||||
const map = new google.maps.Map(wrapEl, {
|
||||
zoom: 4,
|
||||
center: latLng
|
||||
});
|
||||
new google.maps.Marker({
|
||||
position: latLng,
|
||||
map: map,
|
||||
title: 'Hello World!'
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
|
||||
return { wrapRef };
|
||||
},
|
||||
});
|
||||
return { wrapRef };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user