option = { backgroundColor: '#000', color: ["#00fecc", "#571cf8", "#1841ec", "#00d7fe", '#fc6c17', '#01fda3', '#f8ea41 ', '#a12fb2', '#2fb23b', '#fb4955', '#ddfe01', '#fec501', '#fea575', '#2fb23b', '#fa53bd', '#ddfe01', '#b1b0b0'], title: { text: '电子支付--商户交易金额', left: '50%', textAlign: 'center', textStyle: { color: "#fff", fontWeight: 'normal', fontFamily: '宋体' } }, tooltip: { trigger: 'item', formatter: "{a}
{b} : {c} ({d}%)" }, legend: [{ orient: 'vertical', top: 'center', right: 240, data: ['财付通', '支付宝', '中国银联', '上海陆家嘴', '百度钱包', '汇添富基金', '中金支付', '宝付', '', ], itemGap: 12, //图例每项之间的间隔 itemWidth: 10, itemHeight: 10, textStyle: { color: "#fff", fontSize: 10, fontWeight: 'normal', fontFamily: '微软雅黑', }, formatter: function(e) { var total = 0 for (var i = 0; i < option.series[0].data.length; i++) { total += option.series[0].data[i].value } for (i = 0; i < option.series[0].data.length; i++) { var ePercent = (option.series[0].data[i].value / total * 100).toFixed(1) + '%' if (option.series[0].data[i].name === e) { return e + ' ' + ePercent } } } }, { orient: 'vertical', top: 'center', right: 90, data: ['通联支付', '汇付天下', '京东', '联动优势', '快钱', '易宝支付', '国XXX', '上海银联电子支付', '', ], itemGap: 12, //图例每项之间的间隔 itemWidth: 10, itemHeight: 10, textStyle: { color: "#fff", fontSize: 10, fontWeight: 'normal', }, formatter: function(e) { var total = 0 for (var i = 0; i < option.series[0].data.length; i++) { total += option.series[0].data[i].value } for (i = 0; i < option.series[0].data.length; i++) { var ePercent = (option.series[0].data[i].value / total * 100).toFixed(1) + '%' if (option.series[0].data[i].name === e) { return e + ' ' + ePercent } } } }, ], series: [{ name: '访问来源', type: 'pie', radius: ['25%', '50%'], center: ['30%', '55%'], avoidLabelOverlap: true, ////是否启用防止标签重叠 stillShowZeroSum: false, data: [{ "value": 53.6, "name": "财付通", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 40.3, "name": "支付宝", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 1.9, "name": "中国银联", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <=1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 1.5, "name": "上海陆家嘴", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.6, "name": "百度钱包", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.6, "name": "汇添富基金", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.6, "name": "中金支付", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.3, "name": "宝付", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.1, "name": "通联支付", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.1, "name": "汇付天下", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.1, "name": "京东", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.1, "name": "联动优势", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.1, "name": "快钱", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.0, "name": "易宝支付", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.0, "name": "国XXX", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 1) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, }, { "value": 0.0, "name": "上海银联电子支付", itemStyle: { normal: { label: { show: true, formatter: function(params, option) { if (params.data.value <= 0) { // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }, } ], labelLine: { normal: { lineStyle: { color: "#ccc" }, smooth: 0.2, length: 10, length2: 20 } }, itemStyle: { normal: { label: { formatter: '{b} {d}%', textStyle: { color: "#fff", fontSize: 10, } } } } }] };

Echarts在线免费图表