alibaba-fusion · Leannechn · Feb 20, 2021 · Feb 20, 2021 · Feb 20, 2021 · Feb 20, 2021
diff --git a/blocks/FusionCardAreaChart/src/index.tsx b/blocks/FusionCardAreaChart/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card } from '@alifd/next';
-import { Chart, Geom } from 'bizcharts';
+import { Chart, Line, Area } from 'bizcharts';
 import mock from './mock.js';
 
 import styles from './index.module.scss';
@@ -48,20 +48,20 @@ const FusionCardAreaChart: React.FunctionComponent<FusionCardAreaChartProps> = (
         <div className={styles.value}>{value}</div>
         <div className={styles.des}>{des}<span>{rate}↑</span></div>
         <Chart
-          width={10}
           height={chartHeight}
           data={chartData}
+          pure
           scale={{
             date: {
               range: [0, 1],
             },
           }}
-          forceFit
-          padding={['auto', '0']}
+          autoFit
+          padding="auto"
+          appendPadding={[2, 0]}
         >
-          <Geom type="line" position="date*value" color="#00D6CB" shape="smooth" opacity={1} />
-          <Geom type="area" position="date*value" color="#00D6CB" shape="smooth" opacity={0.1} />
-
+          <Line position="date*value" color="#00D6CB" shape="smooth" opacity={1} />
+          <Area position="date*value" color="#00D6CB" shape="smooth" opacity={0.1} />
         </Chart>
       </Card.Content>
     </Card>

diff --git a/blocks/FusionCardBarChart/src/index.tsx b/blocks/FusionCardBarChart/src/index.tsx
@@ -29,6 +29,22 @@ const DEFAULT_DATA: CardConfig = {
   chartHeight: 100,
 };
 
+const barState = {
+  // 鼠标hover后的active
+  active: {
+    style: {
+      fillOpacity: 0.8,
+      stroke: 'transparent',
+    },
+  },
+  // 其他未被hover的图形样式
+  inactive: {
+    style: {
+      fillOpacity: 1,
+    },
+  },
+};
+
 export interface FusionCardBarChartProps {
   cardConfig?: CardConfig;
 }
@@ -55,18 +71,28 @@ const FusionCardBarChart: React.FunctionComponent<FusionCardBarChartProps> = (pr
         <div className={styles.value}>{value}</div>
         <div className={styles.des}>{des}<span>{rate}↑</span></div>
         <Chart
-          width={10}
           height={chartHeight}
           data={chartData}
           scale={{
             date: {
               range: [0, 1],
             },
           }}
-          forceFit
-          padding={['auto', '16']}
+          // pure chart 关闭图表默认组件
+          pure
+          autoFit
+          padding="auto"
+          appendPadding={[0, 16, 0, 16]}
+          // 鼠标hover产生active状态
+          interactions={['element-highlight']}
         >
-          <Geom type="interval" position="date*value" color="#29A5FF" />
+          <Geom
+            type="interval"
+            position="date*value"
+            color="#29A5FF"
+            // 自定义状态样式
+            state={barState}
+          />
         </Chart>
       </Card.Content>
     </Card>

diff --git a/blocks/FusionCardBarChart/src/mock.js b/blocks/FusionCardBarChart/src/mock.js
@@ -1,14 +1,14 @@
 export default {
   value: '123,456',
   saleList: [
-    { date: 1, value: 3 },
-    { date: 2, value: 9 },
-    { date: 3, value: 5 },
-    { date: 4, value: 8 },
-    { date: 5, value: 11 },
-    { date: 6, value: 6 },
-    { date: 7, value: 8 },
-    { date: 8, value: 7 },
+    { date: '1', value: 3 },
+    { date: '2', value: 9 },
+    { date: '3', value: 5 },
+    { date: '4', value: 8 },
+    { date: '5', value: 11 },
+    { date: '6', value: 6 },
+    { date: '7', value: 8 },
+    { date: '8', value: 7 },
   ],
   dailySale: '¥1,234',
 };
diff --git a/blocks/FusionCardCrossPieChart/src/index.tsx b/blocks/FusionCardCrossPieChart/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card } from '@alifd/next';
-import { Chart, Geom, Coord, Axis, Legend } from 'bizcharts';
+import { Chart, Geom, Coord, Legend } from 'bizcharts';
 
 interface ChartItem {
   type?: string;
@@ -46,6 +46,26 @@ const DEFAULT_DATA: CardConfig = {
   chartHeight: 240,
 };
 
+// 自定义hover的图形样式
+const pieState = {
+  active: {
+    style: {
+      fillOpacity: 0.7,
+      lineWidth: 1,
+      stroke: 'white',
+      strokeOpacity: 1,
+    },
+  },
+  inactive: {
+    style: {
+      fillOpacity: 0.85,
+      lineWidth: 1,
+      stroke: 'white',
+      strokeOpacity: 1,
+    },
+  },
+};
+
 export interface FusionCardLineChartProps {
   cardConfig?: CardConfig;
 }
@@ -64,31 +84,37 @@ const FusionCardLineChart: React.FunctionComponent<FusionCardLineChartProps> = (
       <Card.Divider />
       <Card.Content>
         <Chart
-          width={10}
+          pure
           height={chartHeight}
-          forceFit
+          autoFit
           data={chartData}
-          padding={['auto', 'auto']}
+          padding="auto"
+          interactions={['element-single-selected', 'element-highlight']}
         >
-          <Coord type="theta" radius={0.75} innerRadius={0.6} />
-          <Axis name="percent" />
+          <Coord type="theta" radius={0.72} innerRadius={0.6} />
           <Legend
-            position="right-center"
+            position="right"
             layout="vertical"
-            textStyle={{
-              fill: '#666',
-              fontSize: 14,
+            itemName={{
+              style: {
+                fill: '#666',
+                fontSize: 14,
+              },
             }}
+            itemValue={null}
             itemMarginBottom={24}
           />
           <Geom
-            type="intervalStack"
+            type="interval"
             position="value"
             color="title"
             style={{
               lineWidth: 1,
-              stroke: '#fff',
+              stroke: 'white',
+              fillOpacity: 0.85,
             }}
+            adjust="stack"
+            state={pieState}
           />
         </Chart>
       </Card.Content>

diff --git a/blocks/FusionCardGroupBarChart/src/index.tsx b/blocks/FusionCardGroupBarChart/src/index.tsx
@@ -38,6 +38,7 @@ const DEFAULT_DATA: CardConfig = {
   chartHeight: 500,
 };
 
+const colors = ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864'];
 export interface FusionCardGroupBarChartProps {
   cardConfig?: CardConfig;
 }
@@ -54,29 +55,43 @@ const FusionCardGroupBarChart: React.FunctionComponent<FusionCardGroupBarChartPr
       <Card.Header title={title} />
       <Card.Divider />
       <Card.Content>
-        <Chart renderer="canvas" forceFit width={10} height={chartHeight} data={chartData} padding={['80', 'auto']}>
-          <Axis name="category" />
-          <Axis name="value" />
-          <Legend
-            textStyle={{
-              fill: '#666',
-              fontSize: 14,
-            }}
-          />
+        <Chart
+          renderer="canvas"
+          height={chartHeight}
+          data={chartData}
+          autoFit
+          padding="auto"
+          appendPadding={[80, 0, 30, 0]}
+          scale={{ value: { min: -600, max: 600, tickInterval: 200 } }}
+          interactions={['element-highlight']}
+        >
           <Geom
             type="interval"
             position="category*value"
-            color="type"
+            color={['type', colors]} // 配置颜色 具体API文档：https://bizcharts.net/product/BizCharts4/category/62/page/84#color
             adjust={[
               {
                 type: 'dodge',
-                marginRatio: 1 / 16,
+                marginRatio: 0,
               },
             ]}
           />
+          <Axis
+            name="value"
+            grid={{ line: { style: { lineDash: [3, 3] } } }}
+          />
+          <Legend
+            itemName={{ // 配置图例name,其中formatter可格式化图例name 具体API文档：https://bizcharts.net/product/BizCharts4/category/62/page/81#itemname
+              style: {
+                fill: '#666',
+                fontSize: 14,
+              },
+            }}
+            offsetY={-14} // 图例 Y 方向的偏移值，数值类型，数值单位为 'px'，默认值为 0。
+          />
         </Chart>
       </Card.Content>
-    </Card>
+    </Card >
   );
 };
 

diff --git a/blocks/FusionCardLineChart/src/index.tsx b/blocks/FusionCardLineChart/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card } from '@alifd/next';
-import { Chart, Geom } from 'bizcharts';
+import { Chart, LineAdvance } from 'bizcharts';
 import mock from './mock.js';
 
 import styles from './index.module.scss';
@@ -55,21 +55,20 @@ const FusionCardLineChart: React.FunctionComponent<FusionCardLineChartProps> = (
         <div className={styles.value}>{value}</div>
         <div className={styles.des}>{des}<span>{rate}↑</span></div>
         <Chart
-          width={10}
           height={chartHeight}
           data={chartData}
           scale={{
             date: {
               range: [0, 1],
             },
           }}
-          forceFit
-          padding={['auto', '0']}
+          pure
+          autoFit
+          padding="auto"
+          appendPadding={[2, 0, 0, 0]} // 留出图形出血位置
         >
-          <Geom type="line" position="date*value" shape="smooth" color="#2B7FFB" />
-          <Geom type="area" position="date*value" shape="smooth" color="#2B7FFB" opacity={0.1} />
-          <Geom type="line" position="date*num" shape="smooth" color="#00D6CB" opacity={1} />
-          <Geom type="area" position="date*num" shape="smooth" color="#00D6CB" opacity={0.1} />
+          <LineAdvance area position="date*value" shape="smooth" color="#2B7FFB" />
+          <LineAdvance area position="date*num" shape="smooth" color="#00D6CB"  />
         </Chart>
       </Card.Content>
     </Card>

diff --git a/blocks/FusionCardLineChart/src/mock.js b/blocks/FusionCardLineChart/src/mock.js
@@ -1,11 +1,11 @@
 export default {
   value: '123,456',
   saleList: [
-    { date: 1, value: 3, num: 1 },
+    { date: 1, value: 2, num: 1 },
     { date: 2, value: 9, num: 2 },
     { date: 3, value: 5, num: 2 },
     { date: 4, value: 8, num: 2 },
-    { date: 5, value: 11, num: 2 },
+    { date: 5, value: 12, num: 2 },
     { date: 6, value: 6, num: 2 },
     { date: 7, value: 8, num: 2 },
     { date: 8, value: 7, num: 2 },