一、vue 引入 ECharts依赖
npm install echarts --save
二、创建盒子
<div ref="chars" style="height: 500px;width:800px;"></div>
解释说明
ref="chars" 是 Vue.js 中一个非常有用的特性,用于给 DOM 元素或组件实例添加引用。通过使用 ref,你可以在 Vue 组件中轻松访问这些元素或组件。
主要功能
1.直接访问 DOM 元素:
使用 ref 可以在 Vue 组件的方法中直接访问该元素,例如获取其大小、位置等信息。
在你的例子中,this.$refs.chars 将指向对应的
元素。
2.方便与第三方库集成:
当你使用诸如 ECharts、D3.js 等第三方图表库时,可以通过 ref 轻松获取到用于渲染图表的 DOM 元素,并进行初始化和配置。
注意点
盒子需要给号长和宽,不然图例加载不出
三、vue页面导入 ECharts 库
import * as echarts from 'echarts'
四、ECharts 具体实现
1.访问ECharts官网
访问之后如以下页面,点击所有示例就可以看到图
2.粘贴代码
注:这里以折线图、柱状图、饼图三个常用图例举例
(1)先明确一下使用的图例
a.折线图
b.柱状图
c.饼图
注:以上就是这次举例的三个图例
(2)点击图例,点击完整代码
a.折线图
b.柱状图
c.饼图
(3)创建一个方法将图例代码放进去
a.折线图
b.柱状图
c.饼图
(4)注意事项和要改的地方
1.官网复制
注:复制时要选择完整代码复制
2.复制到方法时,要该的地方
说明:
const myChart: 定义一个常量 myChart,用于存储创建的 ECharts 实例。
echarts.init(this.$refs.chars): 调用 ECharts 的 init 方法来初始化图表。this.$refs.chars 是 Vue.js 中的一个引用,指向模板中定义的某个 DOM 元素(通常是一个
),这个元素将用于展示图表。
3.柱状图和饼图与以上改的地方一样
4.确保 ECharts 的初始化代码放在 mounted 钩子中,而不是 created 钩子中。这样可以确保 DOM 元素已经被挂载。
五、启动VUE项目测试
a.折线图
b.柱状图
c.饼图
六、动态数据的实现
以上代码只是测试所有数据都是静态,实现动态数据只需要掉后台接口查询,然后将数据赋值就行了
1.定义数据存储
2.赋值
这里只表明三个常用图例数据赋值地点
a.折线图
b.柱状图
c.饼图
饼图和折线图、柱状图存储数据格式不同
3.调用
注意:这里和静态数据创建图例是有区别的
需要在获取数据之后直接创建图例