feat: pieWithTable 微调

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,

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)