时隔一个月再次更新。。。
不过好像没有人看。。。
不过还是要更下去。。。
——————————————————————————————————————
产品设计的CRM系统中有一项 销售漏斗的功能，如图所示：
功能要求随着销售的销售进度以及客户的汇款情况，漏斗容器跟着变化
本来是用CSS3写了一个“假”的漏斗，漏斗形状和数据并不能跟着变化
此时部门老大（名张杰，没错，就是谢娜老公那个张杰）推荐了一个插件，甚是好用——Echarts图表
介绍：
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。【这段为复制的定义。。zzz】
图表类型：折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭等等。
使用方法
Echarts图表的使用方法非常简单
首先在Echarts 的官网上有上百种的例子，都是可以免费下载的
下载对应代码之后，我们需要在页面加载对应的JS文件（按需下载，官网——下载——下载——自定义构建——选择你需要的图表，不需要下载全部JS库），页面引用方式与普通JS相同
例：<script src="echarts.min.js"></script>
和bootstrap类似，我们需要把我们下载的图表代码放到一个显示图表的容器里：
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>销售漏斗：
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['潜在客户 100单', '跟进中 80单', '售前提案 35单', '签单回款 30单', ]
},
calculable: true,
series: [{
name: '漏斗图',
type: 'funnel',
left: '0',
top: '0',
//x2: 80,
width: '100%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
normal: {
show: true,
position: 'inside'
},
emphasis: {
textStyle: {
fontSize: 14
}
}
},
labelLine: {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1
}
},
data: [
{ value: 70, name: '' ,
itemStyle: {
normal: {
color: 'lightgreen'
}}},
{ value: 80, name: '' ,
itemStyle: {
normal: {
color: 'lightsalmon'
}}},
{ value: 90, name: '' ,
itemStyle: {
normal: {
color: 'lightblue'
}}},
{ value: 100, name: '',
itemStyle: {
normal: {
color: 'lightcoral'
}}}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
<div class="col-xs-5" style="height: 300px;">
<div class="loudou"><span class="index_part3font">潜在客户 </span> <span class="index_part3number"> 100单</span></div>
<div class="loudou"><span class="index_part3font">跟进中 </span> <span class="index_part3number"> 80单</span></div>
<div class="loudou"><span class="index_part3font">售前提案</span> <span class="index_part3number"> 35单</span></div>
<div class="loudou"><span class="index_part3font">签单回款</span> <span class="index_part3number"> 30单</span></div>
</div>
</div>
</div>
每个图标里边需要修改的数据项，形状，大小，颜色都是可以修改的，对照着官网上的例子，懂一些代码的都很容易实现！！！！