vben
6 years ago
20 changed files with 1241 additions and 23 deletions
@ -0,0 +1,37 @@ |
|||
import { useTimeout } from '/@/hooks/core/useTimeout'; |
|||
import { tryOnUnmounted } from '/@/utils/helper/vueHelper'; |
|||
import { ref, unref, Ref, nextTick } from 'vue'; |
|||
|
|||
import ApexCharts from 'apexcharts'; |
|||
|
|||
export function useApexCharts(elRef: Ref<HTMLDivElement>) { |
|||
const chartInstanceRef = ref<Nullable<ApexCharts>>(null); |
|||
|
|||
function setOptions(options: any) { |
|||
const el = unref(elRef); |
|||
|
|||
if (!el || !unref(el)) { |
|||
return; |
|||
} |
|||
chartInstanceRef.value = new ApexCharts(el, options); |
|||
|
|||
const chartInstance = unref(chartInstanceRef); |
|||
|
|||
nextTick(() => { |
|||
useTimeout(() => { |
|||
chartInstance && chartInstance.render(); |
|||
}, 30); |
|||
}); |
|||
} |
|||
|
|||
tryOnUnmounted(() => { |
|||
const chartInstance = unref(chartInstanceRef); |
|||
if (!chartInstance) { |
|||
return; |
|||
} |
|||
chartInstanceRef.value = null; |
|||
}); |
|||
return { |
|||
setOptions, |
|||
}; |
|||
} |
|||
@ -0,0 +1,79 @@ |
|||
import { useTimeout } from '/@/hooks/core/useTimeout'; |
|||
import { tryOnUnmounted } from '/@/utils/helper/vueHelper'; |
|||
import { ref, unref, Ref, nextTick } from 'vue'; |
|||
import type { EChartOption, ECharts } from 'echarts'; |
|||
import echarts from 'echarts'; |
|||
import { useDebounce } from '/@/hooks/core/useDebounce'; |
|||
import { useEvent } from '/@/hooks/event/useEvent'; |
|||
import { useBreakpoint } from '/@/hooks/event/useBreakpoint'; |
|||
|
|||
export type { EChartOption, ECharts }; |
|||
export function useECharts( |
|||
elRef: Ref<HTMLDivElement>, |
|||
theme: 'light' | 'dark' | 'default' = 'light' |
|||
) { |
|||
const chartInstanceRef = ref<Nullable<ECharts>>(null); |
|||
let resizeFn: Fn = resize; |
|||
|
|||
const [debounceResize] = useDebounce(resize, 200); |
|||
resizeFn = debounceResize; |
|||
|
|||
function init() { |
|||
const el = unref(elRef); |
|||
|
|||
if (!el || !unref(el)) { |
|||
return; |
|||
} |
|||
chartInstanceRef.value = echarts.init(el, theme); |
|||
useEvent({ |
|||
el: window, |
|||
name: 'resize', |
|||
listener: resizeFn, |
|||
}); |
|||
const { widthRef, screenEnum } = useBreakpoint(); |
|||
if (unref(widthRef) <= screenEnum.MD) { |
|||
useTimeout(() => { |
|||
resizeFn(); |
|||
}, 0); |
|||
} |
|||
} |
|||
|
|||
function setOptions(options: any, clear = true) { |
|||
// function setOptions(options: EChartOption, clear = true) {
|
|||
let chartInstance = unref(chartInstanceRef); |
|||
|
|||
if (!chartInstance) { |
|||
init(); |
|||
chartInstance = chartInstance = unref(chartInstanceRef); |
|||
if (!chartInstance) { |
|||
return; |
|||
} |
|||
} |
|||
clear && chartInstance.clear(); |
|||
nextTick(() => { |
|||
useTimeout(() => { |
|||
chartInstance && chartInstance.setOption(options); |
|||
}, 30); |
|||
}); |
|||
} |
|||
|
|||
function resize() { |
|||
const chartInstance = unref(chartInstanceRef); |
|||
if (!chartInstance) { |
|||
return; |
|||
} |
|||
chartInstance.resize(); |
|||
} |
|||
tryOnUnmounted(() => { |
|||
const chartInstance = unref(chartInstanceRef); |
|||
if (!chartInstance) { |
|||
return; |
|||
} |
|||
chartInstance.dispose(); |
|||
chartInstanceRef.value = null; |
|||
}); |
|||
return { |
|||
setOptions, |
|||
echarts, |
|||
}; |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
import type { MenuModule } from '/@/router/types.d'; |
|||
const menu: MenuModule = { |
|||
orderNo: 500, |
|||
menu: { |
|||
name: '图表', |
|||
path: '/charts', |
|||
children: [ |
|||
{ |
|||
path: '/echarts', |
|||
name: 'Echarts', |
|||
children: [ |
|||
{ |
|||
path: '/map', |
|||
name: '地图', |
|||
}, |
|||
{ |
|||
path: '/line', |
|||
name: '折线图', |
|||
}, |
|||
{ |
|||
path: '/pie', |
|||
name: '饼图', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
path: '/apexChart', |
|||
name: 'ApexChart', |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
export default menu; |
|||
@ -0,0 +1,60 @@ |
|||
import type { AppRouteModule } from '/@/router/types'; |
|||
|
|||
import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant'; |
|||
|
|||
export default { |
|||
layout: { |
|||
path: '/charts', |
|||
name: 'Charts', |
|||
component: PAGE_LAYOUT_COMPONENT, |
|||
redirect: '/charts/welcome', |
|||
meta: { |
|||
icon: 'ant-design:area-chart-outlined', |
|||
title: '图表库', |
|||
}, |
|||
}, |
|||
|
|||
routes: [ |
|||
{ |
|||
path: '/echarts', |
|||
name: 'Echarts', |
|||
meta: { |
|||
title: 'Echarts', |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'map', |
|||
name: 'Map', |
|||
component: () => import('/@/views/demo/echarts/Map.vue'), |
|||
meta: { |
|||
title: '地图', |
|||
}, |
|||
}, |
|||
{ |
|||
path: 'line', |
|||
name: 'Line', |
|||
component: () => import('/@/views/demo/echarts/Line.vue'), |
|||
meta: { |
|||
title: '折线图', |
|||
}, |
|||
}, |
|||
{ |
|||
path: 'pie', |
|||
name: 'Pie', |
|||
component: () => import('/@/views/demo/echarts/Pie.vue'), |
|||
meta: { |
|||
title: '饼图', |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
path: '/apexChart', |
|||
name: 'ApexChart', |
|||
meta: { |
|||
title: 'ApexChart', |
|||
}, |
|||
component: () => import('/@/views/demo/echarts/apex/index.vue'), |
|||
}, |
|||
], |
|||
} as AppRouteModule; |
|||
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<div class="p-4"> |
|||
<div ref="chartRef" :style="{ height, width }" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import echarts from 'echarts'; |
|||
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: '80vh', |
|||
}, |
|||
}, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = 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: true, |
|||
symbol: 'emptyCircle', |
|||
symbolSize: 15, |
|||
data: lineData, |
|||
}, |
|||
{ |
|||
name: 'bar', |
|||
type: 'bar', |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
normal: { |
|||
barBorderRadius: 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: { |
|||
normal: { |
|||
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: { |
|||
normal: { |
|||
color: '#0f375f', |
|||
}, |
|||
}, |
|||
symbolRepeat: true, |
|||
symbolSize: [12, 4], |
|||
symbolMargin: 1, |
|||
z: -10, |
|||
data: lineData, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<div class="p-4"> |
|||
<div ref="chartRef" :style="{ height, width }" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
import { mapData } from './data'; |
|||
|
|||
import 'echarts/map/js/china'; |
|||
export default defineComponent({ |
|||
props: { |
|||
width: { |
|||
type: String as PropType<string>, |
|||
default: '100%', |
|||
}, |
|||
height: { |
|||
type: String as PropType<string>, |
|||
default: '80vh', |
|||
}, |
|||
}, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
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', |
|||
mapType: 'china', |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgb(249, 249, 249)', |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgb(249, 249, 249)', |
|||
fontSize: 14, |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
label: { show: true }, |
|||
areaColor: '#2f82ce', |
|||
borderColor: '#0DAAC1', |
|||
}, |
|||
emphasis: { |
|||
label: { show: true }, |
|||
areaColor: '#2f82ce', |
|||
}, |
|||
}, |
|||
data: mapData, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<div class="p-4"> |
|||
<div ref="chartRef" :style="{ height, width }" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
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: '80vh', |
|||
}, |
|||
}, |
|||
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: '各渠道投诉占比', |
|||
x: '2%', |
|||
y: '1%', |
|||
textStyle: { color: '#fff', fontSize: 14 }, |
|||
}, |
|||
{ |
|||
text: '投诉原因TOP10', |
|||
x: '40%', |
|||
y: '1%', |
|||
textStyle: { color: '#fff', fontSize: 14 }, |
|||
}, |
|||
{ |
|||
text: '各级别投诉占比', |
|||
x: '2%', |
|||
y: '50%', |
|||
textStyle: { color: '#fff', fontSize: 14 }, |
|||
}, |
|||
], |
|||
grid: [{ x: '50%', y: '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%'], |
|||
color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'], |
|||
data: [ |
|||
{ value: 335, name: '客服电话' }, |
|||
{ value: 310, name: '奥迪官网' }, |
|||
{ value: 234, name: '媒体曝光' }, |
|||
{ value: 135, name: '质检总局' }, |
|||
{ value: 105, name: '其他' }, |
|||
], |
|||
labelLine: { normal: { show: false } }, |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, |
|||
formatter: '{b} \n ({d}%)', |
|||
textStyle: { color: '#B1B9D3' }, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
name: '各级别投诉占比', |
|||
type: 'pie', |
|||
radius: '30%', |
|||
center: ['22%', '75%'], |
|||
color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'], |
|||
labelLine: { normal: { show: false } }, |
|||
data: [ |
|||
{ value: 335, name: 'A级' }, |
|||
{ value: 310, name: 'B级' }, |
|||
{ value: 234, name: 'C级' }, |
|||
{ value: 135, name: 'D级' }, |
|||
], |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, |
|||
formatter: '{b} \n ({d}%)', |
|||
textStyle: { color: '#B1B9D3' }, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
name: '投诉原因TOP10', |
|||
type: 'bar', |
|||
xAxisIndex: 0, |
|||
yAxisIndex: 0, |
|||
barWidth: '45%', |
|||
itemStyle: { normal: { color: '#86c9f4' } }, |
|||
label: { normal: { show: true, position: 'right', textStyle: { color: '#9EA7C4' } } }, |
|||
data: dataAll.sort(), |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }" /> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
name: 'series1', |
|||
data: [31, 40, 28, 51, 42, 109, 100], |
|||
}, |
|||
{ |
|||
name: 'series2', |
|||
data: [11, 32, 45, 32, 34, 52, 41], |
|||
}, |
|||
], |
|||
chart: { |
|||
height: 350, |
|||
type: 'area', |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
stroke: { |
|||
curve: 'smooth', |
|||
}, |
|||
xaxis: { |
|||
type: 'datetime', |
|||
categories: [ |
|||
'2018-09-19T00:00:00.000Z', |
|||
'2018-09-19T01:30:00.000Z', |
|||
'2018-09-19T02:30:00.000Z', |
|||
'2018-09-19T03:30:00.000Z', |
|||
'2018-09-19T04:30:00.000Z', |
|||
'2018-09-19T05:30:00.000Z', |
|||
'2018-09-19T06:30:00.000Z', |
|||
], |
|||
}, |
|||
tooltip: { |
|||
x: { |
|||
format: 'dd/MM/yy HH:mm', |
|||
}, |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }" /> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380], |
|||
}, |
|||
], |
|||
chart: { |
|||
type: 'bar', |
|||
height: 350, |
|||
}, |
|||
plotOptions: { |
|||
bar: { |
|||
horizontal: true, |
|||
}, |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
xaxis: { |
|||
categories: [ |
|||
'South Korea', |
|||
'Canada', |
|||
'United Kingdom', |
|||
'Netherlands', |
|||
'Italy', |
|||
'France', |
|||
'Japan', |
|||
'United States', |
|||
'China', |
|||
'Germany', |
|||
], |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }" /> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
name: 'Desktops', |
|||
data: [10, 41, 35, 51, 49, 62, 69, 91, 148], |
|||
}, |
|||
], |
|||
chart: { |
|||
height: 350, |
|||
type: 'line', |
|||
zoom: { |
|||
enabled: false, |
|||
}, |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
stroke: { |
|||
curve: 'straight', |
|||
}, |
|||
title: { |
|||
text: 'Product Trends by Month', |
|||
align: 'left', |
|||
}, |
|||
grid: { |
|||
row: { |
|||
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns |
|||
opacity: 0.5, |
|||
}, |
|||
}, |
|||
xaxis: { |
|||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ width: '100%' }" /> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, Ref, onMounted } from 'vue'; |
|||
|
|||
import { useApexCharts } from '/@/hooks/web/useApexCharts'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
series: [ |
|||
{ |
|||
name: 'Income', |
|||
type: 'column', |
|||
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6], |
|||
}, |
|||
{ |
|||
name: 'Cashflow', |
|||
type: 'column', |
|||
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5], |
|||
}, |
|||
{ |
|||
name: 'Revenue', |
|||
type: 'line', |
|||
data: [20, 29, 37, 36, 44, 45, 50, 58], |
|||
}, |
|||
], |
|||
chart: { |
|||
height: 350, |
|||
type: 'line', |
|||
stacked: false, |
|||
}, |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
stroke: { |
|||
width: [1, 1, 4], |
|||
}, |
|||
title: { |
|||
text: 'XYZ - Stock Analysis (2009 - 2016)', |
|||
align: 'left', |
|||
offsetX: 110, |
|||
}, |
|||
xaxis: { |
|||
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016], |
|||
}, |
|||
yaxis: [ |
|||
{ |
|||
axisTicks: { |
|||
show: true, |
|||
}, |
|||
axisBorder: { |
|||
show: true, |
|||
color: '#008FFB', |
|||
}, |
|||
labels: { |
|||
style: { |
|||
colors: '#008FFB', |
|||
}, |
|||
}, |
|||
title: { |
|||
text: 'Income (thousand crores)', |
|||
style: { |
|||
color: '#008FFB', |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
enabled: true, |
|||
}, |
|||
}, |
|||
{ |
|||
seriesName: 'Income', |
|||
opposite: true, |
|||
axisTicks: { |
|||
show: true, |
|||
}, |
|||
axisBorder: { |
|||
show: true, |
|||
color: '#00E396', |
|||
}, |
|||
labels: { |
|||
style: { |
|||
colors: '#00E396', |
|||
}, |
|||
}, |
|||
title: { |
|||
text: 'Operating Cashflow (thousand crores)', |
|||
style: { |
|||
color: '#00E396', |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
seriesName: 'Revenue', |
|||
opposite: true, |
|||
axisTicks: { |
|||
show: true, |
|||
}, |
|||
axisBorder: { |
|||
show: true, |
|||
color: '#FEB019', |
|||
}, |
|||
labels: { |
|||
style: { |
|||
colors: '#FEB019', |
|||
}, |
|||
}, |
|||
title: { |
|||
text: 'Revenue (thousand crores)', |
|||
style: { |
|||
color: '#FEB019', |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
tooltip: { |
|||
fixed: { |
|||
enabled: true, |
|||
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft |
|||
offsetY: 30, |
|||
offsetX: 60, |
|||
}, |
|||
}, |
|||
legend: { |
|||
horizontalAlign: 'left', |
|||
offsetX: 40, |
|||
}, |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,42 @@ |
|||
<template> |
|||
<div class="apex-demo p-4"> |
|||
<div class="demo-box"> |
|||
<Line /> |
|||
</div> |
|||
<div class="demo-box"> |
|||
<Bar /> |
|||
</div> |
|||
<div class="demo-box"> |
|||
<Area /> |
|||
</div> |
|||
<div class="demo-box"> |
|||
<Mixed /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import Line from './Line.vue'; |
|||
import Bar from './Bar.vue'; |
|||
import Area from './Area.vue'; |
|||
import Mixed from './Mixed.vue'; |
|||
export default defineComponent({ |
|||
components: { Line, Bar, Area, Mixed }, |
|||
setup() {}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.apex-demo { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
.demo-box { |
|||
width: 49%; |
|||
margin-bottom: 20px; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,189 @@ |
|||
export const mapData: any = [ |
|||
{ |
|||
name: '北京', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '天津', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '上海', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '重庆', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '河北', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '河南', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '云南', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '辽宁', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '黑龙江', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '湖南', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '安徽', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '山东', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '新疆', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '江苏', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '浙江', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '江西', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '湖北', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '广西', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '甘肃', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '山西', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '内蒙古', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '陕西', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '吉林', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '福建', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '贵州', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '广东', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '青海', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '西藏', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '四川', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '宁夏', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '海南', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '台湾', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '香港', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
{ |
|||
name: '澳门', |
|||
value: Math.round(Math.random() * 1000), |
|||
tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)], |
|||
}, |
|||
]; |
|||
|
|||
export const getLineData = (() => { |
|||
const category: any[] = []; |
|||
let dottedBase = +new Date(); |
|||
const lineData: any[] = []; |
|||
const barData: any[] = []; |
|||
|
|||
for (let i = 0; i < 20; i++) { |
|||
const date = new Date((dottedBase += 1000 * 3600 * 24)); |
|||
category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')); |
|||
const b = Math.random() * 200; |
|||
const d = Math.random() * 200; |
|||
barData.push(b); |
|||
lineData.push(d + b); |
|||
} |
|||
return { barData, category, lineData }; |
|||
})(); |
|||
Loading…
Reference in new issue