【echart使用系列一】echart安装和初步使用

echart使用入门

echart是什么

简单地说，是图表库，包括柱状图、折线图、饼状图，等。让前端开发者可以轻松的在页面上加入图表。

使用步骤

1.下载库文件，并引入

安装依赖文件

npm install echarts --save

在main.js文件加入如下代码，完成引入和挂载echarts，以便于全局使用。

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

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

2.使用

创建指定高宽的div容器用于绘制图表

<div id="echart">
    <div id="chartmain" style="width: 100%; height: 400px"></div>
</div>

编写初始化图表函数

methods: {
   
    echartFun() {
   
      //初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("chartmain"));
      
      //指定图标的配置和数据