github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-28 05:03:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(chart): add useEcharts and useApexChart demo

Browse Source
This commit is contained in:
vben
2020-10-11 14:53:04 +08:00
parent e9536b5b7c
commit 21d0ed92df
20 changed files with 1241 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/demo/echarts/Line.vue Normal file
View File

@@ -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>

91
src/views/demo/echarts/Map.vue Normal file
View File

@@ -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>

149
src/views/demo/echarts/Pie.vue Normal file
View File

@@ -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>

58
src/views/demo/echarts/apex/Area.vue Normal file
View File

@@ -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>

52
src/views/demo/echarts/apex/Bar.vue Normal file
View File

@@ -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>

53
src/views/demo/echarts/apex/Line.vue Normal file
View File

@@ -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>

138
src/views/demo/echarts/apex/Mixed.vue Normal file
View File

@@ -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>

42
src/views/demo/echarts/apex/index.vue Normal file
View File

@@ -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>

189
src/views/demo/echarts/data.ts Normal file
View File

@@ -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 };
})();