首页 前端知识 echarts双Y轴 右侧不显示数据

echarts双Y轴 右侧不显示数据

2024-06-10 11:06:39 前端知识 前端哥 423 499 我要收藏

右侧不显示数据的原因是没有设置最大值和最小值

// 获取最大值方法
function calMax(arr) {
  var max = Math.max.apply(null, arr); // 获取最大值方法
  var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
  var maxval = maxint * 5 + 5; // 最终设置的最大值
  return maxval; // 输出最大值
}
// 获取最小值方法
function calMin(arr) {
  var min = Math.min.apply(null, arr); // 获取最小值方法
  var minint = Math.floor(min / 1); // 向下以1的倍数取整
  var minval = minint * 1 - 5; // 最终设置的最小值
  return minval; // 输出最小值
}
// 调用方法获取数据最大值&最小值
......

echarts双Y轴 源码

<template>
  <div class="home">
    <div id="wire"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      data1: [820, 932, 901, 934, 1290, 1330, 1320, 1330, 1340],
      data2: [134, 133, 132, 133, 129, 93, 90, 93, 82]
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("wire"));
    this.initData();
  },
  methods: {
    initData() {
      // 获取最大值方法
      function calMax(arr) {
        var max = Math.max.apply(null, arr); // 获取最大值方法
        var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
        var maxval = maxint * 5 + 5; // 最终设置的最大值
        return maxval; // 输出最大值
      }
      // 获取最小值方法
      function calMin(arr) {
        var min = Math.min.apply(null, arr); // 获取最小值方法
        var minint = Math.floor(min / 1); // 向下以1的倍数取整
        var minval = minint * 1 - 5; // 最终设置的最小值
        return minval; // 输出最小值
      }
      // 调用方法,获取数据的最大值&最小值
      var maxData1 = calMax(this.data1);
      var maxData2 = calMax(this.data2);
      var minData1 = calMin(this.data1);
      var minData2 = calMin(this.data2);

      const option = {
        // 图例组件
        legend: [
          {
            top: "30%",
            right: "0%",
            textStyle: {
              fontSize: 12, //字体大小
              color: "#" //字体颜色(图例与图例文字配色保持一致)
            },
            data: [
              {
                name: "数据1"
              }
            ]
          },
          {
            bottom: "20%",
            left: "0%",
            textStyle: {
              fontSize: 12, //字体大小
              color: "#" //字体颜色
            },
            data: [
              {
                name: "数据2"
              }
            ]
          }
        ],
        // 直角坐标系内绘图网格
        grid: {
          show: true,
          x: 120,
          y: 50,
          x2: 120,
          y2: 50
        },
        xAxis: {
          name: "X轴数据",
          type: "category",
          data: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],
          nameTextStyle: {
            padding: [0, 0, 50, 50]
          }
        },
        yAxis: [
          {
            type: "value",
            name: "左侧",
            nameTextStyle: {
              padding: [0, 0, -55, -150]
            },
            min: minData1,
            max: maxData1,
            splitNumber: 6, //设置坐标轴的分割段数
            interval: (maxData1 - minData1) / 6, // 标轴分割间隔
            axisLabel: {
              formatter: function(v) {
                return v.toFixed(1); //0表示小数为0位,1表示1位小数,2表示2位小数
              },
              color: function(value, index) {
                return value >= 1000 ? "red" : "green";
              }
            }
          },
          {
            type: "value",
            name: "右侧",
            nameTextStyle: {
              padding: [0, 50, -50, 200]
            },
            min: minData2,
            max: maxData2,
            splitNumber: 6,
            interval: (maxData2 - minData2) / 6,
            axisLabel: {
              formatter: function(v) {
                return v.toFixed(2); //0表示小数为0位,1表示1位小数,2表示2位小数
              }
            }
          }
        ],
        series: [
          {
            name: "数据1",
            type: "line",
            color: ["#eb9f0d"],
            symbol: "none",
            smooth: true,
            data: this.data1
          },
          {
            name: "数据2",
            type: "line",
            color: ["#969ac7"],
            symbol: "none",
            smooth: true,
            yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
            data: this.data2
          }
        ]
      };
      this.myChart.setOption(option);
      // 自适应布局
      let _this = this;
      window.addEventListener("resize", function(event) {
        _this.myChart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  #wire {
    width: 800px;
    height: 500px;
    border: 1px solid;
  }
}
</style>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11730.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!