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

Vue2+echarts 实现图表的简单绘制_第1张图片

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

 一:快速构建vue项目

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

vue create echarts-test

Vue2+echarts 实现图表的简单绘制_第2张图片

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

Vue2+echarts 实现图表的简单绘制_第3张图片

 运行命令启动项目

cd echarts-test
npm run serve

Vue2+echarts 实现图表的简单绘制_第4张图片

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

Vue2+echarts 实现图表的简单绘制_第5张图片

二:引入echarts

2.1添加echarts包

在项目根目录执行命令

npm i echarts

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

Vue2+echarts 实现图表的简单绘制_第6张图片

 2.2全局引入echarts

在main.js中添加以下语句

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

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

Vue2+echarts 实现图表的简单绘制_第7张图片

三:echarts简单入门示例

3.1清理无用文件

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

清空完的内容为







3.2echarts示例图表

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


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


                    
                    

你可能感兴趣的:(vue,echarts,前端,javascript)