vue之echarts的vif渲染

1. 通过以下命令安装 echarts

npm install echarts –save

2. 在 main.js 文件里全局引入 echarts

import echarts from ‘echarts’
Vue.prototype.$echarts = echarts

3. 单页面引用 echarts

import echarts from ‘echarts’

// html 代码
<div v-if="noData">123</div>
<div v-else class="details-ECharts" style="width:100%;overflow-x: scroll;">
  <div id="myECharts" style="width:100%;height:220px;background-color:#ffffff;"></div>
</div>

<script>
// js 代码
import echarts from 'echarts'
export default {
  name: 'aaa',
  data () {
    return {xData: [],
      tionData: [],
      noData: false
    }
  },
  methods: {statistics () {
      var myChart
      myChart = echarts.init(document.getElementById('myECharts'))
      myChart.setOption({
        title: {
          text: '对比图',
          x: 'center',
          y: 'bottom',
          textStyle: {
            color: '#666666',
            fontWeight: 'normal',
            fontSize: 13
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLine: {show: false},
            axisTick: {show: false}
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {show: false},
            show: false
          }
        ],
        series: [
          {
            name: '222',
            type: 'bar',
            barWidth: '10px',
            data: this.tionData,
            smooth: true,
            itemStyle: {
              normal: {barBorderRadius: [5, 5, 0, 0],
                label: {
                  show: true,
                  position: 'top',
                  rotate: '30',
                  color: '#999999',
                  formatter: '￥{c}'
                },
                color:  (params) => {return this.tionData.length-1 === params.dataIndex ?  '#E8B003' : '#E1E1E1';}
              }
            }
          }
        ]
      })
    },
    // 请求后台接口
    aaa(data) {if(data){
        this.noData = false
        this.$nextTick(()=> {this.statistics()
        })
      } else {
        this.noData = true
        this.statistics()}
    }
  },
  mounted () {this.statistics()
  }
}
</script>

4. 总结

---

1. 在 methods 钩子函数里自定义一个 statistics() 去渲染 echarts
2. 在 mounted 钩子函数里执行 this.statistics()
3. 请求后台接口时候如果 echarts 图表所在的 dom 存在（this.noData = false）放在 this.$nextTick(()=> {this.statistics()}) 里执行，否则（this.noData = true）直接 this.statistics()

---

Vue.nextTick() 作用：在下次 dom 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的 dom
如果不使用 this.$nextTick() 再切换 tab 的时候 dom 还没加载不能获取该节点会报错