From 370b12f5154f4a531c3a27c3ccc2601845872344 Mon Sep 17 00:00:00 2001 From: vben Date: Wed, 17 Feb 2021 23:57:48 +0800 Subject: [PATCH] feat: support echarts 5.0 --- CHANGELOG.zh_CN.md | 4 + package.json | 3 +- src/hooks/web/useECharts.ts | 16 +- src/plugins/echarts/index.ts | 31 + .../analysis/components/AnalysisLine.vue | 9 +- .../analysis/components/AnalysisPie.vue | 5 +- .../analysis/components/TrendLine.vue | 14 +- src/views/demo/echarts/Line.vue | 33 +- src/views/demo/echarts/Map.vue | 62 +- src/views/demo/echarts/Pie.vue | 63 +- src/views/demo/echarts/china.json | 856 ++++++++++++++++++ yarn.lock | 38 +- 12 files changed, 993 insertions(+), 141 deletions(-) create mode 100644 src/plugins/echarts/index.ts create mode 100644 src/views/demo/echarts/china.json diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 36351bd3..437efba8 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,5 +1,9 @@ ## Wip +## (破坏性更新) Breaking changes + +- `echarts` 升级到 5.0,并且进行按需引入(只需使用 `useECharts` 即可). + ### ✨ Refactor - 移除`global.less`,`mixin.less`,`design/helper`,由`windicss`代替,有用到的需要修改对应的样式 diff --git a/package.json b/package.json index 5e8d539f..0b0eae80 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "apexcharts": "^3.25.0", "axios": "^0.21.1", "crypto-es": "^1.2.7", - "echarts": "^4.9.0", + "echarts": "^5.0.2", "lodash-es": "^4.17.20", "mockjs": "^1.1.0", "nprogress": "^0.2.0", @@ -54,7 +54,6 @@ "@iconify/json": "^1.1.303", "@ls-lint/ls-lint": "^1.9.2", "@purge-icons/generated": "^0.7.0", - "@types/echarts": "^4.9.3", "@types/fs-extra": "^9.0.7", "@types/http-proxy": "^1.17.5", "@types/koa-static": "^4.0.1", diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts index a069ddc0..d98f7503 100644 --- a/src/hooks/web/useECharts.ts +++ b/src/hooks/web/useECharts.ts @@ -1,25 +1,25 @@ import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { tryOnUnmounted } from '/@/utils/helper/vueHelper'; import { unref, Ref, nextTick } from 'vue'; -import type { EChartOption, ECharts } from 'echarts'; -import echarts from 'echarts'; +import type { EChartsType, EChartsOption } from 'echarts'; import { useDebounce } from '/@/hooks/core/useDebounce'; import { useEventListener } from '/@/hooks/event/useEventListener'; import { useBreakpoint } from '/@/hooks/event/useBreakpoint'; -export type { EChartOption, ECharts }; +import echarts from '/@/plugins/echarts'; + export function useECharts( elRef: Ref, theme: 'light' | 'dark' | 'default' = 'light' ) { - let chartInstance: Nullable = null; + let chartInstance: Nullable = null; let resizeFn: Fn = resize; let removeResizeFn: Fn = () => {}; const [debounceResize] = useDebounce(resize, 200); resizeFn = debounceResize; - function init() { + function initCharts() { const el = unref(elRef); if (!el || !unref(el)) { return; @@ -40,7 +40,7 @@ export function useECharts( } } - function setOptions(options: any, clear = true) { + function setOptions(options: EChartsOption, clear = true) { if (unref(elRef)?.offsetHeight === 0) { useTimeoutFn(() => { setOptions(options); @@ -50,7 +50,7 @@ export function useECharts( nextTick(() => { useTimeoutFn(() => { if (!chartInstance) { - init(); + initCharts(); if (!chartInstance) return; } @@ -74,7 +74,7 @@ export function useECharts( return { setOptions, - echarts, resize, + echarts, }; } diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts new file mode 100644 index 00000000..b08f318d --- /dev/null +++ b/src/plugins/echarts/index.ts @@ -0,0 +1,31 @@ +import * as echarts from 'echarts/core'; + +import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart } from 'echarts/charts'; + +import { + TitleComponent, + TooltipComponent, + GridComponent, + PolarComponent, + AriaComponent, + ParallelComponent, +} from 'echarts/components'; + +import { SVGRenderer } from 'echarts/renderers'; + +echarts.use([ + TitleComponent, + TooltipComponent, + GridComponent, + PolarComponent, + AriaComponent, + ParallelComponent, + BarChart, + LineChart, + PieChart, + MapChart, + SVGRenderer, + PictorialBarChart, +]); + +export default echarts; diff --git a/src/views/dashboard/analysis/components/AnalysisLine.vue b/src/views/dashboard/analysis/components/AnalysisLine.vue index 34f358af..b1d89339 100644 --- a/src/views/dashboard/analysis/components/AnalysisLine.vue +++ b/src/views/dashboard/analysis/components/AnalysisLine.vue @@ -73,11 +73,8 @@ name: '产品一', type: 'line', itemStyle: { - normal: { - color: '#5B8FF9', - }, + color: '#5B8FF9', }, - // areaStyle: {}, data: [330, 132, 101, 134, 90, 230, 210, 150, 232, 234, 230, 400], animationDuration: 4000, }, @@ -85,9 +82,7 @@ name: '产品二', type: 'line', itemStyle: { - normal: { - color: '#55D187', - }, + color: '#55D187', }, data: [220, 182, 191, 234, 290, 330, 310, 330, 232, 201, 330, 190], animationDuration: 4000, diff --git a/src/views/dashboard/analysis/components/AnalysisPie.vue b/src/views/dashboard/analysis/components/AnalysisPie.vue index 53657a23..6bb060fc 100644 --- a/src/views/dashboard/analysis/components/AnalysisPie.vue +++ b/src/views/dashboard/analysis/components/AnalysisPie.vue @@ -35,9 +35,8 @@ color: 'black', }, textAlign: 'center', - // @ts-ignore - x: '34.5%', - y: '40%', + left: '34.5%', + top: '40%', }, ], tooltip: { diff --git a/src/views/dashboard/analysis/components/TrendLine.vue b/src/views/dashboard/analysis/components/TrendLine.vue index 68882804..02c71a2f 100644 --- a/src/views/dashboard/analysis/components/TrendLine.vue +++ b/src/views/dashboard/analysis/components/TrendLine.vue @@ -15,9 +15,6 @@ onMounted(() => { setOptions({ - // title: { - // text: '产品成交额', - // }, tooltip: { trigger: 'axis', padding: 3, @@ -38,7 +35,7 @@ type: 'category', boundaryGap: false, axisTick: { - inside: true, // 刻度朝内 + inside: true, }, data: [ '一月', @@ -58,7 +55,7 @@ yAxis: { type: 'value', axisTick: { - inside: true, // 刻度朝内 + inside: true, }, }, series: [ @@ -69,8 +66,6 @@ color: '#5B8FF9', }, areaStyle: { - // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 - // @ts-ignore color: new echarts.graphic.LinearGradient( 0, 0, @@ -88,10 +83,9 @@ ], false ), - shadowColor: 'rgba(118,168,248, 0.9)', // 阴影颜色 - shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + shadowColor: 'rgba(118,168,248, 0.9)', + shadowBlur: 20, }, - // areaStyle: {}, data: [134, 330, 132, 101, 90, 230, 210, 150, 230, 400, 232, 234], animationDuration: 3000, }, diff --git a/src/views/demo/echarts/Line.vue b/src/views/demo/echarts/Line.vue index ec08cccd..c0789421 100644 --- a/src/views/demo/echarts/Line.vue +++ b/src/views/demo/echarts/Line.vue @@ -4,7 +4,6 @@