vue中使用echarts图表

tomtomgogo

已于 2024-01-14 01:30:16 修改

阅读量419

点赞数 7

文章标签： vue.js echarts 前端

于 2024-01-14 00:53:46 首次发布

本文链接：https://blog.csdn.net/tomtomgogo/article/details/135578295

版权

本文介绍了如何在Vue项目中通过npm安装和引入ECharts，包括局部和全局引入方法，以及如何在DOM元素中设置和配置ECharts图表，强调了图表展示位置和初始化实例的重要性，推荐学习官网示例和API文档。

摘要由CSDN通过智能技术生成

整理了一下vue中引入echarts图表并实现简单使用的步骤，结合实际情况使用echarts图表。先附上echarts官网链接：

npm install echarts --save

这里按照需要进行。如果项目中运用到echarts图表的地方很少，只需要在需要的页面中引入：

import * as echarts from 'echarts'  // 一次性全部导入模块的所有变量

如果需要全局引入，需要在main.js文件中引入，代码如下：

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用echarts需要注意两个点：第一我的图表放置位置，第二图表该怎么配置。页面中没有直接的图表元素，echarts又是怎么实现展示的呢？

考虑到dom元素展示，echarts图表有其独特的方式实现图表展示：首先在展示位置dom元素必须有id属性，并且需要定义好行内样式（特别是宽度width），代码如下：

<div id="histogram" style="width: 100%; height: 280px;"></div>

表示echarts图表将在id为histogram的div元素中显示。那么又是如何将图表配置和元素连接起来呢？----通过document.getElementById('histogram')，通过id获取dom元素。

原来echarts通过js原生方法获取到展示图表的元素节点，并通过这样的方式初始化echarts实例，定义myChart接收。通过实例中的setOption（）方法，实现图表配置。这样我们可以根据需求实现图表配置啦~官网中又很图表样例可以学习学习，以及一些api可以通过官网文档查询到。

// 初始化echarts实例
const myChart = echarts.init(document.getElementById('histogram'))
// 配置图表参数
myChart.setOption（{

}）

这里需要注意，vue建议我们尽量不要动dom节点，但是这里通过document.getElementById('histogram')获取元素dom，需要保证节点已经挂载到页面中，也就是说需要将函数放在mounted钩子函数中

关注