vue项目 echarts多轴配置展示，多直角系图，一个滚动条同时控制滚动；

本文介绍了如何在Vue项目中实现Echarts的多轴配置，通过一个滚动条同步控制两个柱状图的滚动。同时，针对大量数据的场景，提出了默认展示最新6条数据的解决方案。文章还探讨了在Vue组件中封装Echarts图表以优化性能的技巧，强调了避免将echarts实例绑定到Vue实例上的重要性，以防止页面长时间打开导致的卡顿问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：
1.同一个滚动条同时控制上下两个柱状图；
2.同一个vue页面多次渲染echarts图表的优化，组件封装；
3.数据量大的话默认显示最新的6条数据；
在这里插入图片描述
1.父组件(dashboard.vue)：

<template>
  <div class="dashboard">
     <sbar-line></sbar-line>
  </div>
</template>
<script>
import SbarLine from "./echart"
export default {
  data(){
    return{
    }
  },
  components:{
    SbarLine
  },
  methods:{},
  mounted() {}
}
</script>
<style>
.dashboard{
  width: 70%;
  margin: 20px auto;
  height: 500px;
}
</style>

2.子组件(echart.vue)：

<template>
  <div :ref="elId" class="box"></div>
</template>
<script>
  //引入uuid文件
  import uuidv1 from 'uuid/v1'
  export default {
    name: "echart",
    data () {
      return {
        elId: 'echartid',
      }
    },
    created(){
      this.elId = uuidv1() //获取随机id
    },
    computed: {
      option() {
          let _this = this;
          let obj ={
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            dataZoom : [ {
          //  start:0,//默认为0
          //  end: 100-1500/31,//默认为100
              type: 'slider',
              show: true,
              // start : 100,
              start : (100-(5/20)*100),//默认展示6条；20指的是x轴类目数组的长度；
              end : 100,
              xAxisIndex: [0,1],
              handleSize: 0,//滑动条的 左右2个滑动条的大小
          //  height: 10,//组件高度
          //  left: '10%', //左边的距离
          //  right: '10%',//右边的距离
              height:15,
              bottom: '12.5%',//右边的距离
              borderColor: "#fff",
              fillerColor: '#269c