【Echarts雪花宝典特殊示例100+】目录

蔚落 2024-03-27 11:14 208阅读 0赞

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center]

目前已发表25篇文章

vue+echarts系列教程旨在为开发者提供简单快捷的**代码示例**，**复制即可用**。在每一个示例中，解释相应的API知识点，做到**简易实现，轻松学会**。

通常一个Echarts图表通常由title(标题)、legend(图例)、grid（网格）xAxis（x轴）、yAxis（y轴）、dataZoom（区域缩放）tooltip（提示框组件）、toolbox（工具栏）、series（系列列表。每个系列通过 type 决定自己的图表类型）组成。例子如下图所示：![在这里插入图片描述][55b130029b6c42b7a072ea47784c6bbc.png_pic_center]

目录正在建设中，

#### 文章目录 ####

*   *  基本操作
     *  系列 Series

### 基本操作 ###

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th align="left">标题</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128828128" rel="nofollow">vue中安装与引用echarts示例</a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129089035" rel="nofollow">Echarts 配置横轴竖轴指示线，更换颜色、线型和大小 </a></td> 
  </tr> 
 </tbody> 
</table>

### 系列 Series ###

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th align="left">标题</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>折线图 line</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128882187" rel="nofollow">Echarts的Y轴添加定值横线的示例）</a></td> 
  </tr> 
  <tr> 
   <td>折线图 line</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129003619" rel="nofollow">Echarts 设置面积区域图（areaStyle核心）</a></td> 
  </tr> 
  <tr> 
   <td>折线图 line</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129004301" rel="nofollow">Echarts 设置折线图线条样式（虚线+粗细+阴影）</a></td> 
  </tr> 
  <tr> 
   <td>折线图 line</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129005144" rel="nofollow">Echarts 设置折线拐点大小、类型等，默认下不显示拐点</a></td> 
  </tr> 
  <tr> 
   <td>折线图 line</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129006200" rel="nofollow">Echarts 设置折线拐点的颜色，边框等，hover时改变颜色</a></td> 
  </tr> 
  <tr> 
   <td>折线图 line</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129008091" rel="nofollow">Echarts 折线图拐点超过某值突出显示，颜色变红 </a></td> 
  </tr> 
  <tr> 
   <td>柱状图 bar</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129159142" rel="nofollow">Echarts 柱状图横向展示和竖向展示</a></td> 
  </tr> 
  <tr> 
   <td>柱状图 bar</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128865553" rel="nofollow">Echarts修改柱状图柱子的宽度 </a></td> 
  </tr> 
  <tr> 
   <td>柱状图 bar</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128862610" rel="nofollow">Echarts柱形头部圆弧处理</a></td> 
  </tr> 
  <tr> 
   <td>柱状图 bar</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128860792" rel="nofollow">Echarts解决左右上下边距问题（ 两种方法）</a></td> 
  </tr> 
  <tr> 
   <td>柱状图 bar</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128838542" rel="nofollow">ECharts线性渐变色示例演示（2种渐变方式）</a></td> 
  </tr> 
  <tr> 
   <td>象形柱状图</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129243440" rel="nofollow">Echarts 实现电池效果的柱状图 </a></td> 
  </tr> 
  <tr> 
   <td>象形柱状图</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129243658" rel="nofollow">每个柱子一种渐变色的象形柱状图 </a></td> 
  </tr> 
  <tr> 
   <td>圆形柱状图</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129157766" rel="nofollow">ECharts 圆形柱状图设置角度和最大值</a></td> 
  </tr> 
  <tr> 
   <td>饼图 pie</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128853689" rel="nofollow">Echarts 用图形纹理来填充颜色（color - pattern）</a></td> 
  </tr> 
  <tr> 
   <td>饼图 pie</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128847125" rel="nofollow">Echarts环形图、饼图径向渐变示例 </a></td> 
  </tr> 
  <tr> 
   <td>饼图 pie</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128846098" rel="nofollow">Echarts环形图线性渐变，hover后显示阴影</a></td> 
  </tr> 
  <tr> 
   <td>仪表盘 gauge</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129244481" rel="nofollow">Echarts 仪表盘倾斜一定角度显示，非中间对称 </a></td> 
  </tr> 
  <tr> 
   <td>仪表盘 gauge</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129245962" rel="nofollow">Echarts 模拟汽车速度和油量的仪表显示，两个仪表盘同图</a></td> 
  </tr> 
  <tr> 
   <td>雷达图 radar</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129030257" rel="nofollow">Echarts 修改雷达图背景分割面，分割线颜色，设置数据线颜色</a></td> 
  </tr> 
  <tr> 
   <td>雷达图 radar</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129031698" rel="nofollow">Echarts 雷达图设置拐点大小和形状，tooltip后文字不居中对齐</a></td> 
  </tr> 
  <tr> 
   <td>K线图 candlestick</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129092072" rel="nofollow">Echarts 更改K线图颜色，解释K线图4个数字意义</a></td> 
  </tr> 
 </tbody> 
</table>

[198b80c65c724e61a9b1ac41f8ca946e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/133cba2ee54443e49f35f38ac7c3c600.png
[55b130029b6c42b7a072ea47784c6bbc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/86ba64a9f8cf4706b8d657a359f17ef0.png