vue 以组件化的形式引入Echarts

在前面博客中写到了如何在项目中引入Echarts，是以全局的方式引入的。

但是，对于一个大项目来说，全局引入会将所有的echarts图表打包，从而导致体积过大。所以，我查找了一些资料，发现可以采取按需引入的方式，在页面中直接以组件化的形式引入。所以将实现过程记录下来~

父组件：

<template>
  <div class="bar_container">
    <barchart id="histogram_graph"></barchart>
  </div>
</template>
<script>
  import barchart from "./DrawBar"

  export default {
    name: 'HistogramTest',
    components: {
      barchart,
    },
    data(){
      return{}
    }
  }
</script>
<style>
.bar_container{
  width: 500px;
  height: 500px;
}
</style>

子组件：

<template>
  <div>
    <h1>通过组件的方式引入Echarts柱状图</h1>
    <p>{{msg}}</p>
    <div class="bar_compon">
      <div :id="id" style="min-width:400px;min-height: 400px;"></div>
    </div>
  </div>
</template>
<script>
  /*由于全局引入会将所有的echarts图表打包，导致体积过大，所以在本项目中，采用组建的形式按需引入*/
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')

  export default {
    name: 'DrawBar',
    props: {
      id: {
        type: String,
        default: 'chart'
      }
    },
    data(){
      return {
        msg: '柱状图',
        chart: null,
      }
    },
    mounted() {
      this.DrawBarChart();
    },
    methods:{
      DrawBarChart(){
        this.chart = echarts.init(document.getElementById(this.id));
        let colors = ['#179F5D', '#4A8AF3', '#DA4C3F'];
        let option = {
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            data:['苹果','香蕉','梨']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '销量',
              min: 0,
              max: 250,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value} 个'
              }
            },
            {
              type: 'value',
              name: '销量',
              min: 0,
              max: 250,
              position: 'right',
              offset: 50,
              axisLine: {
                lineStyle: {
                  color: colors[1]
                }
              },
              axisLabel: {
                formatter: '{value} 个'
              }
            },
            {
              type: 'value',
              name: '销量',
              min: 0,
              max: 250,
              position: 'left',
              axisLine: {
                lineStyle: {
                  color: colors[2]
                }
              },
              axisLabel: {
                formatter: '{value} 个'
              }
            }
          ],
          series: [
            {
              name:'苹果',
              type:'bar',
              data:[24,96,129,238,160,180,241]
            },
            {
              name:'香蕉',
              type:'bar',
              yAxisIndex: 1,
              data:[25.69,59,156,11,23,202]
            },
            {
              name:'梨',
              type:'line',
              yAxisIndex: 2,
              data:[24,16,10,20,100,170,201]
            }
          ]
        }
        this.chart.setOption(option)
      }
    }
  }
</script>
<style>
</style>

页面效果如下：

参考链接：
https://www.jianshu.com/p/cf0a54374419
https://www.jb51.net/article/149095.htm