From 2e7eabe8e3c02123ce68509989b848abcaf7837b Mon Sep 17 00:00:00 2001 From: GavinLucky Date: Tue, 7 May 2024 19:01:06 +0800 Subject: [PATCH] =?UTF-8?q?feat(components):=20echarts=20=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E8=8F=9C=E5=8D=95=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(components): 添加 echarts 插件示例 --- src/locales/langs/en-us.ts | 4 +- src/locales/langs/zh-cn.ts | 4 +- src/router/elegant/imports.ts | 1 + src/router/elegant/routes.ts | 25 +- src/router/elegant/transform.ts | 2 + src/typings/elegant-router.d.ts | 3 + .../charts/echart/_inner/echarts.data.ts | 702 ++++++++++++++++++ src/views/plugin/charts/echart/index.vue | 160 ++++ 8 files changed, 897 insertions(+), 4 deletions(-) create mode 100644 src/views/plugin/charts/echart/_inner/echarts.data.ts create mode 100644 src/views/plugin/charts/echart/index.vue diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index f67f3a64..90a919ab 100644 --- a/src/locales/langs/en-us.ts +++ b/src/locales/langs/en-us.ts @@ -179,7 +179,9 @@ const local: App.I18n.Schema = { exception_404: '404', exception_500: '500', plugin: 'Plugin', - plugin_copy: 'copy' + plugin_copy: 'copy', + plugin_charts: 'Charts', + plugin_charts_echart: 'ECharts' }, page: { login: { diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index 415542d3..e89ff370 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -179,7 +179,9 @@ const local: App.I18n.Schema = { exception_404: '404', exception_500: '500', plugin: '插件示例', - plugin_copy: '剪贴板' + plugin_copy: '剪贴板', + plugin_charts: '图表', + plugin_charts_echart: 'ECharts' }, page: { login: { diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts index 4dc25474..986c34d8 100644 --- a/src/router/elegant/imports.ts +++ b/src/router/elegant/imports.ts @@ -36,6 +36,7 @@ export const views: Record Promise import("@/views/manage/user/index.vue"), "multi-menu_first_child": () => import("@/views/multi-menu/first_child/index.vue"), "multi-menu_second_child_home": () => import("@/views/multi-menu/second_child_home/index.vue"), + plugin_charts_echart: () => import("@/views/plugin/charts/echart/index.vue"), plugin_copy: () => import("@/views/plugin/copy/index.vue"), "user-center": () => import("@/views/user-center/index.vue"), }; diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts index 406b48ce..7df84b86 100644 --- a/src/router/elegant/routes.ts +++ b/src/router/elegant/routes.ts @@ -338,9 +338,30 @@ export const generatedRoutes: GeneratedRoute[] = [ title: '插件示例', i18nKey: 'route.plugin', order: 7, - icon: 'clarity:plugin-line', + icon: 'clarity:plugin-line' }, children: [ + { + name: 'plugin_charts', + path: '/plugin/charts', + meta: { + title: 'plugin_charts', + i18nKey: 'route.plugin_charts', + icon: 'mdi:chart-areaspline' + }, + children: [ + { + name: 'plugin_charts_echart', + path: '/plugin/charts/echart', + component: 'view.plugin_charts_echart', + meta: { + title: 'plugin_charts_echart', + i18nKey: 'route.plugin_charts_echart', + icon: 'simple-icons:apacheecharts' + } + } + ] + }, { name: 'plugin_copy', path: '/plugin/copy', @@ -348,7 +369,7 @@ export const generatedRoutes: GeneratedRoute[] = [ meta: { title: '剪贴板', icon: 'mdi:clipboard-outline', - i18nKey: 'route.plugin_copy', + i18nKey: 'route.plugin_copy' } } ] diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts index cffb82b8..68cddb42 100644 --- a/src/router/elegant/transform.ts +++ b/src/router/elegant/transform.ts @@ -184,6 +184,8 @@ const routeMap: RouteMap = { "multi-menu_second_child": "/multi-menu/second/child", "multi-menu_second_child_home": "/multi-menu/second/child/home", "plugin": "/plugin", + "plugin_charts": "/plugin/charts", + "plugin_charts_echart": "/plugin/charts/echart", "plugin_copy": "/plugin/copy", "user-center": "/user-center" }; diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts index 31f241f9..14d93661 100644 --- a/src/typings/elegant-router.d.ts +++ b/src/typings/elegant-router.d.ts @@ -58,6 +58,8 @@ declare module "@elegant-router/types" { "multi-menu_second_child": "/multi-menu/second/child"; "multi-menu_second_child_home": "/multi-menu/second/child/home"; "plugin": "/plugin"; + "plugin_charts": "/plugin/charts"; + "plugin_charts_echart": "/plugin/charts/echart"; "plugin_copy": "/plugin/copy"; "user-center": "/user-center"; }; @@ -154,6 +156,7 @@ declare module "@elegant-router/types" { | "manage_user" | "multi-menu_first_child" | "multi-menu_second_child_home" + | "plugin_charts_echart" | "plugin_copy" | "user-center" >; diff --git a/src/views/plugin/charts/echart/_inner/echarts.data.ts b/src/views/plugin/charts/echart/_inner/echarts.data.ts new file mode 100644 index 00000000..166c7d6a --- /dev/null +++ b/src/views/plugin/charts/echart/_inner/echarts.data.ts @@ -0,0 +1,702 @@ +import { graphic } from 'echarts'; +import type { ECOption } from '@/hooks/common/echarts'; + +export const pieOptions: ECOption = { + legend: {}, + toolbox: { + show: true, + feature: { + mark: { show: true }, + dataView: { show: true, readOnly: false }, + restore: { show: true }, + saveAsImage: { show: true } + } + }, + series: [ + { + name: 'Nightingale Chart', + type: 'pie', + radius: [50, 150], + center: ['50%', '50%'], + roseType: 'area', + itemStyle: { + borderRadius: 8 + }, + data: [ + { value: 40, name: 'rose 1' }, + { value: 38, name: 'rose 2' }, + { value: 32, name: 'rose 3' }, + { value: 30, name: 'rose 4' }, + { value: 28, name: 'rose 5' }, + { value: 26, name: 'rose 6' }, + { value: 22, name: 'rose 7' }, + { value: 18, name: 'rose 8' } + ] + } + ] +} as const; + +export const lineOptions: ECOption = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + title: { + text: 'Stacked Line' + }, + legend: { + data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + color: '#37a2da', + name: 'Email', + type: 'line', + smooth: true, + stack: 'Total', + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0.25, + color: '#37a2da' + }, + { + offset: 1, + color: '#fff' + } + ] + } + }, + emphasis: { + focus: 'series' + }, + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + color: '#9fe6b8', + name: 'Union Ads', + type: 'line', + smooth: true, + stack: 'Total', + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0.25, + color: '#9fe6b8' + }, + { + offset: 1, + color: '#fff' + } + ] + } + }, + emphasis: { + focus: 'series' + }, + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + color: '#fedb5c', + name: 'Video Ads', + type: 'line', + smooth: true, + stack: 'Total', + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0.25, + color: '#fedb5c' + }, + { + offset: 1, + color: '#fff' + } + ] + } + }, + emphasis: { + focus: 'series' + }, + data: [150, 232, 201, 154, 190, 330, 410] + }, + { + color: '#fb7293', + name: 'Direct', + type: 'line', + smooth: true, + stack: 'Total', + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0.25, + color: '#fb7293' + }, + { + offset: 1, + color: '#fff' + } + ] + } + }, + emphasis: { + focus: 'series' + }, + data: [320, 332, 301, 334, 390, 330, 320] + }, + { + color: '#e7bcf3', + name: 'Search Engine', + type: 'line', + smooth: true, + stack: 'Total', + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0.25, + color: '#e7bcf3' + }, + { + offset: 1, + color: '#fff' + } + ] + } + }, + emphasis: { + focus: 'series' + }, + data: [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} as const; + +export const barOptions: ECOption = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + color: '#8378ea', + showBackground: true, + barGap: 100, + itemStyle: { + borderRadius: [40, 40, 0, 0] + }, + backgroundStyle: { + color: 'rgba(180, 180, 180, 0.2)' + } + } + ] +} as const; + +export function getPictorialBarOption(): ECOption { + const category: string[] = []; + let dottedBase = Number(new Date()); + const lineData: number[] = []; + const barData: number[] = []; + + for (let i = 0; i < 20; i += 1) { + const date = new Date((dottedBase += 3600 * 24 * 1000)); + 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); + } + + const options: ECOption = { + backgroundColor: '#0f375f', + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + 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: { + borderRadius: 5, + color: new 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 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 options; +} + +export function getScatterOption() { + // prettier-ignore + const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p']; + + // prettier-ignore + const days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday']; + + // prettier-ignore + const data: [number, number, number][] = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]]; + + const title: echarts.TitleComponentOption[] = []; + const singleAxis: echarts.SingleAxisComponentOption[] = []; + const series: echarts.ScatterSeriesOption[] = []; + + days.forEach((day, idx) => { + title.push({ + textBaseline: 'middle', + top: `${((idx + 0.5) * 100) / 7}%`, + text: day + }); + singleAxis.push({ + left: 150, + type: 'category', + boundaryGap: false, + data: hours, + top: `${(idx * 100) / 7 + 5}%`, + height: `${100 / 7 - 10}%`, + axisLabel: { + interval: 2 + } + }); + series.push({ + singleAxisIndex: idx, + coordinateSystem: 'singleAxis', + type: 'scatter', + data: [], + symbolSize(dataItem) { + return dataItem[1] * 4; + } + }); + }); + + data.forEach(dataItem => { + (series as any)[dataItem[0]].data.push([dataItem[1], dataItem[2]]); + }); + + const option: ECOption = { + tooltip: { + position: 'top' + }, + title, + singleAxis, + series: series as any + }; + + return option; +} + +export const radarOptions: ECOption = { + title: { + text: 'Multiple Radar' + }, + tooltip: { + trigger: 'axis' + }, + legend: { + left: 'center', + data: ['A Software', 'A Phone', 'Another Phone', 'Precipitation', 'Evaporation'] + }, + radar: [ + { + indicator: [ + { name: 'Brand', max: 100 }, + { name: 'Content', max: 100 }, + { name: 'Usability', max: 100 }, + { name: 'Function', max: 100 } + ], + center: ['25%', '40%'], + radius: 80 + }, + { + indicator: [ + { name: 'Look', max: 100 }, + { name: 'Photo', max: 100 }, + { name: 'System', max: 100 }, + { name: 'Performance', max: 100 }, + { name: 'Screen', max: 100 } + ], + radius: 80, + center: ['50%', '60%'] + }, + { + indicator: (() => { + const res = []; + for (let i = 1; i <= 12; i += 1) { + res.push({ name: `${i}月`, max: 100 }); + } + return res; + })(), + center: ['75%', '40%'], + radius: 80 + } + ], + series: [ + { + type: 'radar', + tooltip: { + trigger: 'item' + }, + areaStyle: {}, + data: [ + { + value: [60, 73, 85, 40], + name: 'A Software' + } + ] + }, + { + type: 'radar', + radarIndex: 1, + areaStyle: {}, + data: [ + { + value: [85, 90, 90, 95, 95], + name: 'A Phone' + }, + { + value: [95, 80, 95, 90, 93], + name: 'Another Phone' + } + ] + }, + { + type: 'radar', + radarIndex: 2, + areaStyle: {}, + data: [ + { + name: 'Precipitation', + value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3] + }, + { + name: 'Evaporation', + value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3] + } + ] + } + ] +}; +export const gaugeOptions: ECOption = { + series: [ + { + name: 'hour', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 12, + splitNumber: 12, + clockwise: true, + axisLine: { + lineStyle: { + width: 15, + color: [[1, 'rgba(0,0,0,0.7)']], + shadowColor: 'rgba(0, 0, 0, 0.5)', + shadowBlur: 15 + } + }, + splitLine: { + lineStyle: { + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 3, + shadowOffsetX: 1, + shadowOffsetY: 2 + } + }, + axisLabel: { + fontSize: 50, + distance: 25, + formatter(value) { + if (value === 0) { + return ''; + } + return `${value}`; + } + }, + anchor: { + show: true, + icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z', + showAbove: false, + offsetCenter: [0, '-35%'], + size: 120, + keepAspect: true, + itemStyle: { + color: '#707177' + } + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 12, + length: '55%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: [0, '30%'] + }, + data: [ + { + value: 0 + } + ] + }, + { + name: 'minute', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 60, + clockwise: true, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 8, + length: '70%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + anchor: { + show: true, + size: 20, + showAbove: false, + itemStyle: { + borderWidth: 15, + borderColor: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: 0 + } + ] + }, + { + name: 'second', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 60, + animationEasingUpdate: 'bounceOut', + clockwise: true, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 4, + length: '85%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + anchor: { + show: true, + size: 15, + showAbove: true, + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: 0 + } + ] + } + ] +}; diff --git a/src/views/plugin/charts/echart/index.vue b/src/views/plugin/charts/echart/index.vue new file mode 100644 index 00000000..6efcd571 --- /dev/null +++ b/src/views/plugin/charts/echart/index.vue @@ -0,0 +1,160 @@ + + + + +