2021-07-08

echarts.vue 封装文件 无需任何修改 单独一个页面存放

<template>
    <div id='echarts'>
      <div class="echartWrap" :id="echartId" :style="{'width':echartWidth +'px','height':echartHeight+'px'}"></div>
    </div>
</template>
<script>
//在组件里使用
const Echarts =()=>import("@/XXXX/XXX.vue")
export default {
name:"echarts",
//接后调用组件传过来的参数 
props:["echartId","echartWidth","echartHeight","echartOptions",],
data(){
  return{
    myChart:null
  }
},
watch:{
  echartOptions() {
    this.myChart.setOption(this.$props.echartOptions)
  }
},

mounted() {
  this.drawLine()
},
methods: {
  drawLine(){
  //基于准备好的DOM 初始化echarts实例
  let that=this
  let myChart=this.$echarts.init(
    //绑定dow
    document.getElementById(this.$prps.echartId)
  )
  this.myChart=myChart
  //绘制图表 echartOptions是引入页面传入
  //配置数据生成图标
  myChart.setOption(this.$prosp.echartOptions);
  myChart.on("finished",function(){
    if(that.$listeners["finished"]){//图标渲染完成事件
      that.$emit("finished")
    }
  })
  },
  getEhcart(){
    return this.myChart
  }
 }
};
</script>
<style>
/* 样式自己调 */
.echartWarp{
  box-sizing:border-box;
  margin-top: 10px;
}
</style>

引用页 里使用

  <!-- 在组件template里使用 -->
       <Echarts
        :echartWidth="100"
        :echartHeight="234"
         :echartId="cruve"       
        :echartOptions="cruve"/>

    //在组件里注册组件
    components:{
     Echarts :Echarts
     },