本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(15)

2021-06(110)

2021-07(6)

2021-08(65)

2021-09(59)

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

发布于2021-12-05 19:15     阅读(633)     评论(0)     点赞(14)     收藏(5)


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

关于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个字符)