vue封装echarts组件，控制样式和数据，数据动态渲染

关于echarts封装成组件，要注意父组件传入子组件的数据有哪些，一般是

id: 图表实例化需要一个唯一的id；

time： x轴的显示数据，参数名可以自己定义；

opData： 用来配置series的系列列表，参数可以自己定义；

unit： y轴单位显示，参数可以自己定义；

title： 图表系列标记，参数可以自己定义；

要注意 样式有的时候也是需要传入的，比如饼图的颜色或者折线图的线的颜色，点的颜色，在复用的时候，大多是要重写进去的，用来区分不一样的图

（画布的width和height也可以传入，这个代码是充满外层div的，所以他没有传入）

传进来之后放在props里面，直接用this上到你的初始化echarts代码里，注意echarts的init放在methods里面定义好之后要把它放在mounted里面执行，然后你要写一个watch，用来监听你的数据，每次数据更新后，执行init更新你的echarts表。
下面图片是下面链接的代码，堪称千年老代码。

echarts做图标自适应就是说，将浏览器窗口的resize事件做个回调函数，调用echarts.resize（）这里要注意，最后要记得销毁一下这个事件，将window.removeEventListion放在destoryed（）{}里面，在组件销毁之前做这件事，注意下面的代码这里拼错了。看看结构就好了。思路还是很好的。
存一下

这里是我写的代码，是全局注册的echarts，当然，也可以使用局部注册echarts，项目里面尽量使用局部注册，请不要吐槽为什么是个柱状图而不是pie，我本来是要用pie，但是呢，引入echarts时用了柱状图来写，懒得改了，就一路写到底，我的项目里面的老代码是死数据，不涉及到数据变化，但是实际上线肯定是要变化的，请求后台来获得。所以先把这个组件封装一下。

参数外部传入的写法，可以改样式和数据
下部还有数据修改后动态渲染的代码

main.js里面全局注册

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

父组件使用子组件的代码
template区的使用

  <PieEc :id=pierId :dataXRED=dataRedX :dataYRED=dataRedY  pieColor="red"></PieEc>

data区的数据

   data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          pierId: 'colorRed',
          dataRedX: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          dataRedY: [5, 20, 36, 10, 10, 20]
        }

子组件代码

<template>
  <div class="PieEc" :id="id" :style="{width: '300px', height: '300px'}">
  </div>
</template>

<script>
export default {
  name: 'PieEc',
  props: {
    id: String,
    dataXRED: Array,
    dataYRED: Array,
    pieColor: String
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        backgroundColor: this.pieColor,
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: this.dataXRED
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.dataYRED
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>

加入了动态监控的代码
代码后面的图是效果图
子组件代码

<template>
  <div class="PieEc" :id="id" :style="{width: '300px', height: '300px'}">
  </div>
</template>

<script>
export default {
  name: 'PieEc',
  props: {
    id: String,
    dataXRED: Array,
    dataYRED: Array,
    pieColor: String
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  //使用watch侦听器来重绘图表，注意这里我的watch写法，只是个函数的写法不同，注释掉的watch都是可以使用的。推荐使用写法三
       // watch: {
  //   // dataYRED: function (newQuestion, oldQuestion) {
  //   //   this.drawLine()
  //   // }
  //   // 写法2
  //   // dataYRED () {
  //   //   this.drawLine()
  //   // }
  //   // 写法3immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
  //   dataYRED: {
  //     handler (newName, oldName) {
  //       this.drawLine()
  //     },
  //     immediate: true
  //   }
  // },
  watch: {
    dataYRED: function (newQuestion, oldQuestion) {
      this.drawLine()
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        backgroundColor: this.pieColor,
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: this.dataXRED
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.dataYRED
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>

父组件代码

<template>
  <div class="hello">
    <button @click="changeDataRedX">88</button>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <PieEc :id=pierId :dataXRED=dataRedX :dataYRED=dataRedY  pieColor="red"></PieEc>
    <h2>Ecosystem</h2>
  </div>
</template>

<script>
import PieEc from './PieEc'
export default {
  name: 'HelloWorld',
  components: {
    PieEc
  },
  methods: {
  // 使用方法来修改值，模拟axios请求
    changeDataRedX () {
      this.dataRedY = [15, 15, 36, 10, 15, 20]
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      pierId: 'colorRed',
      dataRedX: ['衬衫', '羊毛', '雪纺', '裤子', '高跟', '袜子'],
      dataRedY: [5, 20, 36, 10, 10, 20]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

好一点的代码
blog.csdn.net/Ace_with_Yu…
图片代码的监听可以考虑下面这篇
blog.csdn.net/qq_36979290…