feat: support echarts 5.0

vbenjs · Feb 17, 2021 · 370b12f · 370b12f
1 parent 4d7001b
commit 370b12f
Show file tree

Hide file tree

Showing 12 changed files with 993 additions and 141 deletions.
diff --git 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
@@ -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
@@ -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<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,
   };
 }
diff --git a/src/plugins/echarts/index.ts 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
@@ -73,21 +73,16 @@
               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,
             },
             {
               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
@@ -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
@@ -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
@@ -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],

diff --git a/src/views/demo/echarts/Map.vue b/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,
             },