一、使用柱状图时,因为数据差距过大,导致图表不好看
修改:
a. 将y轴改为对数轴,
b. 数组中值不能为0,需要将值修改为undefined,
c. tooltip中将数值为undefined重置为0
// 将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}`
},
},
二、 x轴label换行
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
}
},
},
三、词云图
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
}],
}
附依赖图: