vue技术交流群（864583465）vue中封装的echarts组件，直接传option即可

1、使用该组件时，需要先安装echrats

npm install echarts --save
或
cnpm install echarts --save

2、该组件可以自适应浏览器的宽度，高度需要根据业务需求自行设置
3、可根据业务需求动态import相关组件，正确import即可

  import echarts from 'echarts/lib/echarts'; //  必须要引入
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/legendScroll'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/dataZoom'

4、组件完整代码如下：

组件名称：echartsCom.vue

<template>
  <div :id="id" class="echarts-element-class">
    <div style="display: none">{{optionUpdated}}</div><!-- 该行代码主要是使计算属性产生作用，进而执行optionChanged方法  -->
  </div>
</template>

<script>
  import echarts from 'echarts/lib/echarts';
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/legendScroll'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/dataZoom'
  export default {
    components:{echarts},
    props: {
      options: {  //父组件传递的options
        type: Object,
        default: {}
      },
      id: {  //echarts元素的id
        type: String,
        default: 'id'
      }
    },
    data(){
      return{}
    },
    computed:{
      optionUpdated(){
        this.$nextTick(()=>{
          this.optionChanged(this.options)
        })
        return this.options
      }
    },
    methods:{
      resizeHander(){
        this.initEcharts(this.id).resize()
      },
      optionChanged(option){
        this.echartsSetOption(this.id, option);
        window.addEventListener('resize',this.resizeHander)  //监听浏览器的resize事件，进而执行echarts的resize()方法
      },
      echartsSetOption(echart_ele_id,echart_ele_option){
        let temp = echarts.init(document.getElementById(echart_ele_id)) ;
        temp.clear()     // echarts图表同一画布下，重新画图时 需要先清空画布缓存再执行setOption操作
        temp.setOption(echart_ele_option)
      },
      initEcharts(echart_ele_id){
        return echarts.init(document.getElementById(echart_ele_id))
      }
    },
    beforeDestroy(){ // 注意这里不能使用destoryed 否则无法移除window的resize事件
      window.removeEventListener("resize",this.resizeHander)
    }
  }
</script>

<style lang="scss">
  .echarts-element-class{
    width: 100%;
    background-color: #fff;
  }
</style>

5、假设你需要在home.vue组件中使用，具体代码如下

<template>
<div id='home'>
  <echarts-com :options="salesOption" id="income" />
</div>
</template>

<script>
export default {
  components:{
    echartsCom: ()=>import('@/components/common/echartsCom.vue'),  //  组件懒加载
  },
  data() {
    return {
      salesOption:{},
    }
  },
  created() {
    this.getIncome()
  },
  methods: {
    async getIncome(){
      this.salesOption = {
          title: {
            // text: '金额'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['商品1', '商品2'],
            top: 10
          },
          grid: {
            left: '20',
            right: '50',
            bottom: '15',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2020-10-01','2020-10-02','2020-10-03','2020-10-04','2020-10-05','2020-10-06','2020-10-07']
          },
          yAxis: {
            type: 'value',
            name: '金额'
          },
          series: [
            {
              name: '商品1',
              type: 'line',
              stack: '商品1',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '商品2',
              type: 'line',
              stack: '商品2',
              data: [220, 182, 191, 234, 290, 330, 310]
            }
          ]
        }
    },
 
  }
}
</script>

<style lang=scss>
#home {
  #income{
    height: 260px;
  }
}
</style>

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键