本文将分别介绍以下几种帆软报表的开发技巧，以达到数分系统能够支持用户交互点击的目的： 1.帆软报表之多页签/自定义布局 2.帆软报表之下钻/筛选功能 · 下钻功能   下钻是指从一级分类切换到二级分类，从概览表切换到明细表的过程。下钻功能展示结果如下： 实现下钻功能步骤如下： （1）编辑图表选择特效 （2）超级链接中添加JavaScript （3）在JavaScript脚本中添加代码 var tabPan0=_g().getWidgetByName("tabpane0"); #tabpane0表示要跳转的页签名称 tabPan0.showCardByIndex(1); var cb_status=_g().getWidgetByName("status"); #status表示需要联动的参数 cb_status.setValue(status); （4）定义参数status中对应的数据 · 筛选功能   筛选是指依据筛选框内容，图表联动切换。筛选功能展示结果如下： 实现筛选功能步骤如下： （1）拖动下拉框按钮 （2）设置下拉框控件名称和空间值 （3）创建表格选择数据集时，SQL语句中添加与控件名称一致的参数

  由于研发资源紧张，作为产品负责人只有撸起袖子自己做一套可演示的小型数分系统。这时就需要一套报表工具、一个数据库和些许JS基础，博主选择帆软报表作为主要开发工具，基础功能在此不再赘述，大家可以自行注册观看帆软学习教程。   本文将分别介绍以下几种帆软报表的开发技巧，以达到数分系统能够支持用户交互点击的目的： 1.帆软报表之多页签/自定义布局 2.帆软报表之下钻/筛选功能 · 多页签   多页签是指同一张报表中有多个页签可以来回切换。实现多页签的目的主要在于同一个分析主题往往需要多张报表组合而成，因此这些报表需要以页签的方式分布在同一张报表中。多页签展示结果如下： 创建多页签步骤如下： （1）选择文件-新建决策报表 （2）将tab块拖拽到白色方框内，选择+按钮新增页签 · 自定义布局   自定义布局是指数据图/表及筛选框可以自定义设置大小并安放在不同的位置。创建自定义布局方式如下： （1）将绝对画布拖拽到白色方框内 （2）点击编辑，在绝对画布中就可以自由的编辑图/表了！

  经过好几次POC项目发现分类关系图展示内容具有很强的局限性，所以一直在考虑要不要将这种样式发上来。直到最近看Echart官网发现分类关系图的样式已经下架，想着还是留个纪念吧。 分类关系图代码如下所示： var size = 100; var size1 = 10; var yy = 200; var yy1 = 250; option = { title: { text: "分类关系图", top: "top", top: 10, left: "left", left: 5, textStyle: { fontSize: 24, color: '#464646' } }, tooltip: { formatter: '{b}' }, backgroundColor: '#FFFCE8', animationDuration: 1000, animationEasingUpdate: 'quinticInOut', // 图底部的图示 legend: [{ formatter: function (name) { return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…'); }, tooltip: { show: true }, selectedMode: 'false', top: 20, right: 0, textStyle: { color: '#464646' }, data: ['购车咨询', '车贷业务', '费用咨询', '车辆检测', '看车咨询', '售后服务', '车源状态', '还款咨询', '配套服务', '售后服务', '费用咨询业务'] }], series: [{ name: '知识体系', type: 'graph', layout: 'force', force: { repulsion: 80, gravity: 0.1, edgeLength: 30, layoutAnimation: true, }, // 名称及对应位置 data: [{ "name": " ", symbol: 'image://../app_themes/assets/img/1.jpg', x: 0, y: yy, "symbolSize": 150, "draggable": "true" }, { "name": "购车咨询", x: 10, y: yy, "symbolSize": size, "category": "购车咨询", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { "name": "费用计算", x: 30, y: yy, "symbolSize": size1, "category": "购车咨询", "draggable": "true" }, { x: 30, y: yy1, "name": "价格优惠", "symbolSize": size1, "category": "购车咨询", "draggable": "true" }, { x: 40, y: yy, "name": "购车流程", "symbolSize": size1, "category": "购车咨询", "draggable": "true", "value": 1 }, { x: 40, y: yy, "name": "全款买车", "symbolSize": size1, "category": "购车咨询", "draggable": "true", "value": 1 }, { x: 40, y: yy, "name": "手续办理", "symbolSize": size1, "category": "购车咨询", "draggable": "true", "value": 1 }, { x: 40, y: yy, "name": "合同签订", "symbolSize": size1, "category": "购车咨询", "draggable": "true", "value": 1 }, { x: 40, y: yy, "name": "车辆出险证明", "symbolSize": size1, "category": "购车咨询", "draggable": "true", "value": 1 }, { x: 40, y: yy, "name": "车辆落户", "symbolSize": size1, "category": "购车咨询", "draggable": "true", "value": 1 }, { x: 40, y: yy, "name": "牌照问题", "symbolSize": size1, "category": "购车咨询", "draggable": "true", "value": 1 }, { x: 50, y: yy, "name": "车贷业务", "symbolSize": size, "category": "车贷业务", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { x: 60, y: yy1, "name": "付一半产品", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 70, y: yy, "name": "指定险种", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 80, y: yy1, "name": "尾款支付", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 80, y: yy1, "name": "信审申请", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 80, y: yy1, "name": "贷款分期", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 80, y: yy1, "name": "第三方金融", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 80, y: yy1, "name": "一车一分期方案", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 80, y: yy1, "name": "提前还款", "symbolSize": size1, "category": "车贷业务", "draggable": "true" }, { x: 90, y: yy1, "name": "费用咨询", "symbolSize": size, "category": "费用咨询", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { x: 100, y: yy1, "name": "GPS费用", "symbolSize": size1, "category": "费用咨询", "draggable": "true" }, { x: 110, y: yy1, "name": "定金", "symbolSize": size1, "category": "费用咨询", "draggable": "true" }, { x: 120, y: yy1, "name": "其他费用", "symbolSize": size1, "category": "费用咨询", "draggable": "true" }, { x: 120, y: yy1, "name": "年费率", "symbolSize": size1, "category": "费用咨询", "draggable": "true" }, { x: 120, y: yy1, "name": "违约金", "symbolSize": size1, "category": "费用咨询", "draggable": "true" }, { x: 120, y: yy1, "name": "风险保证金", "symbolSize": size1, "category": "费用咨询", "draggable": "true" }, { x: 130, y: yy, "name": "车辆检测", "symbolSize": size, "category": "车辆检测", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { x: 140, y: yy, "name": "初步检测", "symbolSize": size1, "category": "车辆检测", "draggable": "true" }, { x: 150, y: yy1, "name": "检测报告", "symbolSize": size1, "category": "车辆检测", "draggable": "true" }, { x: 160, y: yy1, "name": "重大事故排查", "symbolSize": size1, "category": "车辆检测", "draggable": "true" }, { x: 160, y: yy1, "name": "158项排查", "symbolSize": size1, "category": "车辆检测", "draggable": "true" }, { x: 160, y: yy1, "name": "双重检测", "symbolSize": size1, "category": "车辆检测", "draggable": "true" }, { x: 160, y: yy1, "name": "看车咨询", "symbolSize": size, "category": "看车咨询", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { x: 170, y: yy1, "name": "看车费用", "symbolSize": size1, "category": "看车咨询", "draggable": "true" }, { x: 180, y: yy1, "name": "异地看车", "symbolSize": size1, "category": "看车咨询", "draggable": "true" }, { x: 190, y: yy1, "name": "视频看车", "symbolSize": size1, "category": "看车咨询", "draggable": "true" }, { x: 190, y: yy1, "name": "实地看车", "symbolSize": size1, "category": "看车咨询", "draggable": "true" }, { x: 190, y: yy1, "name": "预约看车", "symbolSize": size1, "category": "看车咨询", "draggable": "true" }, { x: 200, y: yy, "name": "售后服务", "symbolSize": size, "category": "售后服务", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { x: 210, y: yy1, "name": "一年两万公里保修", "symbolSize": size1, "category": "售后服务", "draggable": "true" }, { x: 220, y: yy, "name": "三十天包退", "symbolSize": size1, "category": "售后服务", "draggable": "true" }, { x: 230, y: yy1, "name": "无理由退款", "symbolSize": size1, "category": "售后服务", "draggable": "true" }, { x: 240, y: yy1, "name": "预约退款", "symbolSize": size1, "category": "售后服务", "draggable": "true" }, { "name": "车源状态", x: 250, y: yy1, "symbolSize": size, "category": "车源状态", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { "name": "个人车源", x: 260, y: yy1, "symbolSize": size1, "category": "车源状态", "draggable": "true" }, { "name": "确认在售车辆", x: 270, y: yy1, "symbolSize": size1, "category": "车源状态", "draggable": "true" }, { x: 280, y: yy1, "name": "相关业务", "symbolSize": size, "category": "相关业务", "draggable": "true", label: { normal: { position: 'inside', fontSize: 14, color: '#fff', } }, }, { "name": "委托卖车", x: 290, y: yy1, "symbolSize": size1, "category": "相关业务", "draggable": "true" }, { "name": "车辆置换", x: 290, y: yy1, "symbolSize": size1, "category": "相关业务", "draggable": "true" }, { "name": "到期还车", x: 300, y: yy1, "symbolSize": size1, "category": "相关业务", "draggable": "true" }], // 对应关系 links: [{ "source": " ", "target": "购车咨询" }, { "source": " ", "target": "车源状态" }, { "source": " ", "target": "车贷业务" }, { "source": " ", "target": "相关业务" }, { "source": " ", "target": "费用咨询" }, { "source": " ", "target": "车辆检测" }, { "source": " ", "target": "看车咨询" }, { "source": " ", "target": "售后服务" }, { "source": "购车咨询", "target": "费用计算" }, { "source": "购车咨询", "target": "价格优惠" }, { "source": "购车咨询", "target": "购车流程" }, { "source": "购车咨询", "target": "全款买车" }, { "source": "购车咨询", "target": "手续办理" }, { "source": "购车咨询", "target": "合同签订" }, { "source": "购车咨询", "target": "车辆出险证明" }, { "source": "购车咨询", "target": "车辆落户" }, { "source": "购车咨询", "target": "牌照问题" }, { "source": "费用咨询", "target": "GPS费用" }, { "source": "车贷业务", "target": "付一半产品" }, { "source": "车贷业务", "target": "指定险种" }, { "source": "车贷业务", "target": "尾款支付" }, { "source": "车贷业务", "target": "信审申请" }, { "source": "车贷业务", "target": "贷款分期" }, { "source": "车贷业务", "target": "第三方金融" }, { "source": "车贷业务", "target": "一车一分期方案" }, { "source": "车贷业务", "target": "提前还款" }, { "source": "费用咨询", "target": "定金" }, { "source": "费用咨询", "target": "其他费用" }, { "source": "费用咨询", "target": "年费率" }, { "source": "费用咨询", "target": "违约金" }, { "source": "费用咨询", "target": "风险保证金" }, { "source": "初步检测", "target": "车辆检测" }, { "source": "车辆检测", "target": "检测报告" }, { "source": "车辆检测", "target": "重大事故排查" }, { "source": "车辆检测", "target": "158项排查" }, { "source": "车辆检测", "target": "双重检测" }, { "source": "看车咨询", "target": "看车费用" }, { "source": "看车咨询", "target": "异地看车" }, { "source": "看车咨询", "target": "视频看车" }, { "source": "看车咨询", "target": "预约看车" }, { "source": "看车咨询", "target": "实地看车" }, { "source": "售后服务", "target": "一年两万公里保修" }, { "source": "售后服务", "target": "三十天包退" }, { "source": "售后服务", "target": "无理由退款" }, { "source": "售后服务", "target": "预约退款" }, { "source": "车源状态", "target": "个人车源" }, { "source": "车源状态", "target": "确认在售车辆" }, { "source": "相关业务", "target": "委托卖车" }, { "source": "相关业务", "target": "到期还车" }, { "source": "相关业务", "target": "车辆置换" }], // 大的节点名称 categories: [{ 'name': ' ' }, { 'name': '购车咨询' }, { 'name': '车源状态' }, { 'name': '车贷业务' }, { 'name': '相关业务' }, { 'name': '费用咨询' }, { 'name': '车辆检测' }, { 'name': '看车咨询' }, { 'name': '售后服务' }], focusNodeAdjacency: true, roam: true, label: { normal: { show: true, color: 'source', formatter: '{b}', fontSize: 13, fontStyle: '600', position: 'top', } }, lineStyle: { normal: { width: 2, color: 'source', curveness: 0, type: "solid" } } }] };

桑基图也称为能量分流图，是一种特定类型的流程图，图中分支的宽度对应数据量的大小，一般用来描述多分类数据之间的量级关系。 上图是Echarts官网原始的桑基图，下图是修改后的桑基图 桑基图修改点如下： (1) 修改分类数据对应关系； (2) 修改分类数据量大小； 注：为缩小篇幅，后续代码块全部为联网读写方式，大家可以试着将其修改成本地读写方式。 修改后桑基图代码如下所示： var data1 = "{\"nodes\":[{\"node\":0,\"name\":\"质量保证\"},{\"node\":1,\"name\":\"车源状态\"},{\"node\":2,\"name\":\"售后服务\"},{\"node\":3,\"name\":\"车况查询\"},{\"node\":4,\"name\":\"车辆检测\"},{\"node\":5,\"name\":\"车辆来源\"},{\"node\":6,\"name\":\"确认在售车辆\"},{\"node\":7,\"name\":\"购车发票\"},{\"node\":8,\"name\":\"退款问题\"},{\"node\":9,\"name\":\"车况咨询-年检到期日\"},{\"node\":10,\"name\":\"车况咨询-保险到期日\"},{\"node\":11,\"name\":\"车况咨询-维修保养记录\"},{\"node\":12,\"name\":\"车辆检测-一次检测\"},{\"node\":13,\"name\":\"车辆检测-二次检测\"},{\"node\":14,\"name\":\"车辆检测-检测报告\"},{\"node\":15,\"name\":\"车辆检测-重大事故排查\"},{\"node\":16,\"name\":\"车源状态-车辆来源\"},{\"node\":17,\"name\":\"车源状态-个人车源\"},{\"node\":18,\"name\":\"车源状态-车辆下架\"},{\"node\":19,\"name\":\"车源状态-确认在售车辆\"},{\"node\":20,\"name\":\"售后服务-购车发票\"},{\"node\":21,\"name\":\"售后服务-三十天包退\"},{\"node\":22,\"name\":\"售后服务-无理由退款\"},{\"node\":23,\"name\":\"售后服务-预约退款\"}],\"links\":[{\"source\":0,\"target\":3,\"value\":1000},{\"source\":0,\"target\":4,\"value\":2000},{\"source\":1,\"target\":5,\"value\":1000},{\"source\":1,\"target\":6,\"value\":2000},{\"source\":2,\"target\":7,\"value\":500},{\"source\":2,\"target\":8,\"value\":2000},{\"source\":3,\"target\":9,\"value\":500},{\"source\":3,\"target\":10,\"value\":400},{\"source\":3,\"target\":11,\"value\":450},{\"source\":4,\"target\":12,\"value\":500},{\"source\":4,\"target\":13,\"value\":150},{\"source\":4,\"target\":14,\"value\":500},{\"source\":4,\"target\":15,\"value\":500},{\"source\":5,\"target\":16,\"value\":500},{\"source\":5,\"target\":17,\"value\":350},{\"source\":6,\"target\":18,\"value\":750},{\"source\":6,\"target\":19,\"value\":1000},{\"source\":7,\"target\":20,\"value\":400},{\"source\":8,\"target\":21,\"value\":700},{\"source\":8,\"target\":22,\"value\":400},{\"source\":8,\"target\":23,\"value\":600}]}"; var data=eval('(' + data1 + ')'); myChart.setOption(option = { backgroundColor: '#FFFFFF', title: { text: 'Sankey Diagram' }, tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'sankey', layout: 'none', data: data.nodes, links: data.links, color: [ '#30588C', '#77C3F2', '#FAA805' ], itemStyle: { normal: { borderWidth: 1, borderColor: '#aaa' } }, lineStyle: { normal: { color: 'source', curveness: 0.7 } } } ] });

现阶段自然语言处理NLP领域，最常见的问题莫过于获取用户心声，即用户在交流内容过程中，他们应答的一些关键词或者短句。这些相互关联的信息点可以映射出整段文本客户的应答内容，但这些信息点之间往往具有多条连接属性，因此需要绘制网状的关联图进行描述。 上图是Echarts官网原始的网状关联图，下图是修改后的网状关联图 网状关联图修改点如下： (1) 修改圆圈颜色和大小； (2) 在连接线上添加概率值； 注：为缩小篇幅，后续代码块全部为联网读写方式，大家可以试着将其修改成本地读写方式。 修改后关联图代码如下所示： option = { title: { text: '网状关联图' }, tooltip: { formatter: function(x) { return x.data.des; } }, series: [{ type: 'graph', layout: 'force', symbolSize: 80, roam: true, edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 10], edgeLabel: { normal: { textStyle: { fontSize: 20 } } }, force: { repulsion: 2500, edgeLength: [10, 50] }, draggable: true, itemStyle: { normal: { color: '#4b565b' } }, lineStyle: { normal: { width: 2, color: '#4b565b' } }, edgeLabel: { normal: { show: true, formatter: function(x) { return x.data.name; } } }, label: { normal: { show: true, textStyle: {} } }, data: [{ name: '少送', symbolSize: 90, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '投诉', symbolSize: 70, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '退款', symbolSize: 70, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '补上', symbolSize: 50, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '联系不上', symbolSize: 70, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '未送达', symbolSize: 90, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '骑手', symbolSize: 50, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '商家', symbolSize: 50, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '催餐', symbolSize: 70, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '补偿', symbolSize: 50, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '预计送达', symbolSize: 50, itemStyle: { normal: { color: '#ffa07a' } } } ,{ name: '态度不好', symbolSize: 70, itemStyle: { normal: { color: '#ffa07a' } } } ], links: [{ source: '少送', target: '投诉', name: '14.83%', },{ source: '未送达', target: '催餐', name: '40.44%', },{ source: '催餐', target: '准时保', name: '1.64%', },{ source: '催餐', target: '退款', name: '20.51%', },{ source: '催餐', target: '投诉', name: '23.58%', },{ source: '少送', target: '退款', name: '50.44%', },{ source: '少送', target: '补上', name: '1.14%', },{ source: '少送', target: '联系不上', name: '1.52%', },{ source: '少送', target: '态度不好', name: '1.26%', },{ source: '投诉', target: '态度不好', name: '31.33%', },{ source: '态度不好', target: '退款', name: '1.32%', },{ source: '态度不好', target: '商家', name: '30.54%', },{ source: '态度不好', target: '骑手', name: '60.32%', },{ source: '联系不上', target: '商家', name: '25.33%', },{ source: '联系不上', target: '骑手', name: '62.32%', },{ source: '催餐', target: '退款', name: '12.32%', },{ source: '退款', target: '补偿', name: '3.74%', },{ source: '未送达', target: '预计送达', name: '6.83%', },{ source: '少送', target: '未送达', name: '', }, ] }] };

最近经常遇到同学询问协同过滤的算法，但协同过滤的结果出来后大家有想过如何进行展示么？这时，我们便可以用到环形关联图。 上图是Echarts官网原始的环形关联图，下图是修改后的环形关联图 环形关联图修改点如下： (1) 修改组别颜色； (2) 修改不同类别间对应关系及概率值； 注：为缩小篇幅，后续代码块全部为联网读写方式，大家可以试着将其修改成本地读写方式。 修改后关联图代码如下所示： var option = { animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [{ type: 'graph', tooltip: {}, ribbonType: true, layout: 'circular', circular: { rotateLabel: true }, symbolSize: 30, roam: true, focusNodeAdjacency: true, label: { normal: { position: 'center', fontWeight: 'bold', formatter: '{b}', normal: { textStyle: { fontFamily: '宋体' } } } }, edgeSymbol: ['circle'], edgeSymbolSize: [4, 10], edgeLabel: { normal: { textStyle: { fontSize: 13, fontWeight: 'bold', fontFamily: '宋体' } } }, // 外部字体样式设置 itemStyle: { normal: { label: { rotate: true, show: true, textStyle: { color: '#333', fontWeight: 'bold' } }, color: ["#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7"] }, emphasis: { label: { show: true } } }, // 类别定义，保证类别没有相同的名称 data: [{ name: '购车咨询-车辆购置城市', //类别名称 itemStyle: { normal: { color: '#0099cc' //类别颜色 } } }, { name: '购车咨询-意向车辆确认', itemStyle: { normal: { color: '#0099cc' } } }, { name: '购车咨询-关注车型', itemStyle: { normal: { color: '#0099cc' } } }, { name: '购车咨询-关注品牌', itemStyle: { normal: { color: '#0099cc' } } }, { name: '购车咨询-价格优惠', itemStyle: { normal: { color: '#00ffcc' } } }, { name: '购车咨询-车辆过户', itemStyle: { normal: { color: '#00ffcc' } } }, { name: '购车咨询-牌照问题', itemStyle: { normal: { color: '#00ffcc' } } }, { name: '购车咨询-提车流程', itemStyle: { normal: { color: '#00ffcc' } } }, { name: '车贷业务-首付款', itemStyle: { normal: { color: '#009933' } } }, { name: '车贷业务-贷款分期', itemStyle: { normal: { color: '#009933' } } }, { name: '看车咨询-预约看车', itemStyle: { normal: { color: '#ffcc00' } } }, { name: '看车咨询-视频看车', itemStyle: { normal: { color: '#ffcc00' } } }, { name: '看车咨询-实地看车', itemStyle: { normal: { color: '#ffcc00' } } }, { name: '车辆检测-质量保证', itemStyle: { normal: { color: '#ff3300' } } }, { name: '车辆检测-检测报告', itemStyle: { normal: { color: '#ff3300' } } }, { name: '车源状态-确认在售车辆', itemStyle: { normal: { color: '#000099' } } }, { name: '购车咨询-全国直购', itemStyle: { normal: { color: '#0099cc' } } }], // 类别关联对应，保证关联的类别在上述模块中定义过 links: [{ source: '购车咨询-车辆购置城市', // 基础点 target: '购车咨询-意向车辆确认', // 关联点 name: '2.38%', // 关联概率值 tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, // 关联线样式设置 lineStyle: { normal: { width: 1, // 线的粗细 curveness: 0.2, // 线的弧度 color: '#0099cc', // 线的颜色 } } }, { source: '购车咨询-车辆购置城市', target: '购车咨询-全国直购', name: '2.38%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-车辆购置城市', target: '购车咨询-关注品牌', name: '0.40%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-车辆购置城市', target: '购车咨询-价格优惠', name: '0.66%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-车辆购置城市', target: '车贷业务-贷款分期', name: '0.66%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '车贷业务-贷款分期', target: '看车咨询-预约看车', name: '0.53%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#009933' } } }, { source: '车贷业务-贷款分期', target: '购车咨询-车辆过户', name: '0.53%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#009933' } } }, { source: '车贷业务-贷款分期', target: '车源状态-确认在售车辆', name: '0.40%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#009933' } } }, { source: '车贷业务-贷款分期', target: '看车咨询-预约看车', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#009933' } } }, { source: '车贷业务-贷款分期', target: '购车咨询-牌照问题', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#009933' } } }, { source: '购车咨询-意向车辆确认', target: '看车咨询-预约看车', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-车辆购置城市', target: '购车咨询-意向车辆确认', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-意向车辆确认', target: '看车咨询-实地看车', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-意向车辆确认', target: '车源状态-确认在售车辆', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '车辆检测-检测报告', target: '车辆检测-质量保证', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#ff3300' } } }, { source: '购车咨询-全国直购', target: '购车咨询-提车流程', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-全国直购', target: '购车咨询-车辆落户', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-全国直购', target: '车辆检测-质量保证', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-全国直购', target: '购车咨询-关注车型', name: '0.13%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } }, { source: '购车咨询-意向车辆确认', target: '购车咨询-全国直购', name: '0.40%', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 1, curveness: 0.2, color: '#0099cc' } } } ] }] };

接下来我们再来试着做一个嵌套饼图，单层饼图能够反映各类数据之间的比例关系，但日常业务中往往会遇到每个类别中再嵌套多个类别的情况，因此我们需要借助嵌套饼图来进行展示 上图是Echarts官网原始的嵌套饼图，下图是修改后的嵌套饼图 嵌套饼图修改点如下： (1) 修改背景颜色； (2) 修改数据标签及标签对应的值； 注：为缩小篇幅，后续代码块全部为联网读写方式，大家可以试着将其修改成本地读写方式。 修改后嵌套饼图代码如下所示： option = { // 标题设置 title: { text: "嵌套饼图", subtext: "", left: "center", textStyle: { color: "BLACK", fontSize: 24 }, }, backgroundColor: new echarts.graphic.RadialGradient(0, 0, 1, [{ offset: 0, color: '#ffffff' }, { offset: 1, color: '#ffffff' }]), tooltip: { trigger: 'item', formatter: "{a} <br/>{b}:({d}%)" }, series: [{ // 设置一级指标（内圈） name: '一级指标', type: 'pie', selectedMode: 'single', radius: [0, '30%'], // 可以设置内圈的大小 label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, // 设置内圈的类别和数量，与中圈、外圈一一对应 data: [ {value:4379,name:'菜品质量_数量'}, {value:8226,name:'催单问题'}, {value:7549,name:'退款问题'}] }, { // 设置二级指标（中圈） name: '二级指标', type: 'pie', radius: ['32%', '60%'], // 设置中圈的大小 label: { normal: { position: 'inner' } }, // 设置中圈的类别和数量，与内圈、外圈一一对应 data: [ {value:44,name:'菜品没有餐具'}, {value:548,name:'菜品撒了/包装损坏'}, {value:1326,name:'菜品少送'}, {value:686,name:'菜品送错'}, {value:84,name:'菜品未按备注制作'}, {value:222,name:'菜品与图片不符'}, {value:1468,name:'菜品质量问题'}, {value:1,name:'外卖菜品比到店贵'}, {value:3006,name:'餐未到显示已送达'}, {value:843,name:'骑手长时间未接单'}, {value:466,name:'骑手长时间未取餐'}, {value:3911,name:'用户催单'}, {value:500,name:'查询退款进度'}, {value:514,name:'订单被取消'}, {value:57,name:'骑手要求用户退款'}, {value:139,name:'取消退款申请'}, {value:106,name:'商家要求用户退款'}, {value:2973,name:'退款申请被拒绝'}, {value:921,name:'退款申诉被拒绝'}, {value:211,name:'退款审核'}, {value:375,name:'我要部分退款'}, {value:1728,name:'我要全部退款'}, {value:25,name:'咨询原路退失败/提现失败'}] }, { // 设置三级指标（外圈） name: '三级指标', type: 'pie', radius: ['62%', '70%'], // 设置外圈的大小 label: { normal: { position: 'outer' } }, // 设置外圈的类别和数量，与内圈、中圈一一对应 data: [ {value:35,name:'骑手配送'}, {value:9,name:'商家配送'}, {value:482,name:'骑手配送'}, {value:66,name:'商家配送'}, {value:267,name:'骑手原因'}, {value:173,name:'商家配送'}, {value:886,name:'商家原因'}, {value:337,name:'骑手原因'}, {value:22,name:'商家配送'}, {value:327,name:'商家原因'}, {value:84,name:'菜品未按备注制作'}, {value:222,name:'菜品与图片不符'}, {value:225,name:'变质有异味'}, {value:533,name:'口味不佳'}, {value:64,name:'食用后身体不适'}, {value:640,name:'有异物'}, {value:6,name:'住院'}, {value:1,name:'外卖菜品比到店贵'}, {value:2885,name:'骑手配送'}, {value:121,name:'商家配送'}, {value:843,name:'骑手长时间未接单'}, {value:466,name:'骑手长时间未取餐'}, {value:896,name:'美团配送'}, {value:1104,name:'骑手配送'}, {value:1152,name:'商家配送'}, {value:759,name:'要求重新配送'}, {value:78,name:'确认退款'}, {value:247,name:'申请退款'}, {value:175,name:'退款成功'}, {value:20,name:'风控原因'}, {value:494,name:'其他'}, {value:57,name:'骑手要求用户退款'}, {value:82,name:'申退'}, {value:57,name:'退款成功'}, {value:106,name:'商家要求用户退款'}, {value:2973,name:'退款申请被拒绝'}, {value:921,name:'退款申诉被拒绝'}, {value:211,name:'退款审核'}, {value:77,name:'商家无法提供菜品'}, {value:298,name:'少送错送'}, {value:607,name:'配送慢'}, {value:11,name:'配送员交通事故'}, {value:102,name:'骑手长时间未取餐'}, {value:289,name:'商家出餐慢'}, {value:206,name:'商家出餐配送慢'}, {value:426,name:'用户原因'}, {value:87,name:'长时间无骑手接单'}, {value:21,name:'非风控原因'}, {value:4,name:'风控原因'}] }] }; 嵌套饼图修改颜色代码如下所示： option = { // 标题设置 title: { text: "嵌套饼图", subtext: "", left: "center", textStyle: { color: "BLACK", fontSize: 24 }, }, backgroundColor: new echarts.graphic.RadialGradient(0, 0, 1, [{ offset: 0, color: '#ffffff' }, { offset: 1, color: '#ffffff' }]), tooltip: { trigger: 'item', formatter: "{a} <br/>{b}:({d}%)" }, series: [{ // 设置一级指标（内圈） name: '一级指标', type: 'pie', selectedMode: 'single', radius: [0, '30%'], // 可以设置内圈的大小 label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, // 设置内圈的类别和数量，与中圈、外圈一一对应 data: [{ value: 666, name: '本人' }, { value: 2326, name: '三方' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { color: function(params) { //自定义颜色 var colorList = [ '#478989', '#3D7084' ]; return colorList[params.dataIndex] } } } }, { // 设置二级指标（中圈） name: '二级指标', type: 'pie', radius: ['40%', '60%'], // 设置中圈的大小 label: { normal: { position: 'outter' } }, // 设置中圈的类别和数量，与内圈、外圈一一对应 data: [{ value: 38, name: '恶意拖欠' }, { value: 9, name: '费用服务争议' }, { value: 619, name: '资金还款问题' }, { value: 655, name: '不认识' }, { value: 718, name: '认识不配合' }, { value: 953, name: '愿意转告' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { color: function(params) { //自定义颜色 var colorList = [ '#99CC99', '#66CCCC', '#CCFFFF', '#336666', '#3399CC', '#669999' ]; return colorList[params.dataIndex] } } } }] };

我们先来练习一个最简单的柱状图，柱状图一般适用于离散型数据，通过比较柱子高低辨别各类别数据大小及差异 上图是Echarts官网原始的多彩柱状图，下图是修改后的柱状图 柱状图修改点如下： (1) 修改背景颜色； (2) 添加一条柱子； (3) 修改柱子显示的值； 注：为缩小篇幅，后续代码块全部为联网读写方式，大家可以试着将其修改成本地读写方式。 修改后柱状图代码如下所示： // 输入数据，数据位置、类别位置与颜色位置一一对应 var value = [100,200,300,400,500,600,700,800,900,1000,1100,1200]; option = { backgroundColor: '#FFFFFF', //修改背景颜色 title: { text: '多彩柱状图', x: 'center', textStyle: { color: 'black', //修改字体颜色 fontSize: 25, //修改字体大小 } }, tooltip: { trigger: 'item' }, dataRange: { show: false, min : 0, max : 12, calculable : true, color: ['#d94e5d','#eac736','#50a3ba'], y:'center', }, xAxis: [ { type: 'category', show: false, // 修改分类柱子名称 data: ['类别L', '类别K', '类别J', '类别I', '类别H', '类别G', '类别F', '类别E', '类别D', '类别C', '类别B', '类别A'] } ], yAxis: [ { type: 'value', show: false } ], series: [ { name: '类别总数/位置', type: 'bar', barGap: 0.1, barCategoryGap: 0.01, itemStyle: { normal: { color: function(params) { // 颜色位置与柱子类别位置一一对应 var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0','#ff0000' ]; return colorList[params.dataIndex] }, label: { show: true, position: 'top', // 数值显示位置 // 修改柱子显示的值 formatter: function(obj){ return obj.name +"\n"+ obj.value.toString().split(",")[1] } }, // 柱子阴影显示 shadowBlur: 80, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, data: value.map(function (a, idx) { return [idx, a , idx]; }) } ] };

  最近发现许多同学对数据可视化都非常感兴趣，遂单独开辟了这个专题。类似于tableau之类的可视化工具虽然能够做出非常精美的图表，但其所生成的图表只能应用在数据分析报告中。若期望自己所做出的图表具有高度的灵活性，并且能够和程序员无障碍沟通，我们便需要运用JavaScript、HTML5和PHP等前端知识。   作为数据分析师，花太多精力去学习前端知识有些捡芝麻丢西瓜。那么如何快速高效的利用JS汇编各种数据可视化图表呢？这时，我们便可以借助JS封装好的Echarts库对数据进行可视化展示Echarts官方示例。本博客中会改写几套常用的数据可视化图形，例如多彩柱状图、多层嵌套饼图等，并尽量加入清晰的注释便于大家理解。   利用Echarts绘制第一张图形之前，我们需要了解Echarts一共提供2种读写方式：一种是联网状态下直接利用官网的编译器进行读写操作；另一种是脱机状态下本地进行读写操作。（强烈建议学会第二种读写方式） · 联网读写方式   联网的读写方式非常简单，直接将改写好的代码粘贴到Echarts官网自带的编译器刷新就OK了！如下图是官网原始的堆叠面积图 试试将修改后的代码复制到粘黏框并点击刷新按钮 option = { title: { text: '堆叠区域图Demo' }, tooltip : { trigger: 'axis' }, legend: { data:['类别一','类别二','类别三'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'类别一', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'类别二', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'类别三', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[150, 232, 201, 154, 190, 330, 410] }, ] }; · 本地读写方式 1.下载Echarts本地读写包：selfEchart.rar下载路径(右键点击目标另存为)，下载完成后解压selfEchart包，解压后结果如下： 2.在解压后的selfEchart中，编辑echartTest.html文件，将下述代码全部替换到echartTest.html中，然后双击查看echartTest.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>本地页面</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Echart 文件系统配置 --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <script src="echart/echarts.min.js" />" ></script> <script src="bootstrap/js/bootstrap.min.js" />" ></script> <script src = "jquery/jquery.min.js" />" ></script> </head> <body> <!-- Echart 页面大小--> <div style="width:80%;border:1px #777 solid;height:550px;" id="testdiv"> </div> <!-- Echart 代码块编辑 --> <script> $(function () { var myChart= echarts.init(document.getElementById('testdiv')); <!-- Echart 联网读写方式代码块 --> option = { title: { text: '堆叠区域图' }, tooltip : { trigger: 'axis' }, legend: { data:['类别一','类别二','类别三'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'类别一', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'类别二', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'类别三', type:'line', stack: '总量', areaStyle: {normal: {}}, data:[150, 232, 201, 154, 190, 330, 410] }, ] }; myChart.setOption(option); }) </script> </body> </html>