feat: ✨ 柱状图、饼图优化

dizuncainiao · Aug 9, 2023 · 9328146 · 9328146
1 parent e98fdb2
commit 9328146
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 25 deletions.
diff --git a/examples/src/config/menus/bar.ts b/examples/src/config/menus/bar.ts
@@ -1,26 +1,20 @@
-import { BnIconSetting } from 'blocks-next'
-
 export default [
   {
-    icon: BnIconSetting,
     title: '柱状图',
     routeName: 'BasicBarDemo',
     showItem: true
   },
   {
-    icon: BnIconSetting,
     title: '柱状图-纵向',
     routeName: 'BasicBarVerticalDemo',
     showItem: true
   },
   {
-    icon: BnIconSetting,
     title: '柱状图-堆叠',
     routeName: 'BasicBarStackDemo',
     showItem: true
   },
   {
-    icon: BnIconSetting,
     title: '柱状图-堆叠-纵向',
     routeName: 'BasicBarStackVerticalDemo',
     showItem: true

diff --git a/examples/src/config/menus/index.ts b/examples/src/config/menus/index.ts
@@ -1,4 +1,3 @@
-import { BnIconSetting } from 'blocks-next'
 import Bar from './bar.ts'
 import Line from './line.ts'
 import Pie from './pie.ts'
@@ -10,7 +9,6 @@ export const menuData = [
     showGroup: true,
     children: [
       {
-        icon: BnIconSetting,
         title: '小报表布局',
         routeName: 'BasicSmallLayoutDemo',
         showItem: true
@@ -27,7 +25,6 @@ export const menuData = [
     showGroup: true,
     children: [
       {
-        icon: BnIconSetting,
         title: '外呼次数排行榜',
         routeName: 'ThingsOutboundNumberRankingDemo',
         showItem: true

diff --git a/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar-stack-vertical.ts b/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar-stack-vertical.ts
@@ -1,15 +1,15 @@
 import {
   categoryXAxis,
   colors,
-  tooltip,
+  barTooltip,
   valueYAxis,
   verticalBarStyle,
   verticalGrid
 } from './basic'
 
 export default {
   color: colors,
-  tooltip: tooltip,
+  tooltip: barTooltip,
   xAxis: categoryXAxis,
   yAxis: valueYAxis,
   series: [

diff --git a/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar-stack.ts b/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar-stack.ts
@@ -3,13 +3,13 @@ import {
   colors,
   horizontalBarStyle,
   horizontalGrid,
-  tooltip,
+  barTooltip,
   valueXAxis
 } from './basic'
 
 export default {
   color: colors,
-  tooltip: tooltip,
+  tooltip: barTooltip,
   xAxis: valueXAxis,
   yAxis: categoryYAxis,
   series: [

diff --git a/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar-vertical.ts b/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar-vertical.ts
@@ -1,15 +1,15 @@
 import {
   categoryXAxis,
   colors,
-  tooltip,
+  barTooltip,
   valueYAxis,
   verticalBarStyle,
   verticalGrid
 } from './basic'
 
 export default {
   color: colors,
-  tooltip: tooltip,
+  tooltip: barTooltip,
   xAxis: categoryXAxis,
   yAxis: valueYAxis,
   series: [

diff --git a/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar.ts b/packages/bi-chart/components/basic-chart/chart-option/bar/basic-bar.ts
@@ -3,13 +3,13 @@ import {
   colors,
   horizontalBarStyle,
   horizontalGrid,
-  tooltip,
+  barTooltip,
   valueXAxis
 } from './basic'
 
 export default {
   color: colors,
-  tooltip: tooltip,
+  tooltip: barTooltip,
   xAxis: valueXAxis,
   yAxis: categoryYAxis,
   series: [

diff --git a/packages/bi-chart/components/basic-chart/chart-option/bar/basic.ts b/packages/bi-chart/components/basic-chart/chart-option/bar/basic.ts
@@ -134,8 +134,8 @@ export const colors = [
   '#242934'
 ]
 
-// 通用 tooltip
-export const tooltip = {
+// 通用柱状图 tooltip
+export const barTooltip = {
   trigger: 'axis',
   axisPointer: {
     // Use axis to trigger tooltip

diff --git a/packages/bi-chart/components/basic-chart/chart-option/pie/basic.ts b/packages/bi-chart/components/basic-chart/chart-option/pie/basic.ts
@@ -1,3 +1,16 @@
+// 通用饼图 tooltip
+export const pieTooltip = {
+  trigger: 'item',
+  className: 'tooltip-layer-wrapper',
+  formatter: `
+      <div class="tooltip-layer-box">
+        <div class="title">{b}</div>
+        <div class="num">数量：{c}</div>
+        <div class="proportion">占比：{d}%</div>
+      </div>
+    `
+}
+
 export const colorToolTipLegend = {
   color: [
     '#0056FF',
@@ -11,9 +24,7 @@ export const colorToolTipLegend = {
     '#2ED4A9',
     '#242934'
   ],
-  tooltip: {
-    trigger: 'item'
-  },
+  tooltip: pieTooltip,
   legend: {
     type: 'scroll',
     orient: 'vertical',
@@ -28,7 +39,7 @@ export const colorToolTipLegend = {
       padding: [0, 0, 0, 5]
     },
     itemWidth: 6
-  },
+  }
 }
 
 export const labelEmphasis = {
@@ -46,5 +57,5 @@ export const labelEmphasis = {
   },
   labelLine: {
     show: false
-  },
-}
+  }
+}
diff --git a/packages/bi-chart/style/index.css b/packages/bi-chart/style/index.css
@@ -1,3 +1,4 @@
+/* 业务布局组件 */
 .chart-box {
   width: 100%;
   min-width: 300px;
@@ -112,3 +113,24 @@ x-vue-echarts {
   min-width: 0;
   height: 100%;
 }
+
+/* echarts tooltip */
+.tooltip-layer-wrapper {
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+.tooltip-layer-box {
+  padding: 12px !important;
+  font-size: 12px !important;
+  line-height: 19px;
+  color: #fff !important;
+  background: rgb(0 0 0 / 70%) !important;
+  border: none !important;
+  border-radius: 4px;
+
+  .title {
+    font-size: 13px;
+  }
+}