Echarts图表和timeline时间轴的使用

option单独放在一个js文件中

export const barOptionMobiSub = {
  baseOption: {
    timeline: {
      axisType: 'category',
      realtime: true,
      autoPlay: false,
      symbolSize: 8,
      orient: 'vertical',
      inverse: true,
      // z: 2,
      top: 30,
      right: 'auto',
      bottom: 10,
      left: '80%',
      data: [],
      label: {
        interval: 0,
        color: '#1781bf'
      },
      // symbol: 'roundRect',
      symbol: 'pin',
      lineStyle: {
        show: true,
        color: '#1781bf',
        width: 1,
        type: 'dotted'
      },
      controlStyle: {
        showPlayBtn: false,
        showPrevBtn: false,
        showNextBtn: false
      },
      itemStyle: {
        color: '#1781bf'
      },
      checkpointStyle: {
        symbol: 'none'
      },
      tooltip: {
        formatter: []
      },
      grid: {containLabel: true},
      series: [{type: 'bar'}]
    }
  },
  options: [{
    title: {
      text: '',
      left: '30%'
    },
    legend: {
      data: ['累积流量', '累积耗电'],
      orient: 'vertical',
      left: 0
    },
    toolbox: {
      feature: {
        dataView: {}
      }
    },
    tooltip: {},
    xAxis: {
      position: 'top',
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      data: [],
      splitLine: {
        show: false
      },
      axisLabel: {
        interval: 0,
        rotate: -45
      },
      offset: 0,
      gridIndex: 0,
      triggerEvent: true
    },
    grid: {
      left: '20%',
      right: '20%'
      // bottom: 80
    },
    series: [
      {
        name: '累积流量',
        type: 'bar',
        data: [],
        animationDelay: function (idx) {
          return idx * 10
        }
      },
      {
        name: '累积耗电',
        type: 'bar',
        data: [],
        animationDelay: function (idx) {
          return idx * 10 + 100
        }
      }
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5
    }
  }]
}

在vue文件中导入

import { barOptionMobiSub } from '@/echartOption'

<template>
  <div>
    <div id="myChart" ref="myChart" :class="{hidden: isDisplay}"></div>
    <el-scrollbar class="list">
      <div id="selectArea"
        :class="{hidden: !isDisplay, active: activeName == item.name}"
        v-for="item of districts"
        :key="item.id"
        @click="selectArea(item)"
      >
        <div class="head-title" v-text="item.name" :title="item.name"></div>
      </div>
    </el-scrollbar>
    <div id="myChart2" ref="myChart2" :class="{hidden: !isDisplay}"></div>
    <div
      id="back"
      :class="{hidden: !isDisplay}"
      @click="isDisplay = !isDisplay"
      style="cursor:pointer"
    >返回上一级</div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getGroupedReport } from '@/api/report'
// import { getProjectDistricts } from '@/api/project'
import { barOption, barOptionMobi, barOptionSub, barOptionMobiSub } from '@/echartOption'
import { isMobileDevice } from '@/utils/common'
export default {
  data() {
    return {
      listQuery: {
        keyword: undefined,
        district: undefined
      },
      myChart: null,
      myChart2: null,
      isDisplay: false,
      transId: '',
      districtVariables: {},
      activeName: ''
    }
  },
  computed: {
    ...mapGetters(['districts']),
    // 子图表渲染时获取时间轴上乡镇id
    districtIds() {
      return this.districts.map(item => item.id)
    }
  },
  async mounted() {
    // 按各乡镇总体情况统计
    const resp = await getGroupedReport({ groupby: 'district_variables' })
    this.districtVariables = resp.results
    this.draw()
  },

  methods: {
    draw() {
      // 实例化echarts对象
      var _this = this
      _this.myChart = echarts.init(this.$refs.myChart)
      _this.myChart2 = echarts.init(this.$refs.myChart2)

      var myChart = _this.myChart
      // var myChart2 = _this.myChart2
      if (isMobileDevice()) {
        myChart.setOption(barOptionMobi)
      } else {
        myChart.setOption(barOption)
      }
      // 按乡镇统计
      if (isMobileDevice()) {
        myChart.setOption({
          yAxis: {
            data: _this.districtVariables.district
          },
          series: [
            { data: _this.districtVariables.variable1 },
            { data: [2300, 2490] }
          ]
        })
        // 父图表下y轴上的点击事件
        myChart.on('click', function(params) {
          if (params.componentType === 'yAxis') {
            for (var i in _this.districts) {
              if (_this.districts[i].name === params.value) {
                _this.isDisplay = !_this.isDisplay
                _this.transId = _this.districts[i].id
                // 根据乡镇id展示该乡镇下所有项目的图表，并同时渲染时间轴
                _this.handleChartEvent(_this.transId, _this.districts[i].name, 'isMobi')
              }
            }
          }
        })
        // 手机上时间轴上乡镇列表的点击事件
        // myChart2.on('timelinechanged', function(timeLineIndex) {
        //   // 获取乡镇id
        //   const transId = _this.districtIds[timeLineIndex.currentIndex]
        //   // 点击时间轴上乡镇列表切换项目展示
        //   this.handleChartEvent(transId, _this.districts[transId - 1].name, 'isMobi')
        // })
      } else {
        myChart.setOption({
          xAxis: {
            data: _this.districtVariables.district
          },
          series: [
            { data: _this.districtVariables.variable1 },
            { data: [2300, 2490] }
          ]
        })
        // 父图表下x轴上的点击事件
        myChart.on('click', function(params) {
          if (params.componentType === 'xAxis') {
            for (var i in _this.districts) {
              if (_this.districts[i].name === params.value) {
                _this.isDisplay = !_this.isDisplay
                _this.transId = _this.districts[i].id
                // 根据乡镇id展示该乡镇下所有项目的图表，并同时渲染时间轴
                _this.handleChartEvent(_this.transId, _this.districts[i].name)
              }
            }
          }
        })

        // 时间轴上乡镇列表的点击事件
        // myChart2.on('timelinechanged', function(timeLineIndex) {
        //   // 获取乡镇id
        //   const transId = _this.districtIds[timeLineIndex.currentIndex]
        //   // 点击时间轴上乡镇列表切换项目展示
        //   this.handleChartEvent(transId, _this.districts[transId - 1].name)
        // }
      }
    },

    selectArea(param) {
      var _this = this
      if (isMobileDevice()) {
        this.handleChartEvent(param.id, this.districts[param.id - 1].name, 'isMobi')
      } else {
        this.handleChartEvent(param.id, this.districts[param.id - 1].name)
        _this.activeName = param.name
      }
    },
    handleChartEvent(transId, transName, isMobi) {
      var _this = this
      var myChart2 = _this.myChart2
      getGroupedReport({district_id: transId, groupby: 'project_variables'}).then(res => {
        // barOptionSub.baseOption.timeline.currentIndex = transId - 1
        if (isMobi) {
          // barOptionMobiSub.baseOption.timeline.data = _this.districts.map(item => item.name)
          // barOptionMobiSub.baseOption.timeline.tooltip.formatter = _this.districts.map(item => item.name)
          myChart2.setOption(barOptionMobiSub, true)
          myChart2.resize()
          myChart2.setOption({
            options: [
              {
                title: {
                  text: transName + '下属站点统计'
                },
                yAxis: {
                  data: res.results.project
                },
                series: [{data: res.results.variable1}]
              }
            ]
          })
        } else {
          // barOptionSub.baseOption.timeline.data = _this.districts.map(item => item.name)
          // barOptionSub.baseOption.timeline.tooltip.formatter = _this.districts.map(item => item.name)
          myChart2.setOption(barOptionSub, true)
          myChart2.resize()
          myChart2.setOption({
            // options: [
            // {
            title: {
              text: transName + '下属站点统计'
            },
            xAxis: {
              data: res.results.project
            },
            series: [{data: res.results.variable1}]
            // }
            // ]
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
#myChart {
  position: relative;
  width: 98%;
  height: calc(100vh - 106px);
  //margin: 5px auto;
  margin: 10px;
  border: 1px solid #ccc;
}
.list {
  position: relative;
  float: left;
  width: 70px;
  left: 5px;
  height: calc(100vh - 136px);
  border: 1px solid #ccc;
  overflow: hidden;
  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
  #selectArea {
    float: left;
    cursor: pointer;
    .head-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: #1781bf;
      font-weight: 400;
      padding-left: 10px;
      height: 30px;
      line-height: 30px;
    }
  }
  /*#selectArea.active {*/
  /*  background-color: #cfddf3;*/
  /*  width: 78px;*/
  /*}*/
}

#myChart2 {
  position: relative;
  margin-top: 10px;
  width: calc(100vw - 100px);
  left: 80px;
  right: 5px;
  // height: 450px;
  height: calc(100vh - 136px);
  // margin: 5px auto;
  border: 1px solid #ccc;
}
#back {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 15px;
  color: #606266;
  height: 30px;
  width: fit-content;
}
.hidden {
  display: none !important;
}
.active {
  background-color: #cfddf3;
  width: 78px;
}
</style>