feat: support echarts 5.0

CHANGELOG.zh_CN.md

 ## Wip
 
+## (破坏性更新) Breaking changes
+
+- `echarts` 升级到 5.0,并且进行按需引入(只需使用 `useECharts` 即可).
+
 ### ✨ Refactor
 
 - 移除`global.less`,`mixin.less`,`design/helper`,由`windicss`代替,有用到的需要修改对应的样式

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",

src/hooks/web/useECharts.ts

 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<HTMLDivElement>,
   theme: 'light' | 'dark' | 'default' = 'light'
 ) {
-  let chartInstance: Nullable<ECharts> = null;
+  let chartInstance: Nullable<EChartsType> = 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,
   };
 }

src/plugins/echarts/index.ts

+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;

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,

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: {

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,
             },

src/views/demo/echarts/Line.vue

@@ -4,7 +4,6 @@
 <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';
 
@@ -21,7 +20,7 @@
     },
     setup() {
       const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
       const { barData, lineData, category } = getLineData;
       onMounted(() => {
         setOptions({
@@ -63,7 +62,7 @@
               name: 'line',
               type: 'line',
               smooth: true,
-              showAllSymbol: true,
+              showAllSymbol: 'auto',
               symbol: 'emptyCircle',
               symbolSize: 15,
               data: lineData,
@@ -73,13 +72,11 @@
               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' },
-                  ]),
-                },
+                borderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#14c8d4' },
+                  { offset: 1, color: '#43eec6' },
+                ]),
               },
               data: barData,
             },
@@ -89,13 +86,11 @@
               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)' },
-                  ]),
-                },
+                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,
@@ -105,9 +100,7 @@
               type: 'pictorialBar',
               symbol: 'rect',
               itemStyle: {
-                normal: {
-                  color: '#0f375f',
-                },
+                color: '#0f375f',
               },
               symbolRepeat: true,
               symbolSize: [12, 4],

src/views/demo/echarts/Map.vue

@@ -6,8 +6,8 @@
 
   import { useECharts } from '/@/hooks/web/useECharts';
   import { mapData } from './data';
+  import { registerMap } from 'echarts';
 
-  import 'echarts/map/js/china';
   export default defineComponent({
     props: {
       width: {
@@ -23,21 +23,25 @@
       const chartRef = ref<HTMLDivElement | null>(null);
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-      onMounted(() => {
+      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],
+          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)',
@@ -50,33 +54,15 @@
             {
               name: 'iphone4',
               type: 'map',
-              mapType: 'china',
+              map: 'china',
               label: {
-                normal: {
-                  show: true,
-                  textStyle: {
-                    color: 'rgb(249, 249, 249)',
-                    fontSize: 10,
-                  },
-                },
-                emphasis: {
-                  show: true,
-                  textStyle: {
-                    color: 'rgb(249, 249, 249)',
-                    fontSize: 14,
-                  },
-                },
+                show: true,
+                color: 'rgb(249, 249, 249)',
+                fontSize: 10,
               },
               itemStyle: {
-                normal: {
-                  label: { show: true },
-                  areaColor: '#2f82ce',
-                  borderColor: '#0DAAC1',
-                },
-                emphasis: {
-                  label: { show: true },
-                  areaColor: '#2f82ce',
-                },
+                areaColor: '#2f82ce',
+                borderColor: '#0DAAC1',
               },
               data: mapData,
             },

src/views/demo/echarts/Pie.vue

@@ -39,24 +39,33 @@
           title: [
             {
               text: '各渠道投诉占比',
-              x: '2%',
-              y: '1%',
-              textStyle: { color: '#fff', fontSize: 14 },
+              left: '2%',
+              top: '1%',
+              textStyle: {
+                color: '#fff',
+                fontSize: 14,
+              },
             },
             {
               text: '投诉原因TOP10',
-              x: '40%',
-              y: '1%',
-              textStyle: { color: '#fff', fontSize: 14 },
+              left: '40%',
+              top: '1%',
+              textStyle: {
+                color: '#fff',
+                fontSize: 14,
+              },
             },
             {
               text: '各级别投诉占比',
-              x: '2%',
-              y: '50%',
-              textStyle: { color: '#fff', fontSize: 14 },
+              left: '2%',
+              top: '50%',
+              textStyle: {
+                color: '#fff',
+                fontSize: 14,
+              },
             },
           ],
-          grid: [{ x: '50%', y: '7%', width: '45%', height: '90%' }],
+          grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
           tooltip: {
             formatter: '{b} ({c})',
           },
@@ -86,7 +95,6 @@
               type: 'pie',
               radius: '30%',
               center: ['22%', '25%'],
-              color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'],
               data: [
                 { value: 335, name: '客服电话' },
                 { value: 310, name: '奥迪官网' },
@@ -94,15 +102,11 @@
                 { value: 135, name: '质检总局' },
                 { value: 105, name: '其他' },
               ],
-              labelLine: { normal: { show: false } },
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: true,
-                    formatter: '{b} \n ({d}%)',
-                    textStyle: { color: '#B1B9D3' },
-                  },
-                },
+              labelLine: { show: false },
+              label: {
+                show: true,
+                formatter: '{b} \n ({d}%)',
+                color: '#B1B9D3',
               },
             },
             {
@@ -110,22 +114,17 @@
               type: 'pie',
               radius: '30%',
               center: ['22%', '75%'],
-              color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'],
-              labelLine: { normal: { show: false } },
+              labelLine: { 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' },
-                  },
-                },
+              label: {
+                show: true,
+                formatter: '{b} \n ({d}%)',
+                color: '#B1B9D3',
               },
             },
             {
@@ -134,8 +133,8 @@
               xAxisIndex: 0,
               yAxisIndex: 0,
               barWidth: '45%',
-              itemStyle: { normal: { color: '#86c9f4' } },
-              label: { normal: { show: true, position: 'right', textStyle: { color: '#9EA7C4' } } },
+              itemStyle: { color: '#86c9f4' },
+              label: { show: true, position: 'right', color: '#9EA7C4' },
               data: dataAll.sort(),
             },
           ],

yarn.lock

@@ -1447,13 +1447,6 @@
     "@types/keygrip" "*"
     "@types/node" "*"
 
-"@types/echarts@^4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@types/echarts/-/echarts-4.9.3.tgz#8a143cf315f6ae88d0778d75a133b378974d37d5"
-  integrity sha512-CbgZUYdLy1G2BhCI6maBwVXmrqIx/D8KwUccMXQ9W2uyXNMjBvpIRXSs+UaBtvUihPV2f0g7LGj/yua1iY0VbQ==
-  dependencies:
-    "@types/zrender" "*"
-
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -1749,11 +1742,6 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@types/zrender@*":
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz#a6806f12ec4eccaaebd9b0d816f049aca6188fbd"
-  integrity sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w==
-
 "@types/zxcvbn@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609"
@@ -3809,12 +3797,13 @@ duplexer3@^0.1.4:
   resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
-echarts@^4.9.0:
-  version "4.9.0"
-  resolved "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
-  integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==
+echarts@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz#1726d17a57cf05d62cd0567b4325e1201a56baf6"
+  integrity sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==
   dependencies:
-    zrender "4.3.2"
+    tslib "2.0.3"
+    zrender "5.0.4"
 
 ecstatic@4.1.4, ecstatic@^3.3.2:
   version "4.1.4"
@@ -8942,6 +8931,11 @@ ts-node@^9.1.1:
     source-map-support "^0.5.17"
     yn "3.1.1"
 
+tslib@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -9873,10 +9867,12 @@ yocto-queue@^0.1.0:
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zrender@4.3.2:
-  version "4.3.2"
-  resolved "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
-  integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==
+zrender@5.0.4:
+  version "5.0.4"
+  resolved "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz#89c355af908b9f64a301b38f751b7951f2c8a95a"
+  integrity sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==
+  dependencies:
+    tslib "2.0.3"
 
 zwitch@^1.0.0:
   version "1.0.5"