vue项目echarts通过cdn或npm引入

1、 vue版本号: 2.6.11

2、 vue-cli版本号: 4.5.11

3、 通过CDN的方式引入

3 3.1 、线上链接

1.首先先在public文件夹下的html页面中引入

<script crossorigin="anonymous" integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ==" src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>

2.而后在根目录下创建vue.config.js文件在其中添加入下配置即可
注意: vuecli3以下版本是在 build 文件夹中的 webpack.base.conf.js 中进行配置

module.exports = {
  //路径前缀
  publicPath: "/",
  chainWebpack: (config) => {
    config.externals({
      'echarts': 'echarts'
    });
  }
};

3.而后在需要使用的页面中如下方式引入
注意: 注意此处echarts高版本中需要使用 import * as echarts from ‘echarts’ 方式方可引入，否则会报错init为udefined

<template>
  <div class="home">
    <div class="threeBarChart" :id="id"></div>
  </div>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入，否则会报错init udefined
export default {
  name: 'Home',
  data () {
    return {
      id: 'main'
    }
  },
  mounted () {
    this.myChart()
  },
  methods: {
    myChart () {
      // 获取节点
      const myChart = echarts.init(document.getElementById(this.id))
      // 获取到当前容器的的宽高而后赋值加载至图列节点中从而达到自适应容器大小
      myChart.resize(
        {
          width: document.getElementById(this.id).offsetWidth,
          height: document.getElementById(this.id).offsetHeight
        }
      )
      // 配置项
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .home {
    height: 100%;
    overflow: auto;
    .threeBarChart {
      height: 500px;
      width: 500px;
      background-color: #9967FB;
    }
  }
</style>

3 3.2、下载本地: 与线上链接引入配置一致

下载本地

git clone https://github.com/apache/echarts.git

将echarts源码克隆下来后，在dist文件夹中找到echarts.min.js文件复制至自己的项目中,我的放在与html文件同级的自己创建了一个cdn文件夹中

而后直接在html页面中引入(注意要通过<%= BASE_URL %>拼接上路径的方式引入)
<%= BASE_URL %> 当前根目录下

<script src="<%= BASE_URL %>cdn/echarts/echarts.min.js"></script>

4、npm下载引入

1.下载依赖

npm i echarts -S

2.main.js中挂载配置
注意: 注意此处echarts高版本中需要使用 import * as echarts from ‘echarts’ 方式方可引入，否则会报错init为udefined

import * as echarts from 'echarts' // 注意: echarts高版本中需要使用此方式方可引入
Vue.prototype.$echarts = echarts

3.而后如下直接在项目中使用this.$echarts使用

<template>
  <div class="home">
    <div class="threeBarChart" :id="id"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      id: 'main'
    }
  },
  mounted () {
    this.myChart()
  },
  methods: {
    myChart () {
      // 获取节点
      const myChart = this.$echarts.init(document.getElementById(this.id))
      // 获取到当前容器的的宽高而后赋值加载至图列节点中从而达到自适应容器大小
      myChart.resize(
        {
          width: document.getElementById(this.id).offsetWidth,
          height: document.getElementById(this.id).offsetHeight
        }
      )
      // 配置项
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .home {
    height: 100%;
    overflow: auto;
    .threeBarChart {
      height: 500px;
      width: 500px;
      background-color: #9967FB;
    }
  }
</style>