vue echarts常用配置: label 换行、词云图、数据差距过大

糖糖246

已于 2022-08-10 14:47:14 修改

阅读量2k

点赞数 1

分类专栏： vue echarts 文章标签：前端 vue.js javascript

于 2022-04-12 15:30:36 首次发布

本文链接：https://blog.csdn.net/weixin_59128282/article/details/124123049

版权

vue 同时被 2 个专栏收录

19 篇文章 4 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

本文介绍了ECharts在数据差距过大时的柱状图优化方法，包括将y轴转换为对数轴，处理数据中的0值，以及自定义tooltip。此外，还分享了如何实现x轴标签的换行显示，以及词云图的配置。同时，展示了条形图宽度设置和滚动条的详细配置，提供了丰富的示例代码。

摘要由CSDN通过智能技术生成

一、使用柱状图时，因为数据差距过大，导致图表不好看

修改：

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换行

option = {

...,

xAxis: {

...

axisLabel: {
formatter: (value) =>{
return value.split(``).join(`\n`) // return this.formatXlabel (value)
},
},

}

}

methods: {
    formatXlabel (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 echarts-wordcloud@2.0.0

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
  }],
}

附依赖图：

四、条状图宽度设置

option={

series: {

type: 'bar',

barMaxWidth: 30,

barMinWidth:10,

...

}

}

五、滚动条设置

option = {

...,

dataZoom: [

{

start: 30, //默认为0

end: 70, //默认为100

type: `slider`,

xAxisIndex: [0],

handleSize: 0, //滑动条的左右2个滑动条的大小

// height: 40, //组件高度

left: `5%`, //左边的距离

right: `4%`, //右边的距离

bottom: 6, //底边的距离

showDetail: false, //即拖拽时候是否显示详细数值信息默认true

realtime: true, //是否实时更新

filterMode: `filter`,

zoomLock: true,

show: this.isShow,

},

//下面这个属性是里面拖到

{

type: `inside`,

show: true,

xAxisIndex: [0],

start: 0, //默认为1

end: 100 - 1500 / 50, //默认为100

},

],

}