当前位置：首页 > news >正文

大屏开发系列——Echarts的基础使用

news 2025/7/2 11:25:09

本文为个人近期学习总结，若有错误之处，欢迎指出！

Echarts在vue2中的基础使用

一、简单介绍
二、基本使用（vue2中）
- 1.npm安装
- 2.main.js引入
- 3.使用步骤
- - (1)准备带有宽高的DOM容器；
  - (2)初始化echarts实例；
  - (3)定义图表的配置项和数据；
  - (4)为echarts实例设置配置项和数据。

一、简单介绍

      一个基于 JavaScript 的开源可视化图表库，支持用户交互和个性化定制，提供折线图、柱状图、饼图、散点图、关系图、树图、地图、仪表盘等各种图表类型，功能非常强大。
这里提供几个官网相关地址：
      官网地址：https://echarts.apache.org/zh/index.html
      官网使用手册：https://echarts.apache.org/handbook/zh/get-started/
      官网图表示例地址：https://echarts.apache.org/examples/zh/index.html，
      图表配置项手册地址：https://echarts.apache.org/zh/option.html#title，
      图表API地址：https://echarts.apache.org/zh/api.html#echarts
      在绘制具体图表时，可在配置项里查阅各个属性和其代表含义；涉及图形交互时，可查看API的使用。
      再推荐俩关于echarts的社区网站，可参考学习（逛一逛，你一定会惊叹网友的智慧，个人也会受益匪浅哦^_）。
网站一：https://www.makeapie.cn/echarts
网站二：https://echarts.zhangmuchen.top/#/index

二、基本使用（vue2中）

1.npm安装

npm install echarts --save

这里个人安装的版本是5.4.3
所以，安装命令为：npm install echarts@5.4.3 --save
注意：不同版本的echarts，部分属性的书写格式可能存在差异。后续更文中图表的属性写法，皆是5.4.3版本。

2.main.js引入

// 引入Echarts
import * as echarts from 'echarts'// 将ECharts实例化函数设为vue的原型函数，便于全局访问
Vue.prototype.$echarts = echarts

组件内使用时，用this.$echarts.xxx。

3.使用步骤

主要步骤分为4步：

(1)准备带有宽高的DOM容器；

<div ref="chartArea" :style="{width: '300px',height: '100px'}" />

(2)初始化echarts实例；

let myChart = this.$echarts.init(this.$refs.chartArea)

(3)定义图表的配置项和数据；

常规配置如下：

option={color:[],//系列(如：柱子、折线、饼块)的颜色（若不写，则取默认值）tooltip:{},// 悬浮框，会在鼠标悬停或者触摸某个数据点时显示legend:{},//图例grid:{},//直角坐标系绘图网格xAxis:[],//x轴yAxis:[],//y轴//系列图表series:[{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容}]  
}

注意：
①这些配置属性中，color、xAxis、yAxis、series属性是数组（color里的元素是字符串，而xAxis、yAxis、series里的元素是对象），其它属性是对象；
②若series系列中的对象设置了name属性值，则legend.data可以不必写，只需写其它相关图例配置。

各个配置属性对应图像中的位置如下：
在这里插入图片描述

(4)为echarts实例设置配置项和数据。

myChart.setOption(this.option, true)

PS：绘图时，让图表跟随屏幕自适应

window.addEventListener('resize', () => {myChart.resize()
})

好了，echarts在vue2项目中的使用基础就讲完了，后面咱就可以逐步开始绘制具体的各类图表啦！