Common configuration of vue echarts: label line break, word cloud map, data gap is too large

1. When using a bar chart, because the data gap is too large, the chart is not good-looking

Revise:

a. Change the y-axis to a logarithmic axis,

b. The value in the array cannot be 0, the value needs to be changed to undefined,

c. Reset the value of undefined to 0 in the tooltip

// 将option中的yAxis的type值改为log
yAxis: [
   { type: `value` },
],

// 将series中的data值为0修改为undefined
data = this.initDatas.map(item => {
    return item.value==0 ? undefined : item.value
})

tooltip: {
  trigger: "axis",
  formatter: function (params) {
     return `${params[0].name}-${params[0].seriesName}: ${params[0].data==undefined ? 0 :params[0].data}`
  },
},

Second, the x-axis label wraps

axisLabel: {
    formatter: function (value) {
       return value.split(``).join(`\n`)
    },
},



axisLabel: {
    interval: 0,  // 每个label都显示
    // rotate: 40,
    formatter: function (value) {
        let ret = `` //拼接加\n返回的类目项
        const maxLength = 4 //每项显示文字个数
        const valLength = value.length //X轴类目项的文字个数
        const rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
        if (rowN > 1) { //如果类目项的文字大于3,
           for (let i = 0; i < rowN; i++) {
               let temp = ``//每次截取的字符串
               const start = i * maxLength//开始截取的位置
               const end = start + maxLength//结束截取的位置
               //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
               if (i==rowN-1) {
                   temp = `${value.substring(start, end) }`
               }
               else {
                   temp = `${value.substring(start, end) }\n`
               }
               ret += temp //凭借最终的字符串
           }
           return ret
        }
        else {
           return value
        }
    },
},

Three, word cloud map

npm install --save [email protected]


import * as echarts from 'echarts'
import "echarts-wordcloud/dist/echarts-wordcloud.min"



this.data = this.initDatas.map(item => {
  return {
     name: item.name,
     value: item.value,
  }
})

let option = {
  tooltip: {
    trigger: `item`,
    axisPointer: { type: `shadow` },
  },
  series: [{
    type: `wordCloud`,
    // sizeRange: [15, 60],
    // rotationRange: [0, 0],
    // rotationStep: 45,
    gridSize: 8,
    // shape: `pentagon`,  // 形状
    width: `100%`,
    height: `100%`,
    drawOutOfBound: true,
    textStyle: {
      color: function () {
        return `rgb(${ [
          Math.round(Math.random() * 160),
          Math.round(Math.random() * 160),
          Math.round(Math.random() * 160),
        ].join(`,`) })`
      },
    },
    data: this.data
  }],
}

Attached dependency graph: