Echarts图表———销售漏斗

给自己打个小广告:
有开发APP、小程序、网站、后台系统需求 或者 想学习前端的可以私信我哈！

时隔一个月再次更新。。。

不过好像没有人看。。。

不过还是要更下去。。。

——————————————————————————————————————

产品设计的CRM系统中有一项 销售漏斗的功能，如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjDZT727-1660292374008)(https://img-blog.csdn.net/20170515162312438?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjg1ODQ2ODU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

功能要求随着销售的销售进度以及客户的汇款情况，漏斗容器跟着变化

本来是用CSS3写了一个“假”的漏斗，漏斗形状和数据并不能跟着变化

此时部门老大（名张杰，没错，就是谢娜老公那个张杰）推荐了一个插件，甚是好用——Echarts图表

介绍：

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。【这段为复制的定义。。zzz】

图表类型：折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭等等。

使用方法

Echarts图表的使用方法非常简单

首先在Echarts 的官网上有上百种的例子，都是可以免费下载的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UilwD0Dw-1660292374009)(https://img-blog.csdn.net/20170515174350339?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjg1ODQ2ODU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vmJyDF3s-1660292374009)(https://img-blog.csdn.net/20170515174402394?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjg1ODQ2ODU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]
下载对应代码之后，我们需要在页面加载对应的JS文件（按需下载，官网——下载——下载——自定义构建——选择你需要的图表，不需要下载全部JS库），页面引用方式与普通JS相同

例：<script src="echarts.min.js"></script>

和bootstrap类似，我们需要把我们下载的图表代码放到一个显示图表的容器里：

  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

销售漏斗：

每个图标里边需要修改的数据项，形状，大小，颜色都是可以修改的，对照着官网上的例子，懂一些代码的都很容易实现！！！！