From c0a8d4dbcb31bdc214ffd7643bd99c5b914aa5f9 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 25 Jun 2021 10:10:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20pieWithTable=20=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/chart-options.js |  3 +++
 src/views/charts/Chart.vue             | 12 +++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index b70bc801..9401d7e1 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -242,6 +242,9 @@ const pieWithTable = {
   series: [
     {
       type: 'pie',
+      top: '10%',
+      left: '10%',
+      width: 'auto',
       radius: ['50%', '80%'],
       center: ['25%', '50%'],
       data: pieData,
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index ad16262c..f7ce7766 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -182,9 +182,19 @@ export default {
           ]
         }
       } else if (this.isEcharts) {
-        myChart = echarts.init(document.getElementById(`chart${this.chartInfo.id}`))
+        const dom = document.getElementById(`chart${this.chartInfo.id}`)
+        myChart = echarts.init(dom)
         myChart.setOption(this.chartOption)
         if (this.isEchartsWithTable) {
+          this.chartOption.legend.formatter = (name) => { // 根据图表宽 显示legend的字数
+            let str = name
+            const length = Math.floor(dom.offsetWidth / 75)
+            if (name.length > length) {
+              str = name.substring(0, length - 3) + '...'
+            }
+            return str
+          }
+          myChart.setOption(this.chartOption)
           if (this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
             this.chartOption.legend.type = 'scroll'
             myChart.setOption(this.chartOption)