Vue 插件echarts图表入手

1 npm安装echarts插件

官网：echarts.apache.org/zh/index.ht…

打开项目的终端，在终端中输入 npm install echarts --save安装echarts插件

还可以通过 npm install echarts版本号 --save来下载特定的版本号

通过package.json中可以查看下载的echarts版本

2 引入 ECharts

步骤一(设置容器)

准备一个容器，并且设置宽高，注意vue是单页面开发，所以id不能重复(一定要设置宽高)

<template>
  <div>
    <h1>echarts入门</h1>
    <div id="main"></div>
  </div>
</template>

步骤二(局部引入或者全局引入)

局部引入

// 二 局部引入echarts
import * as echarts from "echarts";

全局引入

// 1 全局引入echarts
import * as echarts from "echarts";
// 2 将echarts放到vue中使用
Vue.prototype.$byesame=echarts

步骤三(去官网复制代码)

1 初始化echarts实例 ---获取dom元素

在这里局部和全局有不同了

局部let myChart = echarts.init(document.getElementById('id名称'));

全局let mychart= this.$byesame.init(document.getElementById("id名称"));

2 配置图表内容和数据 --设置内容

let option= {
    // 配置内容(去官网复制粘贴)
}

3 绘制图表 ---将图表放到dom元素中

myChart.setOption(option)

4 图标的响应式(可无)

第一步容器必须宽度的单位是%

第二步当窗口发生改变的时候使用.resize()方法去适配

window.onresize=()=>{
  myChart.resize()
}

整体代码

handleEchar(){
      // 三 复制粘贴代码
      // 1 初始化echarts实例 ---获取dom元素
      let myChart = echarts.init(document.getElementById('main'));
      // 2 配置图表内容和数据  --设置内容
      let option= {
        // 配置内容
      }
      // 3 绘制图表 ---将图表放到dom元素中
      myChart.setOption(option)
      // 4 图标的响应式
      // 第一步容器必须宽度的单位是%
      // 第二步当窗口发生改变的时候使用.resize()方法去适配
      window.onresize=()=>{
        myChart.resize()
      }
    },

步骤四(调用函数)

  // 默认调用
  mounted(){
    this.handleEchar()
  }