NotionNext BLOGNestjs
前端
技术分享
Linux
Python
Rust
常用工具
🤔Echarts使用心得
type
status
date
slug
summary
tags
category
icon
password
前言
Echarts 是一个 JavaScript 的开源可视化图表库，可以快速画出许多图形，我们有时候会用到它，但是官方教程对于新手来说确实不友好，至少在我看来是这样的，看了我几天才大概有所了解，为了加深记忆，故在此记下，方便日后忘记可以回来查看
一、基础画图
基础画一个图，首先要知道的是重点在于配置项setOption,现在先不急了解，我们先简单画一个图
<br>
1、在页面创建一个 div 标签，id 值为 myChart
<br>
2、引入 echarts.js 并绘画，echats.js 的 Github 下载地址
<br>
3、一开始还是挺好理解的，就是这两个步骤,你也可以选择封装一下
把上面第 2 步简化一下就是：(option 和第 2 步的 option 相同，这里就不写了）
有时候如果宽高不设死需要自适应，可以使用 resize() 方法，这时候 return myChart 的作用就出来了,这里就不写配置项 option 了
如果觉得麻烦，就用第 2 步就行，下面重点介绍配置项setOption
<br>
二、配置项 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 ……这些都是设置图标样式的，设置样式的属性一般可以在很多地方可以看到，就像在套娃哈哈哈。可以看看实例，你想画什么图直接看示例，然后点进去修改，改到符合自己的样式，多练几次手应该就差不多熟悉了。另外，本人写有一些例子可供参考练手：