vue中使用Echarts实践

最近有项目需求实现一个简单的柱形统计图，涉及到的数据不是很复杂，但是交互效果需要美观！！！首先就想到了Echarts，毕竟使用简单，功能强大，很香！

第一步：安装最新Echarts,安装教程见官方教程。

npm install --save-dev echarts --registry=https://registry.npm.taobao.org

第二步：按需引入（建议使用，Echarts包很大）

// 注意一定使用require!!!
let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/component/title');

第三步：整一个div作为挂载Echarts的容器

<template>
  <div class="chart-container" ref="chart-container" style="width: 100%;height: 100%"></div>
</template>

第四步：初始化Echarts方法 配置教程

echartInit(){
  this.chartDom = echarts.init(this.$refs['chart-container']) //获取DOM
  /** 此段代码对自适应页面是必须的，监听resize事件实现Echars表格自适应，注意destoryed取消事件监听
  window.addEventListener('resize',()=>{
  	this.chartDom.resize()
  })
  */
  this.chartDom.setOption({ //配置自行阅读官网配置教程
    color: ['#00A0E9'],
    title: {
      subtext: 'xxx',
      subtextStyle:{
        color: '#333333'
      },
      right: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: this.xAxis, // x坐标轴值
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      max: 60
    },
    series: [{
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      data: this.xData //y轴坐标值
    }]
  })
}

第五步：mounted调用初始化方法，destoryed取消监听事件

mounted() {
 this.echartInit()
},
destroyed() {
  window.removeEventListener('resize',()=>{})
},

第六步：抽离公共属性，获取基础数据

props: {
 xAxis: { //父组件传过来的值
    type: Array,
    default: () => []
  },
  xData: { //父组件传过来的值
    type: Array,
    default: () => []
  }
},

第七步：监听xData动态更新表格（根据实际业务需要选择是否需要这部分功能）

watch:{
  xData:{
    immediate: true,
    handler(newValue) { //深度监听数据变化，动态赋值Echarts
      if(!this.chartDom) return 
      let option = this.chartDom.getOption() //精髓
      option.series[0].data = newValue //精髓
      this.chartDom.setOption(option) //精髓
    },
    deep: true
  }
}

到了这一步基本上封装就完毕了。Echarts的功能十分强大，有兴趣的朋友可以自行体验。文末附完整代码

<template>
  <div class="chart-container" ref="chart-container" style="width: 100%;height: 100%"></div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/component/title');
  export default {
    name: 'myCharts',
    props: {
      xAxis: {
        type: Array,
        default: () => []
      },
      xData: {
        type: Array,
        default: () => []
      }
    },
    data(){
      return{
        chartDom: null
      }
    },
    watch:{
      xData:{
        immediate: true,
        handler(newValue) { //深度监听数据变化，动态赋值Echarts
          if(!this.chartDom) return 
          let option = this.chartDom.getOption()
          option.series[0].data = newValue
          this.chartDom.setOption(option)
        },
        deep: true
      }
    },
    mounted() {
      this.echartInit()
    },
    destroyed() {
      window.removeEventListener('resize',()=>{})
    },
    methods: {
      // 表格初始化
      echartInit(){
        this.chartDom = echarts.init(this.$refs['chart-container'])
        window.addEventListener('resize',()=>{
          this.chartDom.resize()
        })
        this.chartDom.setOption({
          color: ['#00A0E9'],
          title: {
            subtext: 'xxx',
            subtextStyle:{
              color: '#333333'
            },
            right: 10
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.xAxis,
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            max: 60
          },
          series: [{
            type: 'bar',
            label: {
              show: true,
              position: 'inside'
            },
            data: this.xData
          }]
        })
      }
    },
  }
</script>

<style lang="less" scoped>
 
</style>

---

补充常见操作：

1.如何实现Echarts的空白区点击事件（官方文档没有介绍此方法）

myChart.getZr().on('click', function(e) {
   if (!e.target) {
      // clicked empty area
   }
})