vue中echarts动态刷新数据（x轴y轴和title）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34672907/article/details/90701809

最近需求做一个数据表，根据筛选条件不一样，渲染不同的内容。，主要如下图

如图，一开始什么都没有的时候默认显示title，当进行筛选的时候横轴和纵轴都显示相应的数据。问题就是，我按照其他百度问题说的做，直接赋值语句上this.chart.setOption(newVal);

然而并没有什么屁用。。。。。

因为需求是有数据时改变x轴和y轴数据，隐藏标题的渲染，百度到几乎都是差不多一样的解法之后，，，，我放弃了百度，自己上，因为之前有做echarts的经验，所以摸索起来花了一个多小时把它整出来了，最关键代码先贴出来，心急的小伙伴看完就差不多可以自己撸起袖子干了。

   axiasy: function(newVal, oldVal) {
      console.log(newVal, oldVal)
      this.chart.clear()  // 清空echarts之前渲染的数据
      this.lineOption.series[0].data = this.axiasy  //赋值y轴
      this.lineOption.xAxis[0].data = this.axiasx   //赋值x轴
      this.lineOption.title.show = this.emptyshow    //标题的展示和隐藏
      this.chart.setOption(this.lineOption, true)    //赋值好之后将数据set进去完事
    }

上面就是我研究出来的，哈哈，满足需求就很爽！

人恨话不多，上代码（由于某种原因，echarts的线图是直接抽出来的插件，so我把它展示一下，觉得难以理解可以看别人的渲染，只是修改的时候渲染的时候看这个就行）

<template>
  <div :id="id" :class="className" :axiasx="axiasx" :axiasy="axiasy" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    axiasx: {
      type: Array,
      default: () => []
    },
    axiasy: {
      type: Array,
      default: () => []
    },
    emptyshow: {//展示标题与否
      type: Boolean,
      default: true
    },
    titles: {//是否输入不同的标题提示
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
      lineOption: {
        backgroundColor: '#394056',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: '时间：{b} \n 使用率：{c}%'
        },
        title: {
          text: '暂无数据，选择医院及日期后将自动渲染',
          show: this.emptyshow,
          textStyle: {
            color: '#fff',
            fontSize: 16
          },
          textAlign: 'middle',
          top: '50%',
          left: '45%'
        },
        grid: {
          top: 100,
          left: '5%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          name: '时间',
          nameTextStyle: {
            color: 'rgb(0,253,255,0.6)',
            fontSize: 16
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(23,255,243,0.3)'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          data: this.axiasx
        }],
        yAxis: [{
          type: 'value',
          name: '使用率(%)',
          nameTextStyle: {
            color: 'rgb(0,253,255,0.6)',
            fontSize: 16
          },
          max: 100,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(23,255,243,0.3)'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgb(23,255,243,0.3)'
            }
          }
        }],
        series: [{
          name: '使用率',
          type: 'line',
          // smooth: true,//是否需要曲线平滑
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            normal: {
              width: 1
            }
          },

          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(23, 255, 243, 0.5)'
              }, {
                offset: 0.8,
                color: 'rgba(23, 255, 243, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(23, 255, 243)',
              borderWidth: 12,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                },
                formatter: '{c}%'
              }
            }
          },
          data: this.axiasy
        }]
      }
    }
  },
  watch: {
    axiasy: function(newVal, oldVal) {
      console.log(newVal, oldVal)
      this.chart.clear()
      this.lineOption.series[0].data = this.axiasy
      this.lineOption.xAxis[0].data = this.axiasx
      this.lineOption.title.show = this.emptyshow
      this.chart.setOption(this.lineOption, true)
    },
    titles: function(newVal, oldVal) {
      console.log(newVal, oldVal)
      this.chart.clear()
      this.lineOption.title.text = this.titles

      this.chart.setOption(this.lineOption, true)
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.lineOption)
    }
  }
}
</script>

由于引入了mixins/resize，所以也把它贴出来

export default {
  data() {
    return {
      $_sidebarElm: null
    }
  },
  mounted() {
    this.__resizeHandler = this.debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)

    this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.__resizeHandler)

    this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.__resizeHandler()
      }
    },
    debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
  }
}

主组件就根据条件传参进来即可

<div class="chart-container">
        <chart height="92%" width="100%" :axiasx="axiasx" :axiasy="axiasy" :emptyshow="emptyShow" :titles="noneTitle" />
      </div>

<script>
import Chart from '@/components/Charts/LineMarker'
import { Message } from 'element-ui'
import { fetchEcharts, fetchClassTable, fetchhospitalList } from '@/api/api-request'
export default {
  name: 'TabPane',
  components: { Pagination, Chart },
  props: {
    type: {
      type: String,
      default: 'et'
    }
  },
  data() {
    return {
      selectValue: null, // 选择的医院
      options: [],
      axiasx: [],
      axiasy: [], // 画图的y轴
      emptyShow: true, // 定义是否已经可以渲染
      sortValue: '', // 排序条件选择
      noneTitle: '', // 选择查看的图表没有数据
      dateValue: [new Date(new Date().getTime() - 3600 * 1000 * 24), new Date()],
      listLoading: false, // 加载数据回来后变为false
      listQuery: {
        page: 1,
        limit: 20,
        total: 12
      },
      tableData: []
    }
  },
  created() {
    this.getHospital()
  },
  methods: {
    getHospital() {
        fetchhospitalList().then(res => {
          console.log(res)
          if (res.errcode === 0) {
            this.options = res.hospital_list
            const list = getHosMessage(res)
            this.$store.commit('hospital/SET_HOSPITAL_LIST', list[0])
            this.$store.commit('hospital/SET_DEPARTMENT_LIST', list[1])
            this.$store.commit('hospital/SET_ORGINHOSPITAL_LIST', res.hospital_list)
          }
          this.loading = false
        }) 
    },
    getList() {
       // 只是折线图
        const params = { 'page': this.listQuery.page, 'hospital_id': this.selectValue, 'start_date': this.dateValue[0], 'end_date': this.dateValue[1] }
        fetchEcharts(params).then(res => {
          console.log(res)
          if (res.errcode === 0) {
            const arrx = []
            const arry = []
            const item = res.use_rate_list
            if (item.length > 0) {
              for (let i = 0; i < item.length; i++) {
                arrx.push(item[i].day)
                arry.push(parseFloat(item[i].use_rate) * 100)
              }
              this.axiasx = arrx
              this.axiasy = arry
              this.emptyShow = false
            } else {
              console.log('我是没有数据的显示')
              this.noneTitle = '抱歉！您选择的医院在本时间段并没有数据~'
              this.emptyShow = true
            }
          }
        })
        console.log(this.dateValue)// 筛选的日期
    },
    handleFilter() {
      if (!this.selectValue) {
        Message({
          message: '请选择需要查看的医院！',
          type: 'error',
          duration: 2 * 1000
        })
        return
      } else if (!this.dateValue) {
        Message({
          message: '请选择需要查看的时间段！',
          type: 'error',
          duration: 2 * 1000
        })
        return
      }
      this.getList()
    }
  }
}
</script>

最终经过筛选条件出来后，显示如下：

有数据时显示

没有数据时显示

最后，不要问我为什么不直接调用init函数，因为重新渲染dom节点是需要付出代价的！！！！