echart折线图双坐标轴刻度线对齐，图例位置调整

 先看看效果展示

1.在HTML中定义chart 

2.js中定义chart配置及数据处理

export default {
  data () {
    return {
       // echart配置
      chartTop: {    
        // 设置图例的位置
        legend: [
          {
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {color: '#7F8695'},
            left: '5%', // 调整位置
            top: -5,
            data: [{name: '销售金额(元)', icon: 'circle'}] // rect为矩形
          },
          {
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {color: '#7F8695'},
            right: '5%', // 调整位置
            top: -5,
            data: [{name: '商品销量(件)', icon: 'circle'},
            {name: '订单数', icon: 'circle'},
            {name: '笔单价', icon: 'circle'}] // rect为矩形
          }
        ],
        grid: {
          top: '10%',
          left: '60px',
          right: '60px',
          height: '80%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: []
        },
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            min: 0,
            splitNumber: 4,
            axisLine: {
              show: false
            }
          },
          {
            type: 'value',
            axisTick: {
              show: false
            },
            min: 0,
            splitNumber: 4,
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '销售金额(元)',
            type: 'line',
            smooth: true,
            symbolSize: 2,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#F98782',
                lineStyle: {
                  color: '#F98782',
                  width: 3
                }
              },
              emphasis: {
                color: '#FFF',
                borderColor: '#F98782',
                borderWidth: 3
              }
            },
            data: []
          },
          {
            name: '商品销量(件)',
            type: 'line',
            smooth: true,
            symbolSize: 2,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#12DB94',
                lineStyle: {
                  color: '#12DB94',
                  width: 3
                }
              },
              emphasis: {
                color: '#FFF',
                borderColor: '#12DB94',
                borderWidth: 3
              }
            },
            data: []
          },
          {
            name: '订单数',
            type: 'line',
            smooth: true,
            symbolSize: 2,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#3994E4',
                lineStyle: {
                  color: '#3994E4',
                  width: 3
                }
              },
              emphasis: {
                color: '#FFF',
                borderColor: '#3994E4',
                borderWidth: 3
              }
            },
            data: []
          },
          {
            name: '笔单价',
            type: 'line',
            smooth: true,
            symbolSize: 2,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#8E6EEE',
                lineStyle: {
                  color: '#8E6EEE',
                  width: 3
                }
              },
              emphasis: {
                color: '#FFF',
                borderColor: '#8E6EEE',
                borderWidth: 3
              }
            },
            data: []
          }
        ]
      },
    }
  },
  mounted () {
    this.$bus.$on('on-menu-shrink', this.menuShrinkHandler)
    this.topChart = echarts.init(document.getElementById('top-chart'))
    this.topChart.setOption(this.chartTop)
    let _this = this
    window.onresize = () => {
      if (_this.topChart) {
        _this.topChart.resize()
      }
    }
  },
  created () {
      this.dataAssetsSalesList()
  },
  filters: {
    numFilters (value) {
      if ((value / 10000) >= 1) {
        return (value / 10000) + 'w'
      } else if ((value / 1000) >= 1) {
        return (value / 1000) + 'k'
      } else {
        return value
      }
    }
  },
  methods: {
    dataAssetsSalesList () {
      let data = {
        startTime: utils.sevendayDate(this.startTime),
        endTime: utils.dayDate(this.endTime),
        shopId: this.shop.id + ''
      }
      if (this.startTime && this.endTime) {
        this.$api.dataAssetsSalesList(data).then(res => {
          let salesList = res.salesList
          let line1 = [], line2 = [], line3 = [], line4 = [], xData = []
          salesList.map(item => {
            // x轴数据处理
            xData.push(item.days)
            // 折现图数据处理
            line1.push(Number(item.totalPrice.toFixed(2)))
            line2.push(Number(item.commodityNum.toFixed(2)))
            line3.push(Number(item.paymentNum.toFixed(2)))
            line4.push(Number(item.unitPrice.toFixed(2)))
          })
          this.chartTop.xAxis.data = xData
          this.chartTop.series[0].data = line1
          this.chartTop.series[1].data = line2
          this.chartTop.series[1].yAxisIndex = 1
          this.chartTop.series[2].yAxisIndex = 1
          this.chartTop.series[3].yAxisIndex = 1
          this.chartTop.series[2].data = line3
          this.chartTop.series[3].data = line4
          // 设置Y轴的属性，让双Y轴刻度对齐
          this.chartTop.yAxis[0].max = this.getMaxNumber(Math.ceil(Math.max.apply(null, this.chartTop.series[0].data) / 4) * 4)
          this.chartTop.yAxis[0].interval = Math.ceil(this.getMaxNumber(Math.max.apply(null, this.chartTop.series[0].data)) / 4)
          this.chartTop.yAxis[1].max = this.getMaxNumber(Math.ceil(Math.max.apply(null, [...this.chartTop.series[1].data, ...this.chartTop.series[2].data, ...this.chartTop.series[3].data]) / 4) * 4)
          this.chartTop.yAxis[1].interval = Math.ceil(this.getMaxNumber(Math.max.apply(null, [...this.chartTop.series[1].data, ...this.chartTop.series[2].data, ...this.chartTop.series[3].data])) / 4)
          this.topChart.setOption(this.chartTop)
        })
      }
    },
    // 处理Y轴的最大值，保证两边Y轴分割线对齐
    getMaxNumber (number) {
      let num = number
      let a = 0
      while (num >= 10) { num = parseInt(num / 10); a++ } return (num + 1) * Math.pow(10, a)
    },
    
}