Vue简单使用Echarts

1. 简介

ECharts 教程 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。

2. 实例

2.1 实例是统计“国内新冠病毒数据”，

接口来自网络接口：接口1、接口2

2.2 实例截图：

图一：

图二：

2.3 项目源码：

点击查看

3. 如何在Vue中使用Echarts

3.1 安装

//将npm下载源修改为淘宝镜像：npm config set registry https://registry.npm.taobao.org
npm install echarts --save
或者
cnpm install echarts --save

3.2 使用

在使用的组件中引入:

<template>
    <div id="main" style="height:600px;width:500px;"></div>
</template>
<script>
import * as echarts from "echarts"

export default {
  name: 'Home',
  data(){
    return{
      provinceData:provinceData,
      province:""
    }
  },
  mounted(){
      this.initChart();
  },
  methods:{
    initChart() {
      let myChart = echarts.init(document.getElementById('main'));
       let options = {
          //echarts相关配置项
       }
       //挂载到DOM元素上
       myChart.setOption(options)
    }
  }
}
</script>

说明：在引入echarts的时候，如果使用import echarts from "echarts"引入时，此时会报错

所以才import * as echarts from "echarts"引入。

好了 以上就是关于Echarts在Vue中的使用了。

记得单击加关注哦！！