echarts标题折行处理

200 阅读1分钟
<template>
  <div class="echarts-table">
    <div ref="echartsRef" style="width: 500px; height: 500px"></div>
  </div>
</template>
<script>
const valueType = [
  { name: '性别', value: '女', max: 100 },
  { name: '年龄', value: '25-35岁', max: 100 },
  { name: '消费水平', value: '中高端', max: 100 },
  { name: '资产情况', value: '有车一族', max: 100 },
  { name: '学历发布', value: '本科以上', max: 100 }
]
export default {
  data() {
    return {}
  },
  mounted () {
    const myCharts = this.$echarts.init(this.$refs.echartsRef)
    const option = {
      color: ['pink'],
      radar: {
        center: ['50%', '55%'],
        radius: 90,
        // 圆的半径,数组的第一项是内半径,第二项是外半径。
        startAngle: 90,
        name: {
          color: 'rgba(0,0,0,0.4)',
          formatter: (value) => {
            let d
            valueType.map((item) => {
              if (item.name === value) {
                d = item.value
              }
            })
            return [`${value}`, `${d}`].join('\n')
          }
        },
        indicator: valueType
      },
      series: [
        {
          name: '人群',
          type: 'radar',
          // label: {
          //   show: true,
          //   position: "top",
          //   borderColor: "#ffffff",
          //   textBorderColor: "#ffffff",
          //   color: "#ffffff",
          // },
          data: [
            {
              value: [42, 30, 20, 35, 50, 18],
              name: '人数比例',
              areaStyle: {
                // color: "rgba(255, 228, 52, 0.6)",
              }
            }
          ]
        }
      ]
    }
    myCharts.setOption(option)
  }
}
</script>

image.png