本站消息
echarts二次封装，适用于大屏，动态配置大屏，迁徙图，热力图，盒须图，桑基图等等
发布于2021-12-05 19:15 阅读(1106) 评论(0) 点赞(14) 收藏(5)
关于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 = false
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: Number(data[j].value) };
if (String(data[j].title) && String(data[j].title) != 'undefined' && String(data[j].title) != 'null') {
// max = 100
temp_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 = fileName
if (historys == '') {
historys = fileName + ':' + name
} else {
historys += ';' + fileName + ':' + name
}
if (fileName != 'china') {
// 430000
if (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.name
dataobj.orgcode = item.properties.adcode
for (var key in showData) {
if (key == dataobj.name) {
var hjnum = 0
for (var i = 0; i < showData[key].length; i++) {
dataobj['valuename_' + String(i)] = showData[key][i].resultname
dataobj['value_' + String(i)] = showData[key][i].number
hjnum += 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 = 0
var 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 = fileName
if (historys == '') {
historys = fileName + ':' + name
} else {
historys += ';' + fileName + ':' + name
}
if (fileName != 'china') {
// 430000
if (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.center
valueData.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, // 特效动画的时间，单位为 s
trailLength: 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.length
console.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: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontSize: 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、图形显示区域id
RenderChart: function (option, containerId) {
var container = eval("document.getElementById('" + containerId + "');");//获取图形显示区域
var myChart = echarts.init(container);
// var newChart = myChart
myChart.setOption(option, true);// 为echarts对象加载数据
return myChart
}
};
地图注意事项
需要搭配地图json数据
.Map('', '', res[0], { color: '#B5C9FF' }, echartid, function (fileName, name){},() =>{ return true || false})
第一个回调为地图点击事件返回code 和 name,第二个是是否可以进行点击事件。
迁徙图展示数据格式
地图数据
原文链接:https://blog.csdn.net/zhao_guang_liang/article/details/121693196
所属网站分类: 技术文章 > 博客
作者：哦八戒八戒
链接：http://www.qianduanheidong.com/blog/article/248458/160ff45b37f0b439a755/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
14
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)