资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放

看下效果图，和普通的饼图很明显的区别就是：1有明显的白色边框线2圆环中心自定义内容标题3需要设置图例位置与内容我通常的就是。

例子中，过程已经讲得比较详细了，所以这里就不再重复说了，直接贴全部代码。相比于普通的柱状图，这里边最明显的区别在于多了。如果你耐心看完，并理解了对应的图层叠加思路↓。以上代码实现了官网示例与最终效果的对比。先引入一个两层叠加的例子。那么就能很容易想到，

先看下效果图是这个样子的 ，和普通的柱状图最明显的区别就是需要做成类似于电池格电量显示效果。

改造的基本思路：将type由bar变为pictorialBar，再修改设置与pictorialBar相关的配置项即可。看到这几种标记类型还不是很抽象，没关系，我们一个一个看下效果。a.type由bar变为pictorialBar，效果如下。看了这么多，那么我们要用到的是哪一个呢？看下官网例子，你就大概明白每个配置项能实现的效果了，接着再改变一下颜色，设置一下label就完成了。为什么是椭圆效果呢？我们去官网配置项中找答案，因此我们设置一下想要实现效果的配置项。但是，还有一个小细节需要注意，

先看下效果图是这个样子的 ，和普通的折线图最明显的区别就是需要做成渐变效果。目录1、官网找例子2、初步改造示例，有个雏形3、细节改造和优化4、全部代码5、原始效果和完成效果对比1、官网找例子样例地址：https://echarts.apache.org/examples/zh/editor.html?c=area-basic官网初始option复制到项目中，得到的效果如下图（width:424px;height:200px;）：2、...

目录1、官网找样例2、初步改造示例，有个雏形3、细节改造和优化4、全部代码5、原始效果和完成效果对比​碎碎念：UI效果图是这样的看到之后我一脸懵，按照常规阶梯思路，我又开始了度娘之旅。1、官网找样例样例官网地址把样例的option复制到本地，原始option代码：let demoOption = { title: { text: 'Funnel' }, tooltip: { trigge..

从ECharts官网雷达图样例中一点一点实现效果图

首先看下实现的效果：1、需要安装插件npm install echarts-liquidfill --save 或者 cnpm install echarts-liquidfill --save（我都是习惯用cnpm）2、页面引入3、设置option，核心点就是echarts-liquidfill结合echarts环形图需要注意的是：更多效果及说明可以参考github上的说明：https://github.com/ecomfe/echarts-liquidfill

之前我尝试了Element-ui的环形进度条实现颜色渐变效果这个对eCharts来说简直就是小case。完成之后的效果图如下：对应的页面源代码如下：<template> <div class="panel-content"> <div style="width: 300px;height: 300px;background-color: #0E1824;" ref="chartContent"> </di

UI效果图：我参照官网的例子，默认的颜色，出来之后的效果：页面源代码：<template> <div class="pieChart" ref="pieChart"> </div></template><script> import echarts from 'echarts' export default { name: "TEMPLATE", mounted(){