博客

1）柱状条在数据较少的情况下会变得很粗，配置如下

      series: [
        {
          barMaxWidth: '20', // 设置柱子最大宽度！！
          data: echartsData?.lineData,
          type: 'bar',
          barWidth: '30%',
          itemStyle: {
            borderRadius: 400
          }
        }
      ]

barMaxWitdh  这个属性用来设置柱子的最大宽度

2）禁止 length 被点击（ 通常在不想点击隐藏线条的时候使用 ）

     legend: {
        bottom: 'bottom',
        itemGap: 35, //图例图标与文字间的间距
        selectedMode: false // 核心代码！！！
      },

selectedMode：false   标识不让 length 被点击

3）设置 y 轴刻度线为整数

yAxis : {minInterval:1},

4）当 echarts X轴很长放不下的时候加滚动条

  let option = {
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          left: '9%',
          bottom: -3, // 底部距离
          height: 15, // 滚动条高度
          start: 30,
          end: 90, //初始化滚动条
          textStyle: {
            color: '#fff' // 隐藏滚动条左右文字
          }
        }
      ],

有时候超出的时候文字会显示不全，可以使用这行代码强制显示完全刻度线

 xAxis: {
        type: 'category',
        axisLabel: {
          interval: 0, //使x轴文字显示全
          rotate: 30, // 显示全可能放不下，这里代码让它倾斜
          showMaxLabel: true
        },

5）接上述，文字太多导致重叠，加换行

放在 xAxios，或者 yAxios 里面 

axisLabel: {
          interval: 0, //使x轴文字显示全
          // rotate: 30, // 显示全可能放不下，这里代码让它倾斜
          // showMaxLabel: true
          margin: 10,
          // 文字超出换行
          formatter: function (params: any) {
            let newParamsName = ''
            let paramsNameNumber = params.length
            let provideNumber = 2 //一行显示几个字
            let rowNumber = Math.ceil(paramsNameNumber / provideNumber)
            if (paramsNameNumber > provideNumber) {
              for (let p = 0; p < rowNumber; p++) {
                let tempStr = ''
                let start = p * provideNumber
                let end = start + provideNumber
                if (p === rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber)
                } else {
                  tempStr = params.substring(start, end) + '\n'
                }
                newParamsName += tempStr
              }
            } else {
              newParamsName = params
            }
            return newParamsName
          }
        },

时小记，终有成。