本文主要实现echarts双Y轴，并在此过程中解决：

  • 实现echarts双Y轴
  • echarts双Y轴左右刻度线一致
  • 图例分布显示
  • 坐标轴刻度标签数值取整
  • X/Y轴名称的分布
  • 坐标轴刻度标签数值以某一值为分界点改变颜色

等问题

下方有源码！注意查收！
在这里插入图片描述

1、 实现echarts双Y轴

  1. 就一个Y轴时yAxis为对象
yAxis: {
  type: 'value',
  name:'Y轴名称'
 },
  1. 两个Y轴时yAxis为数组
yAxis : [{
  type: 'value',
  name:'左侧Y轴名称',
  min: 0,
  max: 5,
  interval: 1,
  splitNumber: 6, //设置坐标轴的分割段数
},
{
  type: 'value',
  name:'右侧Y轴名称',
  min: 0,
  max: 125,
  interval: 25,
  splitNumber: 6, //设置坐标轴的分割段数
}],

2、 echarts双Y轴左右刻度线一致

参考文档：
https://blog.csdn.net/qq_40845885/article/details/82108525
https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7

2.1 获取数据最大值与最小值

// 获取最大值方法
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; // 输出最小值
}
// 调用方法获取数据最大值&最小值
......

2.2 确定两侧坐标轴的分割段数

splitNumber: 6,

2.3 通过坐标轴的分割段数 splitNumber 计算坐标轴分割间隔 interval

interval: (maxData1 - minData1) / 6,

2.4 设置yAxisIndex

yAxisIndex: 1,    //在单个图表实例中存在多个y轴的时候有用

3、图例分布显示

利用 legend 组件的top、bottom、left、right属性去配置

legend: [
  {
    top: "30%",
    right: "0%",
    data: [ {name: "数据1" } ]
  },
  {
    bottom: "20%",
    left: "0%",
    data: [ {name: "数据2"} ]
  }
],

4、坐标轴刻度标签数值取整

利用toFixed()方法，该方法可把 Number 四舍五入为指定小数位数的数字。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20。

axisLabel: {
   formatter: function(v) {
        return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
   }
 }

5、X/Y轴名称的分布

根据文档X/Y轴名称显示位置 nameLocation的值只能是：'start'、'middle' 或者'center'、'end'，没办法指定到某一位置，所以本人想到的方法就是利用nameLocation.padding。

nameTextStyle: {
  padding: [上, 右, 下, 左]
   // 或 padding: [上下，左右]
}

6、坐标轴刻度标签数值以某一值为分界点改变颜色

利用 axisLabel.color 属性

axisLabel: {
  color: function(value, index) {
      turn value >= 1000 ? "red" : "green";
  }
}

value >= 1000 ? "red" : "green";为三目运算符，意思是：如果数值大于等于 1000 那么数值颜色为红色，否则为绿色。如果将不想显示的数值改成同背景色一样的颜色，就可以实现隐藏（或空缺）的效果！！！

7、案例源码

<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>
# vue.js
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign