echarts柱状图加单位，底部文本溢出展示

lmy_loveF

已于 2024-01-10 10:13:47 修改

阅读量1k

点赞数 9

文章标签： echarts 信息可视化前端

于 2024-01-08 17:29:26 首次发布

本文链接：https://blog.csdn.net/lmy_lovef/article/details/135462515

版权

文章讲述了在使用ECharts库创建图表时，遇到单位不显示的问题，通过调整`top`值和配置`yAxis`、`grid`等属性，确保单位正确显示的过程。

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

刚开始设置了半天都不展示单位，后来发现是被挡住了，需要调高top值： top: "50px",//增加这个值

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echartD"));

    rankOption = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },

      grid: {
        left: "0%",
        top: "50px",//增加这个值
        right: "0%",
        bottom: "2%",
        containLabel: true
      },

加单位： name: "单位：总里程(KM)",

   yAxis: [
        {
          name: "单位 ： 总里程(KM)",
          nameTextStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 14,
            padding: [0, 0, 10, -30] //name文字位置 对应 上右下左
          },

底部文本溢出，调整角度展示： rotate: 40,

          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid"
            }
          },

          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          }