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],},],})},
}

 效果如下图所示

 更多图表可查看官网描述Apache ECharts