CN-49 feat ： 饼图调整 && 数值过大的单位处理

src/components/charts/chart-options.js

@@ -4,6 +4,7 @@
  * @description chart option和一些工具
 */
 import { format } from 'echarts'
+import { shortFormatter } from './chartFormatter'
 import _ from 'lodash'
 export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB']
 export function getChartColor (index) {
@@ -17,9 +18,7 @@ const line = {
       width: '20px',
       overflow: 'truncate'
     },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
     className: 'nz-chart-tooltip',
     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
@@ -27,7 +26,11 @@ const line = {
     type: 'time'
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
   },
   animation: false,
   grid: {
@@ -71,9 +74,7 @@ const lineWithStatistics = {
       width: '20px',
       overflow: 'truncate'
     },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
     className: 'nz-chart-tooltip',
     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
@@ -82,7 +83,11 @@ const lineWithStatistics = {
   },
   animation: false,
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
   },
   color: chartColor,
   grid: {
@@ -114,9 +119,7 @@ const lineStack = {
       width: '20px',
       overflow: 'truncate'
     },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
     className: 'nz-chart-tooltip',
     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
@@ -125,7 +128,11 @@ const lineStack = {
   },
   color: chartColor,
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
   },
   grid: {
     left: 55,
@@ -183,6 +190,7 @@ const pieWithTable = {
   series: [
     {
       type: 'pie',
+      selectedMode: 'single',
       radius: ['42%', '70%'],
       center: ['30%', '50%'],
       data: [],
@@ -290,6 +298,26 @@ export function getLayout (type) {
 function tooLongFormatter (name) {
   return format.truncateText(name, 110, '12')
 }
-// function axiosFormatter(params) {
-//
-// }
+function axiosFormatter (params) {
+  let str = '<div>'
+  const sum = 0
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${shortFormatter(item.data[1])}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}