vue中引入echarts的两种方式

你的名字 2021-07-26 21:33 631阅读 0赞

## 1.安装echarts依赖 ##

> **npm install echarts -S**

## 2.创建图表 ##

### a:全局引入 ###

**main.js页面**

import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

**Hello.vue页面**

<template>
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    </template>
    <script>
      export default {
        name: 'hello',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        },
        mounted(){
          this.drawLine();
        },
        methods: {
          drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
              title: { text: '在Vue中使用echarts' },
              tooltip: {},
              xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
            });
          }
        }
      }
    </script>
    
    <style scoped>
    </style>

### ![20200729175853310.png][] ###

### b:按需引入 ###

上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。

<template>
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    </template>
    <script>
      // 引入基本模板
      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: 'hello',
        data() {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        },
        mounted() {
          this.drawLine();
        },
        methods: {
          drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
              title: { text: 'ECharts 入门示例' },
              tooltip: {},
              xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
            });
          }
        }
      }
    </script>
    
    <style scoped>
    </style>

![20200729180437302.png][]

[20200729175853310.png]: /images/20210726/48ba332d052849189560f2f82b16b6f7.png
[20200729180437302.png]: /images/20210726/55bf521dfcd94c1ebfe5cade231685b6.png