Vue中ECharts入门使用

目录

目录

一.Vue安装ECharts

二.全局挂载ECharts

三.初始ECharts数据对象

四.设置ECharts实例

---

         ECharts是一款基于JavaScript的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表，提供了常规的折线图、柱状图、散点图、用于统计的盒形图，用于地理数据可视化的地图、线图，用于关系数据可视化的关系图、多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。下面写一下Vue中ECharts入门使用

一.Vue安装ECharts

管理员命令行或终端输入安装命令

npm install echarts

二.全局挂载ECharts

在项目主函数入口挂载ECharts 

//引入依赖，导入全部模块变量
import * as echarts from 'echarts'

//挂载到Vue原型
Vue.prototype.$echarts = echarts

三.初始ECharts数据对象

为了方便项目使用中动态管理图表，我们需要去初始数据，这里我们直接用官网的示例即可，点击进入官网Examples - Apache ECharts

 选择基础折线图，可以看到我们需要的图表配置数据对象，options，项目中名字也可以自定义

//初始ECharts图表数据配置对象
data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
    }
  },

四.设置ECharts实例

这里我用了一个方法来配置实例，代码大同小异，你也可以自定义去使用

echarts() {
      // 初始化echarts实例并传入一个有宽度和高度的父容器
      let echart = this.$echarts.init(document.getElementById("main"));

      // setOption设置重绘图表实例的配置项以及实时更新数据
      echart.setOption(this.option);
  }

然后将响应容器，就是实例中的父容器，放到页面上要显示的地方，将echarts()方法跑起来，页面就会显示图表。

<div id="main" style="width: 600px; height: 400px"></div>

Finish！