最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

全球即时：echarts设置单位的偏移

来源：博客园


(资料图)

echarts 可以设置的echarts单位的偏移位置吗？

之前是知道echarts的X和Y是可以设置单位的。但是设置单位的位置一直不好调整。现在有时间，我们会回答一下上面标题的问题？echarts 可以设置X和Y轴单位的偏移位置吗？答案是可以的。通过 nameTextStyle 这个属性来处理

echarts柱状图Y轴上设置单位

yAxis: [{  type: "value",  name: "(个)", //单位  nameLocation: "end", // (单位个也就是在在Y轴的最顶部)  //单位的样式设置  nameTextStyle: {      color: "green", //颜色      padding: [15, 20, 15, 0], //间距分别是 上 右 下 左  },}]当我们设置后，就会出现下面图的样式

为什么上面这两张图单位间距不一样

细心的小伙伴发现了。这两张图的间距是不一样的。第一张的距离左边间距小。第二张图距离左侧间距较大。那是什么原因导致两张图的间距不一样的呢？有的小伙伴，可能会说：是你设置的间距不一样？我可以很负责的说：不是的。设置的是同样的间距。有些小伙伴可能会说：有没有可能是Y轴的数据不一样导致的？恭喜这位小伙伴，猜对了。就是Y轴的数据大小不同而导致间距不一样的。

那有没有办法让单位距离左侧的间距是一样的呢

我在看echarts官方文档的时候（https://echarts.apache.org/zh/option.html#xAxis.nameTextStyle.align）发现了 align 属性。但是使用这个属性后 align:"left" 仍然是不可以办到的。也就是说：单位距离左侧的间距是一样？ 这个是办不到的。

Y轴数据较小的情况

        Document  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>var mCharts = echarts.init(document.querySelector("div"))var option = {  tooltip: {    trigger: "axis",    axisPointer: {      type: "shadow"    }  },  grid: {    left: "3%",    right: "4%",    bottom: "3%",    containLabel: true  },    xAxis: [{      type: "category",      data: ["1111", "2232", "2332", "2123"],      axisTick: {          alignWithLabel: true      },    }],    yAxis: [{      type: "value",      // 新增单位      name: "(个)",      nameLocation: "end", // 在头部(也就是在在X轴的最底部)      //间距      nameTextStyle: {          // align: "center",          color: "green",          // verticalAlign: "top",          // 这个间距  分别是 上下右左          padding: [15, 20, 15, 0],      },    }],    series: [{        name: "直接访问",        type: "bar",        barWidth: "60%",        data: [11, 41, 51, 16, 71]    }]};mCharts.setOption(option)</script>

Y轴数据较大的情况

        Document  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>  
  <script>    var mCharts = echarts.init(document.querySelector("div"))    var option = {      tooltip: {        trigger: "axis",        axisPointer: {          type: "shadow"        }      },      grid: {        left: "3%",        right: "4%",        bottom: "3%",        containLabel: true      },      xAxis: [{        type: "category",        data: ["1111", "2232", "2332", "2123"],        axisTick: {          alignWithLabel: true        },      }],      yAxis: [{        type: "value",        // 新增单位        name: "(个)",        nameLocation: "end", // 在头部(也就是在在X轴的最底部)        //间距        nameTextStyle: {          // align: "center",          color: "green",          // verticalAlign: "top",          padding: [15, 20, 15, 0],        },      }],      series: [{        name: "直接访问",        type: "bar",        barWidth: "60%",        data: [11123, 41123, 51123, 16122, 712341]      }]    };    mCharts.setOption(option)  </script>

关键词： 单位距离 没有办法