Echarts使用心得

type

status

date

slug

summary

前言

Echarts 是一个 JavaScript 的开源可视化图表库，可以快速画出许多图形，我们有时候会用到它，但是官方教程对于新手来说确实不友好，至少在我看来是这样的，看了我几天才大概有所了解，为了加深记忆，故在此记下，方便日后忘记可以回来查看

一、基础画图

基础画一个图，首先要知道的是重点在于配置项setOption,现在先不急了解，我们先简单画一个图

1、在页面创建一个 div 标签，id 值为 myChart

2、引入 echarts.js 并绘画，echats.js 的 Github 下载地址

3、一开始还是挺好理解的，就是这两个步骤,你也可以选择封装一下

把上面第 2 步简化一下就是：(option 和第 2 步的 option 相同，这里就不写了）

有时候如果宽高不设死需要自适应，可以使用 resize() 方法，这时候 return myChart 的作用就出来了,这里就不写配置项 option 了

如果觉得麻烦，就用第 2 步就行，下面重点介绍配置项setOption

二、配置项 setOption

下面这些为本人所用过的以及一些个人理解，如有错误还请看：官网配置项详情，也可以边看此文和官网一起学习

下面一些为我常用配置，并未盖全，更多可以看：官网配置项详情

1、title

title 是该画布的标题，包含主标题和副标题,里面配置项有

2、legend

官方解释：图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。不懂可以看看上面那个官网地址那里面的试一试

3、grid

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。这个可以控制图表的位置，设置图表上下左右的距离

4、xAxis

图表的 X 轴

5、yAxis

图标的 y 轴，与上面 xAxis 一样，xAxis 有的配置项，yAxis 也有，参考上面即可

6、tooltip

提示框组件

7、toolbox

工具栏，这里就不写了，看看官网就行

8、series

重头戏在这个，series 可以嵌套多个对象

写多了不难发现几个常见的属性值（请记住这个几个属性）：

lineStyle：线条样式

splitNumber：分割段数

axisLine：轴线相关配置

splitLine：分隔线样式

axisTick：刻度样式

axisLabel：刻度标签

itemStyle：图形样式

label ：图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等

labelLine：标签的视觉引导线配置

每个 type 的选项不同，但这几个属性值几乎每个都包含有，有些配置可能会有些差异。用多几次，你会发现有些属性可以写在局部，也可以写在全局，如: textStyle , lineStyle ……这些都是设置图标样式的，设置样式的属性一般可以在很多地方可以看到，就像在套娃哈哈哈。可以看看实例，你想画什么图直接看示例，然后点进去修改，改到符合自己的样式，多练几次手应该就差不多熟悉了。另外，本人写有一些例子可供参考练手：

Gitee 地址

演示地址

🗒️Echarts使用心得

前言