【echarts图标底部标签legend展示数量及字符长度限制】

本文介绍: 其实很简单，就是对legend中的data 属性做特殊的处理就行了，代码如下，关键代码在getCh ar ts 方法中，已经在代码中做了标注。

echarts 图标 底部 标签 legend数量显示 限制

- 当界面底部的标签项太多时。。。是不是很头大
- 如何限制

当界面 底部的标签项太多时。。。是不是很头大

在这里插入图片描述

如何 限制

其实很简单，就是对legend中的dat a 属性做特殊的处理就行了，代码如下，关键代码在g e tCh ar ts 方法中，已经在代码中做了标注

&lt;template&gt;
  &lt;div :id="chartBoxItem.idName" class="doughnutChar" /&gt;
</template>

<script>
export default {
  name: 'DoughnutChar',
  components: {},
  props: {
    chartBoxItem: {
      type: Object,
      default: () => {
      return {
          chartName: '测试数据',
          data: [{ name: '数据1', value: 11 }, { name: '数据2', value: 22 }, { name: '数据3', value: 33 }, { name: '数据4', value: 11 }, { name: '数据5', value: 11 }, { name: '数据6', value: 33 }, { name: '数据7', value: 11 }, { name: '数据8', value: 22 }, { name: '数据9', value: 55 }],
          idName: 'test'
        }}
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {
    chartBoxItem: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val &amp;&amp; val.idName &amp;&amp; val.chartName) {
          this.$nextTick(() => {
            this.getChart()
          })
        }
      }
    }
  },
  created() {},
  mounted() {
  },
  // 组件方法
  methods: {
    getChart() {
      const _that = this
      // 设置底部标签展示的内容的数量
      const text_data = this.chartBoxItem.data.map(item => item.name).slice(0, 5)
      const myEChart = this.$echarts.init(document.getElementById(this.chartBoxItem.idName))
      myEChart ? myEChart.clear() : ''
      const option = {
        legend: {
          bottom: '0',
          left: 'center',
          // 控制底部标签样式大小
          // itemGap: 15,
          // itemWidth: 9,
          // itemHeight: 10,
          textStyle: {
            color: 'rgb(187,192,200)'
          },
          // 标签长度太长做如下限制
          formatter: function(name) {
            return (name.length > 14 ? (name.slice(0, 14) + '...') : name)
          },
          // 底部标签展示的内容
          data: text_data
      },
        title: [
          {
            text: this.chartBoxItem.chartName,
            textAlign: 'center',
            left: '30%',
            top: 10,
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '测试数据',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
                color: '#7d818d'

              }
            },
            labelLine: {
              show: false
            },
            data: this.chartBoxItem.data,
            bottom: '10%'
          }
        ]
      }
      myEChart.setOption(option)
      myEChart.on('click', function(params) {
      // ... 省略部分无关代码
      })
    }
  }
}
</script>

    <style  lang='scss'>
     .doughnutChar{
        width: 25%;
        height:100%;
      }
    </style>