echarts二次封装，适用于大屏，动态配置大屏，迁徙图，热力图，盒须图，桑基图等等

关于echarts的二次封装，那走即用
- echarts所需数据
- 调用方法
- js代码
- 地图注意事项
- 迁徙图展示数据格式
- 地图数据

关于echarts的二次封装，那走即用

echarts所需数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>echarts配置规则</title><link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css"><script src="../lib/layui-v2.5.5/layui.js"></script>
</head><body><div class="layui-collapse"><div class="layui-colla-item"><h2 class="layui-colla-title">饼状图 Pie 圆环饼状图（oPie）</h2><div class="layui-colla-content">普通饼状图（Pie，oPie）：[{ "name": "名字", "value": "数值"}]<hr>例如：[{ "name": "Firefox", "value": 45 },{ "name": "IE", "value": 26.8 },{ "name": "Safari", "value": 8.5 }]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">柱状图 Bar（侧向柱状图yBar）（百分比堆积图pBar） (对比柱状图sBar)</h2><div class="layui-colla-content">普通柱状图Bar（侧向yBar）：[{ "group": "组名", "name": "名字", "value": "数值", "title": "百分比"}]<hr>例如：[{ "group": "Beijing", "name": "1月", "value": 10 ,"title":"10"},{ "group": "Beijing", "name": "2月", "value": 15 ,"title":"20"},{ "group": "Tokyo", "name": "1月", "value": 12 ,"title":"10"},{ "group": "Tokyo", "name": "2月", "value": 15 ,"title":"30"}]<hr class="layui-bg-orange">堆积柱状图Bar（侧向yBar）：[{ "group": "组名", "name": "名字", "value": "数值", "stack": "堆积类"}]<hr>例如：[{ "group": "Beijing", "name": "1月", "value": 10 , "stack": "天气" },{ "group": "Beijing", "name": "2月", "value": 15 , "stack": "天气"},{ "group": "Tokyo", "name": "1月", "value": 12 , "stack": "天气"},{ "group": "Tokyo", "name": "2月", "value": 15 , "stack": "天气"}]<hr class="layui-bg-orange">百分比堆积柱状图（pBar）：[{ "group": "组名", "name": "名字", "value": "数值" }]<hr>例如：[{ "group": "Beijing", "name": "1月", "value": 10},{ "group": "Beijing", "name": "2月", "value": 15},{ "group": "Tokyo", "name": "1月", "value": 12},{ "group": "Tokyo", "name": "2月", "value": 15}]<hr class="layui-bg-orange">对比柱状图 (sBar)： [{ "name": "当前条名称", xName: "对比的参数名一", xValue: 对比的参数值一, yName: "对比的参数名二", yValue: 对比的参数值二 }]<hr>例如：[{ "name": "a医院", "xName": "男", "xValue": 20, "yName": "女", "yValue": 30 },  { "name": "b医院", "xName": "男", "xValue": 120, "yName": "女", "yValue": 130 }]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">折线图 Line</h2><div class="layui-colla-content">普通折线图：[{ "group": "组名", "name": "名字", "value": "数值", "title": "百分比" }]<hr>例如：[{ "group": "Beijing", "name": "1月", "value": 10 ,"title":"12"},{ "group": "Beijing", "name": "2月", "value": 15 ,"title":"55"},{ "group": "Tokyo", "name": "1月", "value": 12 ,"title":"10"},{ "group": "Tokyo", "name": "2月", "value": 15 ,"title":"30"}]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">雷达图 Radar</h2><div class="layui-colla-content">普通雷达图：[{ "group": "组名", "name": "名字", "value": "数值", "max": "对应项的最大值（可不填）" }]<hr>例如：[{ "group": "预算分配", "name": "销售", "max": 6500, "value": 6000 },{ "group": "预算分配", "name": "管理", "max": 19000, "value": 16000 },{ "group": "预算分配", "name": "信息技术", "max": 19000, "value": 16000 }]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">散点图 Scatter</h2><div class="layui-colla-content">普通散点图：[{ "group": "组名", "name": "x坐标值", "value": "y坐标值", title: "对应点的名称", size: "对应点大小（不传默认18）"}]<hr>例如：[{ "group": "2015", "name": 5000, "value": 6000 , "title": "中国" , "size":"20"},{ "group": "2016", "name": 6000, "value": 7000 , "title": "中国"},{ "group": "2015", "name": 4000, "value": 5000 , "title": "日本"},{ "group": "2016", "name": 5000, "value": 6000 , "title": "日本"},]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">Map</h2><div class="layui-colla-content">Map：[{orgCode: "区域编码", orgName: "区域名称"}]<hr>例：[{"orgCode": "411600", "orgName": "周口市"}]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">Map</h2><div class="layui-colla-content">qxMap：[{orgCode: "区域编码", orgName: "区域名称"}]<hr>例：[{"orgCode": "411600", "orgName": "周口市"}]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">漏斗图（Funnel）金字塔（Pyramid）</h2><div class="layui-colla-content">漏斗图（Funnel，Pyramid）：[{ "name": "名字", "value": "数值"}]<hr>例如：[{ "name": "Firefox", "value": 45 },{ "name": "IE", "value": 26 },{ "name": "Safari", "value": 8 }]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">仪表盘 Gauge</h2><div class="layui-colla-content">仪表盘 （Gauge）：{ title : "鼠标经过时展示文字", name:"仪表盘上文字","value":"指针值",colors:[表盘颜色]}<hr>例：{title:"河南省",name:"某疾病死亡率","value":0.8,"colors":[[0.2,"green"],[0.8,"#f00"],[1,"#000"]]}</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">盒须图 Boxplot</h2><div class="layui-colla-content">盒须图:{"q":[["最小值","5","19","43","最大值"],["0","5.0","15","51.0","86"]],"names":["男","女"]}<hr>例如：{"q":[["1","5","19","43","68"],["0","5.0","15","51.0","86"]],"names":["男","女"]}</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">桑基图 Sankey</h2><div class="layui-colla-content">桑基图:[{source:'源',target:'目标',value:'值'}]<hr>例如：[{"source":"aaa","target":"bbb","value":"22"}]</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">纯文本（大屏） none</h2><div class="layui-colla-content">纯文本：[{ "名": "值"}]<hr>例如：[{ "a": "2015", "b": 5000, "c": 6000 , "d": "200" , "e":"20"}]</div></div></div></body>
<script>layui.use("element", function () {var element = layui.element;//…});
</script></html>

调用方法

var opt = MyECharts.ChartOptionTemplates.Scatter('', '', res, { color: '#B5C9FF', splitLine: { show: false, lineStyle: { type: 'dotted' } } },data.report.alarm||false);
MyECharts.RenderChart(opt, echartid);

js代码

//判断数组中是否包含某个元素
Array.prototype.contains = function (obj) {var i = this.length;while (i--) {if (this[i] === obj) {return true;}}return false;
}
var mrStyle2 = JSON.stringify({color: '#333',fontSize: 10,yAxisLine: true,xAxisLine: true,splitLine: {show: true,lineStyle: {width: 1,type: 'solid'}},label: {show: false},
})
var MyECharts = {//格式化数据ChartDataFormate: {FormateNOGroupData: function (data) {var categories = [];var datas = [];for (var i = 0; i < data.length; i++) {categories.push(data[i].name || '');temp_series = { value: data[i].value || 0, name: data[i].name };datas.push(temp_series);}return { category: categories, data: datas };},//处理分组数据，数据格式：group：XXX，name：XXX，value：XXX用于折线图、柱形图（分组，堆积）//参数：数据、展示类型FormatGroupData: function (data, type, position, alarm) {var groups = new Array();var names = new Array();var stack = new Array();var max = undefined;for (var i = 0; i < data.length; i++) {if (data[i].group && !groups.contains(data[i].group)) {groups.push(data[i].group);stack.push(data[i].stack || false);}if (data[i].name && !names.contains(data[i].name)) {names.push(data[i].name);}}var series = new Array(groups.length);for (var i = 0; i < groups.length; i++) {var temp_series = {};var temp_data = new Array(names.length);for (var a = 0; a < names.length; a++) {temp_data.push({ value: 0 })}var markline = falsefor (var j = 0; j < data.length; j++) {for (var k = 0; k < names.length; k++)if (groups[i] == data[j].group && data[j].name == names[k]) {temp_data[k] = { value: Number(data[j].value) };if (String(data[j].title) && String(data[j].title) != 'undefined' && String(data[j].title) != 'null') {// max = 100temp_data[k] = { value: data[j].title, p: data[j].value, ORGCODE: data[j].ORGCODE };if (type != 'line') {temp_data[k].label = {show: true,position: position,formatter: String(data[j].title) + '%',textStyle: {fontSize: 8}}}}if (alarm && markline == false) {markline = {symbol: 'none',label: {show: true,formatter: '{b}'},lineStyle: {width: 1,color: '#FFA341'},data: [{ name: '预警值', yAxis: alarm }]}}}}temp_series = { name: groups[i], type: type, data: temp_data, stack: stack[i] };if (markline) {temp_series.markLine = markline}series[i] = temp_series;}console.log({ legend: groups, category: names, series: series, max: max })return { legend: groups, category: names, series: series, max: max };},FormatRandarData: function (data) {var groups = new Array();//["预算分配","实际开销"]var names = new Array();//["销售", "管理", "信息技术"]var max = new Array();//[{name:'销售',max:'123'},{name:'管理',max:'123'},{name:'管理',max:'123'}]for (var i = 0; i < data.length; i++) {if (data[i].group && !groups.contains(data[i].group)) {groups.push(data[i].group);}if (data[i].name && !names.contains(data[i].name)) {names.push(data[i].name);max.push({ name: data[i].name, max: data[i].max || 1 })}}$(data).each(function (index, item) {$(max).each(function (i, t) {if (t.name == item.name) {if (t.max < item.value) {t.max = item.value}}})})var series = new Array(groups.length);for (var i = 0; i < groups.length; i++) {var temp_series = {};var temp_data = new Array(names.length);for (var a = 0; a < temp_data.length; a++) {temp_data[i] = 0}for (var j = 0; j < data.length; j++) {for (var k = 0; k < names.length; k++) {if (groups[i] == data[j].group && data[j].name == names[k]) {temp_data[k] = data[j].value}}}temp_series = { name: groups[i], value: temp_data };series[i] = temp_series;}return { name: groups, type: max, series: series }},FormatScatterData: function (data) {// var data = [//     { group:'2015', name: 5000, value: 6000 , title: '中国'},//     { group:'2016', name: 6000, value: 7000 , title: '中国'},//     { group:'2015', name: 4000, value: 5000 , title: '日本'},//     { group:'2016', name: 5000, value: 6000 , title: '日本'},// ]var groups = new Array();for (var i = 0; i < data.length; i++) {if (data[i].group && !groups.contains(data[i].group)) {groups.push(data[i].group);}}var series = new Array(groups.length);for (var i = 0; i < groups.length; i++) {var dataArr = []for (var j = 0; j < data.length; j++) {if (groups[i] == data[j].group) {dataArr.push([data[j].name, data[j].value, data[j].title || '', data[j].size || 18])}}series[i] = {name: groups[i],data: dataArr,type: 'scatter',symbolSize: function (data) {return data[3];},emphasis: {focus: 'series',label: {show: true,formatter: function (param) {return param.data[2];},// position: 'bottom'}},}}return { legend: groups, series: series }},FormatSbarData: function (data) {var groups = new Array()var names = new Array()for (var i = 0; i < data.length; i++) {if (data[i].xName && !groups.contains(data[i].xName)) {groups.push(data[i].xName);groups.push(data[i].yName);}if (data[i].name && !names.contains(data[i].name)) {names.push(data[i].name);}}var values = new Array(groups.length)$(values).each(function (index, i) {values[index] = false})for (var i = 0; i < groups.length; i++) {for (var j = 0; j < data.length; j++) {if (groups[i] == data[j].xName) {if (values[i]) {values[i].push(data[j].xValue * -1)} else {values[i] = [data[j].xValue * -1]}}if (groups[i] == data[j].yName) {if (values[i]) {values[i].push(data[j].yValue)} else {values[i] = [data[j].yValue]}}}}var series = new Array(groups.length)for (var i = 0; i < groups.length; i++) {series[i] = {name: groups[i],type: 'bar',stack: '对比',label: {show: false,position: ['10%', '10%'],formatter: function (prama) {if (prama.value != 0) {return Math.abs(prama.value)} else {return '';}}},emphasis: {focus: 'series'},data: values[i]}}return { names: names, groups: groups, series: series }},FormatPbarData: function (data, type) {var groups = new Array();var names = new Array();for (var i = 0; i < data.length; i++) {if (data[i].group && !groups.contains(data[i].group)) {groups.push(data[i].group);}if (data[i].name && !names.contains(data[i].name)) {names.push(data[i].name);}}var maxnum = new Array(names.length);$(maxnum).each(function (index, i) {maxnum[index] = 0})for (var i = 0; i < groups.length; i++) {for (var j = 0; j < data.length; j++) {for (var k = 0; k < names.length; k++)if (groups[i] == data[j].group && data[j].name == names[k]) {maxnum[k] += data[j].value}}}var series = new Array(groups.length);for (var i = 0; i < groups.length; i++) {var temp_series = {};var temp_data = new Array(names.length);for (var a = 0; a < temp_data.length; a++) {temp_data[i] = { value: 0 }}for (var j = 0; j < data.length; j++) {for (var k = 0; k < names.length; k++)if (groups[i] == data[j].group && data[j].name == names[k]) {temp_data[k] = { value: (data[j].value / maxnum[k] * 100).toFixed(2) };}}temp_series = { name: groups[i], type: type, data: temp_data, stack: '总数' };series[i] = temp_series;}return { legend: groups, category: names, series: series };},FormatBoxplotData: function (data) {//盒须图数据// var datas = echarts.dataTool.prepareBoxplotData(data.value);// datas.name=data.names;// console.log(datas)return data},FormatSankeyData: function (data) {var names = [];for (var i = 0; i < data.length; i++) {if (data[i].source && !names.contains(data[i].source)) {names.push(data[i].source);}if (data[i].target && !names.contains(data[i].target)) {names.push(data[i].target);}}var onames = []for (var i = 0; i < names.length; i++) {onames.push({name: names[i]})}return { names: onames, links: data }}},//生成图形ChartOptionTemplates: {//柱状图Bar: function (title, subtext, data, style, alarm) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'bar', 'top', alarm);var option = {title: {text: title || '',subtext: subtext || ''},legend: {itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,data: datas.legend,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},tooltip: {trigger: 'axis',position: ['10%', '10%'],formatter: function (e) {var divHtml = '<div>' + e[0].axisValue;for (var i = 0; i < e.length; i++) {divHtml += '</br>' + e[i].marker + e[i].seriesName + ':' + (e[i].data.p ? (e[i].data.p + ' - ' + e[i].value + '%') : e[i].value)}divHtml += '</div>'return divHtml}},grid: {top: '16%',left: '16%',bottom: '25%'},calculable: true,xAxis: [{type: 'category',data: datas.category,axisLabel: {interval: 0,rotate: 60,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.xAxisLine,lineStyle: {color: mrStyle.color}}}],yAxis: [{max: datas.max,type: 'value',axisLabel: {textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color}},splitLine: mrStyle.splitLine}],series: datas.series};return option;},//侧向柱状图yBar: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'bar', 'right');var option = {title: {text: title || '',subtext: subtext || ''},legend: {itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,data: datas.legend,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},tooltip: {trigger: 'axis',position: ['10%', '10%'],formatter: function (e) {var divHtml = '<div>' + e[0].axisValue;for (var i = 0; i < e.length; i++) {divHtml += '</br>' + e[i].marker + e[i].seriesName + ':' + (e[i].data.p ? (e[i].data.p + ' - ' + e[i].value + '%') : e[i].value)}divHtml += '</div>'return divHtml}},grid: {top: '16%',left: '25%',bottom: '16%'},calculable: true,xAxis: [{max: datas.max,type: 'value',axisLabel: {textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.xAxisLine,lineStyle: {color: mrStyle.color}},splitLine: mrStyle.splitLine}],yAxis: [{type: 'category',data: datas.category,axisLabel: {textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color}},}],series: datas.series};return option;},// 对比柱状图sBar: function (title, subtext, data, style) {// [{ name: 'a医院', xName: '男', xValue: 20, yName: '女', yValue: 30 }, // { name: 'b医院', xName: '男', xValue: 120, yName: '女', yValue: 130 }]var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormatSbarData(data, 'bar');var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {trigger: 'axis',position: ['10%', '10%'],axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'},formatter: function (prama) {return prama[0].name + '</br>' + prama[0].marker + prama[0].seriesName + ':' + Math.abs(prama[0].value) + '</br>' + prama[1].marker + prama[1].seriesName + ':' + Math.abs(prama[1].value)}},legend: {data: datas.groups,itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},grid: {top: '10%',left: '3%',right: '4%',bottom: '5%',containLabel: true},xAxis: [{type: 'value',axisLabel: {show: true,formatter: function (value) {return Math.abs(value)},textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.xAxisLine,lineStyle: {color: mrStyle.color}},splitLine: mrStyle.splitLine}],yAxis: [{type: 'category',axisTick: {show: false},data: datas.names,axisLabel: {show: true,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color}},splitLine: mrStyle.splitLine}],series: datas.series};return option;},// 百分比堆积图pBar: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormatPbarData(data, 'bar');var option = {title: {text: title || '',subtext: subtext || ''},legend: {data: datas.legend},grid: {left: '15%',},tooltip: {trigger: 'axis',position: ['10%', '10%'],formatter: function (p) {var tophtml = p[0].name + '</br>'for (var i = 0; i < p.length; i++) {tophtml += p[i].marker + ' ' + p[i].seriesName + ':' + (p[i].value == 'NaN' ? '0' : p[i].value) + '%</br>'}return tophtml}},calculable: true,xAxis: [{type: 'category',data: datas.category,axisLabel: {interval: 0,rotate: 60,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.xAxisLine,lineStyle: {color: mrStyle.color}}}],yAxis: [{type: 'value',axisLabel: {formatter: function (e) {return e + '%'}},max: 100,axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color},textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},splitLine: mrStyle.splitLine}],series: datas.series};return option;},//折线图Line: function (title, subtext, data, style) {// var colors = ['#00FCFF','#FD6600','#FFE036','#01C391']var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'line');var option = {title: {text: title || '',subtext: subtext || ''},// color:colors,legend: {itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,data: datas.legend,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},tooltip: {show: true,position: ['10%', '10%'],formatter: function (e) {var divHtml = '<div>' + e.seriesName + '</br>' + e.marker + e.name + ':' + (e.data.p ? (e.data.p + ' - ' + e.data.value + '%') : e.value)+ '</div>'return divHtml}},grid: {left: '16%',bottom: '25%',top: '16%'},xAxis: [{type: 'category',data: datas.category,axisLabel: {interval: 0,rotate: 60,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.xAxisLine,lineStyle: {color: mrStyle.color}}}],yAxis: [{type: 'value',max: datas.max,axisLabel: {textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color}},splitLine: mrStyle.splitLine}],series: datas.series};return option;},//饼图Pie: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormateNOGroupData(data);var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {show: true,trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)",position: ['10%', '10%']},legend: {show: false,itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,// orient: 'vertical',// left: '80%',// top: '5%',data: datas.category,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},series: [{name: title,type: 'pie',radius: '45%',label: {show: true,formatter: function (e) {//'{b}({d}%)'var strArr = []for (var i = 0; i < e.name.length; i += 6) {strArr.push(e.name.slice(i, i + 6))}var str = strArr.join('\n') + ':' + e.value + '(' + e.percent + '%)'return str}},center: ['50%', '55%'],data: datas.data,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},}]};return option;},//饼图 圆环oPie: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormateNOGroupData(data);var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {show: true,trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)",position: ['10%', '10%']},legend: {itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,// orient: 'vertical',// left: '80%',// top: '5%',data: datas.category,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},series: [{name: title,type: 'pie',radius: ['40%', '50%'],center: ['50%', '55%'],data: datas.data,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},}]};return option;},//雷达图Radar: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var data = MyECharts.ChartDataFormate.FormatRandarData(data)var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {position: ['10%', '10%']},legend: {top: '5%',itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,data: data.name,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},radar: {// shape: 'circle',name: {textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},indicator: data.type,radius: '60%',center: ['50%', '55%']},series: [{// name: '预算 vs 开销（Budget vs spending）',type: 'radar',// areaStyle: {normal: {}},data: data.series}]};return option},// 散点图Scatter: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var data = MyECharts.ChartDataFormate.FormatScatterData(data)var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {// position: ['10%', '10%']},legend: {right: '10%',top: '3%',data: data.legend,itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},grid: {top: '16%',left: '16%',bottom: '25%'},xAxis: {splitLine: mrStyle.splitLine,axisLabel: {interval: 0,rotate: 60,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.xAxisLine,lineStyle: {color: mrStyle.color}}},yAxis: {splitLine: mrStyle.splitLine,scale: true,axisLabel: {textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color}},},series: data.series};return option},// 地图Map: function (title, subtext, data, style, id, fn, fn2) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var chart = echarts.init(document.getElementById(id));var historys = ''var ssss = 0// getMapJson(data.orgCode, data.orgName)getList(data.orgCode, data.orgName, getjb(data.orgCode))function getjb(code) {if (String(code).length == 8) {return false} else if (String(code).indexOf('0000') != -1) {return '1'} else if (String(code).indexOf('00') != -1) {return '2'} else {if (code == '410425' || code == '410621' || code == '410611' || code == "410622" || code == '410603' || code == '410602') {return '3'} else {return false}}}function getList(orgcode, orgname, type) {if (type) {ssss++$.ajax({url: baseUrl + '/mb/resource/finest/findIcdAll/' + orgcode + '/' + orgname + '/' + type,type: 'get',contentType: "application/json",dataType: "json",success: function (res) {ssss--if (res.code == 200) {var data = res.data;getMapJson(data.now.code, data.now.name, data.info)} else {layer.msg(res.message);}},error: function () {closeLoad()}})} else {layer.msg('没有该地区地图！')// getMapJson(data.orgCode, data.orgName)}}function getMapJson(fileName, name, showData) {chart.off('click')ssss++;if (ssss > 1) {return}var wjm = fileNameif (historys == '') {historys = fileName + ':' + name} else {historys += ';' + fileName + ':' + name}if (fileName != 'china') {// 430000if (String(fileName).length == 8) {wjm = './mapJson/villages/' + fileName} else if (String(fileName).indexOf('0000') != -1) {wjm = './mapJson/province/' + fileName} else if (String(fileName).indexOf('00') != -1) {wjm = './mapJson/citys/' + fileName} else {wjm = './mapJson/county/' + fileName}} else {wjm = './mapJson/' + fileName}$.ajax({url: wjm + ".json",dataType: "json"}).done(function (data) {ssss--var valueData = []if (showData) {$(data.features).each(function (index, item) {var dataobj = {}dataobj.name = item.properties.namedataobj.orgcode = item.properties.adcodefor (var key in showData) {if (key == dataobj.name) {var hjnum = 0for (var i = 0; i < showData[key].length; i++) {dataobj['valuename_' + String(i)] = showData[key][i].resultnamedataobj['value_' + String(i)] = showData[key][i].numberhjnum += showData[key][i].number}dataobj.value = hjnum;}}valueData.push(dataobj)})} else {$(data.features).each(function (index, item) {valueData.push({ name: item.properties.name, orgcode: item.properties.adcode, value: 0 })})}var thismin = 0;var thismax = 0;$(valueData).each(function (index, item) {if (item.value) {if (thismin == 0) {thismin = item.value} else {if (thismin > item.value) {thismin = item.value}}if (thismax == 0) {thismax = item.value} else {if (thismax < item.value) {thismax = item.value}}}})echarts.registerMap(name, data);chart.setOption({title: {text: title || '',subtext: subtext || ''},visualMap: {show: false,left: 'right',min: thismin,max: thismax,text: ['高', '低'],textStyle: {color: '#fff'},realtime: false,//实时更新calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）inRange: {// color: [ //lan se//     '#99d4f2',//     '#93d0f1',//     '#8ccbf0',//     '#6bb6ec',//     '#3b95e5',//     '#1b80e1',//     '#0471de',// ]color: [ //hong se'#fdecd9','#eabb9e','#d88f6f','#d47f5a','#c16644','#ba512a','#b4451c','#a7381b']}},tooltip: {trigger: 'item',formatter: function (e) {var showStr = '<table class="mapshowtable"><tbody><tr><td colspan="2">' + e.data.name + '</td></tr>'for (var x in e.data) {if (x.indexOf('valuename_') != -1) {var name = 'value_' + x.split('_')[1]showStr += '<tr><td>' + e.data[x] + '</td><td>' + e.data[name] + '</td></tr>'}}if (e.data.value) {showStr += '<tr><td>合计</td><td>' + e.data.value + '</td></tr>'}showStr += '</tbody></table>'return showStr}},series: [{type: 'map',map: name,data: valueData,label: mrStyle.label,itemStyle: {areaColor: '#fbf5d2',color: '#10E6E6',// borderColor: '#f00',borderWidth: '0.3'},emphasis: {label: {color: '#fff'},itemStyle: {areaColor: '#ccc'}}}]})chart.on('click', function (e) {if (fn2()) {var nowItem = historys.split(';')if (nowItem[nowItem.length - 1].split(':')[0] == e.data.orgcode) {alert('没有更多了')} else {// if (String(e.value).length == 8) {//     alert('没有更多了')//     return// }getList(e.data.orgcode, e.name, getjb(e.data.orgcode))// getMapJson(e.value, e.name)}}});chart.getZr().on('click', function (e) {if (fn2()) {if (e.target == undefined && ssss == 0) {if (historys.indexOf(';') != -1) {var nowItem = historys.split(';')nowItem.pop()var lastItem = nowItem[nowItem.length - 1]getList(lastItem.split(':')[0], lastItem.split(':')[1], getjb(lastItem.split(':')[0]))// getMapJson(lastItem.split(':')[0], lastItem.split(':')[1])historys = nowItem.join(';')}}}})fn(fileName, name)}).fail(function (jqXHR) {ssss--if (historys.indexOf(';') != -1) {var nowItem = historys.split(';')nowItem.pop()historys = nowItem.join(';')}});}},// 迁徙地图qxMap: function (title, subtext, data, style, id, fn, fn2) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var chart = echarts.init(document.getElementById(id));var historys = ''var ssss = 0var colors = ['#fdecd9', '#eabb9e', '#d88f6f', '#d47f5a', '#c16644', '#ba512a', '#b4451c', '#a7381b']// getMapJson(data.orgCode, data.orgName)getList(data.orgCode, data.orgName, getjb(data.orgCode))function getjb(code) {if (String(code).length == 8) {return false} else if (String(code).indexOf('0000') != -1) {return '1'} else if (String(code).indexOf('00') != -1) {return '2'} else {if (code == '410425' || code == '410621' || code == '410611' || code == "410622" || code == '410603' || code == '410602') {return '3'} else {return false}}}function getList(orgcode, orgname, type) {if (type) {ssss++$.ajax({url: baseUrl + '/mb/resource/finest/findHbQxMap/' + orgcode + '/' + orgname + '/' + type,type: 'get',contentType: "application/json",dataType: "json",success: function (res) {ssss--if (res.code == 200) {var data = res.data;getMapJson(data.now.code, data.now.name, data.info)} else {layer.msg(res.message);}},error: function () {closeLoad()}})} else {layer.msg('没有该地区地图！')// getMapJson(data.orgCode, data.orgName)}}function getMapJson(fileName, name, showData) {chart.off('click')ssss++;if (ssss > 1) {return}var wjm = fileNameif (historys == '') {historys = fileName + ':' + name} else {historys += ';' + fileName + ':' + name}if (fileName != 'china') {// 430000if (String(fileName).length == 8) {wjm = './mapJson/villages/' + fileName} else if (String(fileName).indexOf('0000') != -1) {wjm = './mapJson/province/' + fileName} else if (String(fileName).indexOf('00') != -1) {wjm = './mapJson/citys/' + fileName} else {wjm = './mapJson/county/' + fileName}} else {wjm = './mapJson/' + fileName}$.ajax({url: wjm + ".json",dataType: "json"}).done(function (data) {ssss--var propertiesCenter = {}var valueData = []$(data.features).each(function (index, item) {if (item.properties.name) {propertiesCenter[item.properties.name] = item.properties.centervalueData.push({ name: item.properties.name, value: item.properties.adcode })}})var series = []//获取地域分布数据var convertData = function (data) {var res = [];for (var i = 0; i < data.target.length; i++) {var dataItem = data.target[i];var fromCoord = propertiesCenter[data.source];var toCoord = propertiesCenter[dataItem.qxname];if (fromCoord && toCoord) {res.push([{coord: fromCoord}, {coord: toCoord}]);}}return res;};var maxRs = 0//总人数var rsFb = {}//人数分布var legends = [];//图例var legendsAc={};//图例开启$(showData).each(function (index, item) {legends.push(item.source)if(index){legendsAc[item.source]=false}var data2 = []var nowRs = 0$(item.target).each(function (index, item) {maxRs += Number(item.total)nowRs += Number(item.total)// console.log(propertiesCenter[item.name])data2.push({name: item.qxname,value: propertiesCenter[item.qxname].concat([item.total])})})rsFb[item.source] = nowRs;series.push({// 系列名称，用于tooltip的显示name: item.source,type: 'lines',zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中// effect出发到目的地 的白色尾巴线条// 线特效的配置effect: {show: true,period: 6, // 特效动画的时间，单位为 strailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长// color: colors[index], // 移动箭头颜色symbol: 'arrow',symbolSize: 6 // 特效标记的大小},// lineStyle出发到目的地 的线条颜色lineStyle: {normal: {// color: colors[index],width: 1,curveness: 0.3 //幅度}},data: convertData(item) //开始到结束数据}, {//出发地信息name: item.source,type: 'lines',zlevel: 2,effect: {show: true,period: 6,trailLength: 0,symbol: 'arrow',symbolSize: 6},lineStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FFFFA8' // 结束}, {offset: 1,color: '#58B3CC ' // 出发 颜色}], false),width: 1.5,opacity: 0.4,curveness: 0.3}},data: convertData(item)}, {// 目的地信息name: item.source,type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: false,position: 'right',formatter: '{b}'}},symbolSize: function (val) {return Number(val[2]) / maxRs * 10 < 1 ? 10 : 10 + Number(val[2]) / maxRs * 10 * 2;},itemStyle: {normal: {// color: colors[index]}},data: data2,});})var rsFBcolor = []$(valueData).each(function (index, item) {if (rsFb[item.name]) {rsFBcolor.push({name: item.name,itemStyle: {areaColor: colors[getNum(rsFb[item.name], maxRs)],}})console.log(colors[getNum(rsFb[item.name], maxRs)])} else {rsFBcolor.push({name: item.name,itemStyle: {areaColor: colors[0],}})}})function getNum(nvalue, allvalue) {var a = allvalue / colors.lengthconsole.log(Math.ceil(nvalue / a))return Math.ceil(nvalue / a)}function getOrgCode(name) {for (var i = 0; i < valueData.length; i++) {if (valueData[i].name == name) {return valueData[i]}}}echarts.registerMap(name, data);chart.setOption({legend: {data: legends,type: 'scroll',right: '10%',// bottom: '70%',top: 0,orient: 'vertical',textStyle: {color: "#fff",fontSize: '8',lineHeight: '10'},itemGap:2,itemWidth:8,itemHeight:8,icon: 'circle',// pageIconColor:'#fff',// pageIconInactiveColor:'#ccc',// pageTextStyle:{//     color:'#fff'// },// selected:legendsAc},tooltip: {trigger: 'item',formatter: function (e) {if (e.data.value) {return e.seriesName + '->->' + e.name + ":" + e.data.value[2]}}},geo: {map: name,roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启aspectScale: 0.75,zoom: 1.20,label: {normal: {show: true,textStyle: {color: "#fff"}},emphasis: { // 对应的鼠标悬浮效果show: false,textStyle: {color: "#00a0c9"}}},itemStyle: {normal: {areaColor: '#0083ce',borderColor: '#0066ba'},emphasis: {borderWidth: 0,borderColor: '#0066ba',areaColor: "#0494e1",shadowColor: 'rgba(0, 0, 0, 0.5)'}},regions: rsFBcolor},series: series})chart.on('click', function (e) {if (fn2()) {var nameData = getOrgCode(e.name)var nowItem = historys.split(';')if (getjb(nameData.value)) {if (nowItem[nowItem.length - 1].split(':')[0] == nameData.value) {alert('没有更多了')} else {getList(nameData.value, nameData.name, getjb(nameData.value))}} else {alert('没有更多了')}}});chart.getZr().on('click', function (e) {if (fn2()) {if (e.target == undefined && ssss == 0) {if (historys.indexOf(';') != -1) {var nowItem = historys.split(';')nowItem.pop()var lastItem = nowItem[nowItem.length - 1]getList(lastItem.split(':')[0], lastItem.split(':')[1], getjb(lastItem.split(':')[0]))// getMapJson(lastItem.split(':')[0], lastItem.split(':')[1])historys = nowItem.join(';')}}}})fn(fileName, name)}).fail(function (jqXHR) {ssss--if (historys.indexOf(';') != -1) {var nowItem = historys.split(';')nowItem.pop()historys = nowItem.join(';')}});}},// 漏斗图Funnel: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormateNOGroupData(data);var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {position: ['10%', '10%'],trigger: 'item',formatter: "{a} <br/>{b} : {c}"},legend: {itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,data: datas.category,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},calculable: true,series: [{name: '漏斗图',type: 'funnel',left: '15%',top: 60,bottom: 60,width: '70%',sort: 'descending',//descending 从大到小    ascending 从小到大gap: 0,                //每一块之间的间隔label: {            //设置每一块的名字是显示在图里面还是外面show: true,position: ['10%', '10%']},// labelLine: {//     length: 100,             //设置每一块的名字前面的线的长度//     lineStyle: {//         width: 1,         //设置每一块的名字前面的线的宽度//         type: 'solid'    //设置每一块的名字前面的线的类型//     }// },emphasis: {label: {fontSize: mrStyle.fontSize}},data: datas.data}]};return option},// 金字塔Pyramid: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var datas = MyECharts.ChartDataFormate.FormateNOGroupData(data);var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {position: ['10%', '10%'],trigger: 'item',formatter: "{a} <br/>{b} : {c}"},legend: {itemWidth: mrStyle.fontSize * 2,itemHeight: mrStyle.fontSize,data: datas.category,textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},calculable: true,series: [{name: '漏斗图',type: 'funnel',left: '15%',top: 60,bottom: 60,width: '70%',sort: 'ascending',//descending 从大到小    ascending 从小到大gap: 0,                //每一块之间的间隔label: {            //设置每一块的名字是显示在图里面还是外面show: true,position: ['10%', '10%']},// labelLine: {//     length: 100,             //设置每一块的名字前面的线的长度//     lineStyle: {//         width: 1,         //设置每一块的名字前面的线的宽度//         type: 'solid'    //设置每一块的名字前面的线的类型//     }// },emphasis: {label: {fontSize: mrStyle.fontSize}},data: datas.data}]};return option},// 仪表盘Gauge: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)$.extend(mrStyle, style)var colors = [[0.5, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']];var option = {title: {text: title || '',subtext: subtext || ''},tooltip: {position: ['10%', '10%'],formatter: "{a} <br/>{b} : {c}%"},series: [{name: data[0].name,type: 'gauge',radius: '70%',center: ['50%', '60%'],startAngle: 200,//起始角度endAngle: -20,//结束角度detail: { formatter: '{value}%', fontSize: mrStyle.fontSize * 1.2, color: mrStyle.color, padding: [70, 0, 0, 0] },data: [{ value: data[0].value, name: data[0].name }],axisLine: {            // 坐标轴线  lineStyle: {       // 属性lineStyle控制线条样式  color: colors,width: 10}},splitLine: {length: 10},title: {               //设置仪表盘中间显示文字样式textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontSize: mrStyle.fontSize * 1.2,color: mrStyle.color,},offsetCenter: [0, '60%']},pointer: {width: 5}}]}return option},// 盒须图Boxplot: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)var data = MyECharts.ChartDataFormate.FormatBoxplotData(data)$.extend(mrStyle, style)var option = {title: {text: title,left: 'center',},tooltip: {trigger: 'item',axisPointer: {type: 'shadow'}},grid: {top: '16%',left: '10%',bottom: '25%'},xAxis: {type: 'category',data: data.names,boundaryGap: true,nameGap: 30,splitArea: {show: false},axisLabel: {formatter: '{value}',textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color}},},yAxis: {type: 'value',splitArea: {show: false},axisLabel: {textStyle: {color: mrStyle.color,fontSize: mrStyle.fontSize}},axisLine: {show: mrStyle.yAxisLine,lineStyle: {color: mrStyle.color}},},series: [{name: 'boxplot',type: 'boxplot',data: data.q,tooltip: {formatter: function (param) {return ['' + param.name + ': ','最大年齡: ' + param.data[5],'上四分位数: ' + param.data[4],'年齡中位数: ' + param.data[3],'下四分位数: ' + param.data[2],'最小年齡: ' + param.data[1]].join('<br/>');}}}// ,// {//     name: 'outlier',//     type: 'scatter',//     data: data.outliers// }]};return option},// 桑基图 Sankey: function (title, subtext, data, style) {var mrStyle = JSON.parse(mrStyle2)var data = MyECharts.ChartDataFormate.FormatSankeyData(data)$.extend(mrStyle, style)var option = {color: ['#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686', '#a48dc1', '#5da6bc', '#b9dcae'],tooltip: {trigger: 'item',triggerOn: 'mousemove'},series: {type: 'sankey',layout: 'none',data: data.names,links: data.links,lineStyle: {color: 'source',curveness: 0.5},itemStyle: {borderWidth: 0}}};return option}},//图形展示//参数：图形option、图形显示区域idRenderChart: function (option, containerId) {var container = eval("document.getElementById('" + containerId + "');");//获取图形显示区域var myChart = echarts.init(container);// var newChart = myChartmyChart.setOption(option, true);// 为echarts对象加载数据 return myChart}
};

地图注意事项

需要搭配地图json数据

.Map('', '', res[0], { color: '#B5C9FF' }, echartid, function (fileName, name){},() =>{ return true || false})

第一个回调为地图点击事件返回code 和 name,第二个是是否可以进行点击事件。

迁徙图展示数据格式

地图数据

echarts二次封装，适用于大屏，动态配置大屏，迁徙图，热力图，盒须图，桑基图等等相关推荐

js实现echarts桑基图缩放与拖动
需求:解决节点数据较小时,桑基图文字重叠问题. 由于echarts的dataZoom工具仅适用于直角坐标系,考虑通过改变画布大小与位置实现效果: 1.缩放 this.chartBox:画布外层容器, ...
用户数据销售额分析动态大屏看板+大屏数据可视化图表组件（折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图）+智能web端高保真大数据动态可视化大屏看板+中国动态地图+智慧电商实时动态数据大屏看板
作品内容:用户数据销售额分析动态大屏看板+大屏数据可视化图表组件(折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图)+web端高保真大数据动态可视化大屏看板+中国动态地图+电商实时动态数据大屏看板 ...
桑基图（Echarts）——自定义风格
桑基图绘制--使用Echarts 桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图.它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于能源.材料成 ...
echarts 桑基图
使用echarts的桑基图时发现一个问题: 当一个流转状态的值比较大时且覆盖了其它的流转状态,那么这时鼠标移到这些值小的流转状态,tooltip提示出来的仍是那个大的流转状态,也就是选不中这些小的状态 ...
Echarts桑基图的排列顺序
首先我们来说几个关于echarts的参数配置项 layoutIterations,布局的迭代次数.官方的解释如下: 这个不配合图来看,还真有点懵. 意思就是,如果 layoutIterations=0 ...
echarts 桑基图添加标志线问题
最近做一个项目,要求在桑基演化图的基础上添加"时间线",由于echart桑基图中没有该参数,所以需要两种图形叠加实现. 1.绘制基础桑基图 product.json {" ...
Echarts桑基图sankey点击高亮显示
Echarts桑基图sankey点击高亮显示 2022-02-21更新: 点击某一项将与其有关联的所有父项目和子项目全部高亮显示,并降低其他无关项目透明度,再次点击则恢复原有状态: 在线DEMO查看 ...
【Echarts】渐变色桑基图
echarts 渐变色桑基图 let dataList8 = {total: "123",list: [[{target:'数据源-WAF'},{target:'数据源-IPS 1 ...
Echarts 里的桑基图
/*输出桑基图*/renderSankey: function (profileIdentity, canvasId) {if (!document.body.contains(document.ge ...
matplotlib之pyplot模块——绘制箱线图（盒须图）boxplot()（二）演示外观参数、返回值
当前有效matplotlib版本为:3.4.1. 概述 boxplot()函数的作用是绘制箱线图(箱线图.盒须图.箱图). 箱线图是由一个箱体和一对箱须所组成的统计图形.箱体是由第一四分位数.中位数( ...

echarts二次封装，适用于大屏，动态配置大屏，迁徙图，热力图，盒须图，桑基图等等

echarts二次封装，适用于大屏，动态配置大屏，迁徙图，热力图，盒须图，桑基图等等

关于echarts的二次封装，那走即用

echarts所需数据

调用方法

js代码

地图注意事项

迁徙图展示数据格式

地图数据

echarts二次封装，适用于大屏，动态配置大屏，迁徙图，热力图，盒须图，桑基图等等相关推荐

最新文章

热门文章