Vue2+echarts 实现图表的简单绘制

Echarts是一个基于JavaScript的开源可视化库，由百度开发和维护。它通过简单的配置方式，就可以实现各种复杂的数据可视化和图表展示。Echarts支持多种图表类型，包括柱状图、折线图、饼图、散点图、漏斗图等，同时还支持地图可视化和3D可视化效果。Echarts具有高度可定制性和交互性，支持动态数据更新和大数据量展示。Echarts提供了丰富的API和文档，可以方便地与其他前端框架整合。Echarts被广泛应用于数据可视化领域，特别是大数据分析和BI数据分析等领域。

一:快速构建vue项目

使用vue脚手架创建一个快速入门项目

vue create echarts-test

这里选择默认的vue2模板项目快速构建

运行命令启动项目

cd echarts-test
npm run serve

打开浏览器输入对应的端口就可以看到模板页面了

二：引入echarts

2.1添加echarts包

在项目根目录执行命令

npm i echarts

这时候你就可以在package.json文件中找到添加的包

2.2全局引入echarts

在main.js中添加以下语句

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

这样的目的是将echarts挂载到vue原型上，可以直接通过$echarts直接使用

三：echarts简单入门示例

3.1清理无用文件

将app.vue 内的无关内容清空

清空完的内容为

<template>
  <div>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style></style>

3.2echarts示例图表

首先创建一个区域作为echarts图表的画布并设置对应的宽高和ref

<template>
  <div>
    <div ref="echarts" style="height: 600px;width: 800px;"></div>
  </div>
</template>

在挂载的时候获取echarts初始化和绘制图表

<script>

export default {
  name: 'App',
  mounted() {
    let chart = this.$echarts.init(this.$refs.echarts)
    chart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}

效果如下图所示