动态echarts和滚动条

<div style="width:100%;overflow:auto">
            <div id="echarts2" class="echartsView" style="width:4000px"></div>
        </div>

滚动条

<div id="echarts2" class="echartsView" style="width:4000px"></div>

import * as echarts from 'echarts';
  


 data() {
    return {
      data2:{
         title: [],
  plan_production: [],
  plan_production2: [],
  plan_production3: [],
  plan_production4: [],
  plan_production5: [],
      },
    echarts2:""
}，
created() {
    let now = new Date();
    let year = now.getFullYear(); //得到年份
    this.ruleForm.t0004Year = year.toString();

    this.$nextTick(()=>{
      this.echarts2 = echarts.init(document.getElementById('echarts2'))
    })
    this.search();
  },

 methods: {
    search() {
//发送请求获取数据并赋值
 shengFenTongJi({t0004Year:this.ruleForm.t0004Year}).then((response) => {
        loading.close();
        if (response.code == 200) {
          console.log(response);
          let unitData = response.data;
          this.ruleForm.dynamicItem = unitData;
          this.data2.title = []
          this.data2.plan_production = []
          this.data2.plan_production2= []
          this.data2.plan_production3 = []
          this.data2.plan_production4 = []
          this.data2.plan_production5 = []
          for (let i = 0; i < unitData.length; i++) {
            this.data2.title.push(unitData[i].M0017_NAME);
            this.data2.plan_production.push(unitData[i].yingjiaofeiyong);
            this.data2.plan_production2.push(unitData[i].yingjiaochangjiashu);
            this.data2.plan_production3.push(unitData[i].shijiaofeiyong);
            this.data2.plan_production4.push(unitData[i].shijiaochangjiashu);
            this.data2.plan_production5.push(unitData[i].shijiaoshoujiaolv);
          }
  let options = {
        color: '#6596f9',
        // 表格位置
        title: [
          {
            // text: '工业增加值',
            bottom: 12, // 控制表格Y轴方向
            right: 1 + 10 * 50,
            textStyle: {
              // color: '#fff',
              lineHeight: 0,
              fontSize: 12
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        grid: {
          bottom: 50,
          left: 60,
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: this.data2.title,

            axisLabel: {
              interval: 0,
              axisPointer: {
                type: 'shadow'
              },
              rich: {
                table: {
                  lineHeight: 18,
                  align: 'center'
                }
              }
            }
          }
        ],
        yAxis: [
          {
            show: true,
            type: 'value',
            scale: false,
            minInterval: 1,
            axisLine: {
              show: true, // 不显示纵轴线
              lineStyle: {
              }
            },
            axisTick: {
              show: false // 刻度线
            },
            splitLine: {
              show: true,
            },
          }
        ],

        series: [
          {
            barGap: '20%',
            color: "#f69647",
            name: '应交金额(元)',
            type: 'bar',
            barWidth: '20px',
            label: {
              show: true,
              position: 'top',
              color: '#f69647'
            },
            yAxisIndex: 0,
            data: this.data2.plan_production
          },
          {
            barGap: '20%',
            color: "#D8BFD8",
            name: '应交厂家数',
            type: 'bar',
            barWidth: '20px',
            label: {
              show: true,
              position: 'top',
              color: '##D8BFD8'
            },
            yAxisIndex: 0,
            data: this.data2.plan_production2
          },
          {
            barGap: '20%',
            color: "#4B0082",
            name: '实缴金额(元)',
            type: 'bar',
            barWidth: '20px',
            label: {
              show: true,
              position: 'top',
              color: '#4B0082'
            },
            yAxisIndex: 0,
            data: this.data2.plan_production3
          },
          {
            barGap: '20%',
            color: "#87CEEB",
            name: '实缴厂家数',
            type: 'bar',
            barWidth: '20px',
            label: {
              show: true,
              position: 'top',
              color: '#87CEEB'
            },
            yAxisIndex: 0,
            data: this.data2.plan_production4
          },
          {
            barGap: '20%',
            color: "#EEE8AA",
            name: '实缴收缴率',
            type: 'bar',
            barWidth: '20px',
            label: {
              show: true,
              position: 'top',
              color: '#EEE8AA'
            },
            yAxisIndex: 0,
            data: this.data2.plan_production5
          },
        ],
        };
          this.echarts2.setOption(options,true);
}