每天一个小知识点学习之-tab切换的柱状图的数据构造及调用接口获取数据

1.首先说明我的需求，我需要实现的是通过tab切换，柱状图也变成对应的内容，在切换的时候，柱状图的形式不会发生改变，只是横纵坐标对应的数据发生变化。来看一下实现代码和思路：
html部分：

<ul class="shizhou-tab-suc">
                                <li class="active">xxx</li>
                                <li>yyy</li>
                                <li>hhh</li>
                                <li>zzz</li>
                            </ul>
 <div class="map-tab-show other">
                        <!-- xxx -->
                        <div class="map-press">
                            <div class="map-shi-echart" id="map-shi-echart1"></div>
                        </div>
                        <!-- yyy -->
                        <div class="map-press" style="display: none;">
                            <div class="map-shi-echart" id="map-shi-echart2"></div>
                        </div>
                        <!-- hhh -->
                        <div class="map-press" style="display: none;">
                            <div class="map-shi-echart" id="map-shi-echart3"></div>
                        </div>
                        <!-- zzz -->
                        <div class="map-press" style="display: none;">
                            <div class="map-shi-echart" id="map-shi-echart4"></div>
                        </div>
                    </div>

js部分

function renderCharts(optiondata) {
  return {
    grid: {
      x: '8%',
      y: '12%',
      x2: '5%',
      y2: '18%'
    },
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        var color = params.color // 图例颜色
        var htmlStr = '<div>'
        htmlStr += params.name + '<br/>' // x轴的名称
        // 为了保证和原来的效果一样，这里自己实现了一个点的效果
        htmlStr += '<span ></span>'
        // 添加一个汉字，这里你可以格式你的数字或者自定义文本内容
        htmlStr += '用户活跃度' + '：' + params.value + '%'
        htmlStr += '</div>'
        return htmlStr
      }
    },
    // calculable: true,
    xAxis: [{
      type: 'category',
      data: optiondata.xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: '#3a70c3',
          width: 1
        }
      },
      axisLabel: {
        show: true,
        rotate: 45,
        interval: 0,
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#E6E6E6'
        }
      }
    }],
    yAxis: [{
      type: 'value',
      position: 'left',
      min: 0,
      max: 100,
      name: '%',
      nameTextStyle: {
        color: '#fff',
        fontSize: 12
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#7c839b',
          type: 'dashed'
        }
      }
    }],
    series: [{
      name: '',
      type: 'bar',
      barWidth: 18,
      data: optiondata.value,
      itemStyle: {
        normal: {
          barBorderRadius: [4, 4, 4, 4],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#5061bf'
          }, {
            offset: 1,
            color: '#908ed8'
          }]),
          label: {
            show: true,
            position: 'top',
            color: '#fff'
          }
        }
      }
    }]
  }
}
// xxx
var optiondata1 = {
  xAxisData: [],
  value: []
}

// yyy
var optiondata2 = {
  xAxisData: [],
  value: []
}
// hhh
var optiondata3 = {
   xAxisData: [],
  value: []
}
// zzz
var optiondata4 = {
  xAxisData: [],
  value: []
}

function rerender(index) {
  var t = index + 1
  echarts.init(document.getElementById('map-shi-echart' + t)).resize()
}
$(function() {
  var user1 = echarts.init(document.getElementById('map-shi-echart1'))
  user1.setOption(renderCharts(optiondata1))
  var user2 = echarts.init(document.getElementById('map-shi-echart2'))
  user2.setOption(renderCharts(optiondata2))
  var user3 = echarts.init(document.getElementById('map-shi-echart3'))
  user3.setOption(renderCharts(optiondata3))
  var user4 = echarts.init(document.getElementById('map-shi-echart4'))
  user4.setOption(renderCharts(optiondata4))
  $(window).resize(function() {
    user1.resize()
    user2.resize()
    user3.resize()
    user4.resize()
  })
})

调用接口：
后端传过来的数据格式为：data.data{arr1[],arr2[],arr3[],arr4[]}

initHttpServiceUtil.queryAjax({
            type: '请求方式',
            url: '接口地址',
            data: {},
            queryParams: {},
            successCallback: function (data) {
                if (data.code == 200) {
                    data.data.arr1.forEach((item) =>{
                        optiondata1.xAxisData.push(item.unitName)
                        optiondata1.value.push(item.unitValue)
                        // 要再次初始化一下，不然会不出来
                        var user1 = echarts.init(document.getElementById('map-shi-echart1'))
                        user1.setOption(renderCharts(optiondata1))
                    })
                    data.data.arr2.forEach((item) => {
                        optiondata2.xAxisData.push(item.unitName)
                        optiondata2.value.push(item.unitValue)
                        var user2 = echarts.init(document.getElementById('map-shi-echart2'))
                        user2.setOption(renderCharts(optiondata2))
                    })
                data.data.arr3.forEach((item) => {
                        optiondata3.xAxisData.push(item.unitName)
                        optiondata3.value.push(item.unitValue)
                        var user3 = echarts.init(document.getElementById('map-shi-echart3'))
                    user3.setOption(renderCharts(optiondata3))
                    })
                data.data.arr4.forEach((item) => {
                        optiondata4.xAxisData.push(item.unitName)
                        optiondata4.value.push(item.unitValue)
                        var user4 = echarts.init(document.getElementById('map-shi-echart4'))
                    user4.setOption(renderCharts(optiondata4))
                    })
                } else {
                    console.log('接口调用失败')
                }
            },
            async: false
        })