保护区-MyEcharts.js

MyEcharts.js

function drawPie(data) {
    var pie_datas = FormateNOGroupData(data);
    var option1 = {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} 
{b} : {c} ({d}%)'
        },
        legend: {
            bottom: 10,
            left: 'center',
            textStyle: {
                color: '#ffffff'
            },
            data: pie_datas.category
        },

        series: [
            {
                name: '物种数量占比',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: pie_datas.data
            }
        ]
    };
    return option1;
}

function drawColumn(data) {
    var pie_datas = FormateNOGroupData(data);
    var option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: pie_datas.category,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '个体数量',
                type: 'bar',
                barWidth: '60%',
                data: pie_datas.data
            }
        ]
    };
    return option;
}
function drawLine(data) {
    var pie_datas = FormateGroupData(data);
    var option3 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: pie_datas.legendData
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: pie_datas.xAxis
        },
        yAxis: {
            type: 'value'
        },
        series: pie_datas.series
    };
    return option3;
}

function drawMap(data) {
    alert(1);
    var option2;
    //var pie_datas = FormateGroupData(data);
    var uploadedDataURL = "/resources/js/echarts/yancheng.json";
    // myChart2.showLoading();
    var data = $.getJSON(uploadedDataURL, function (geoJson) {
        echarts.registerMap('yancheng', geoJson);
        //   myChart2.hideLoading();
        var geoCoordMap = {
            '响水县': [119.72212, 34.237],
            '建湖县': [119.793105, 33.472],
            '射阳县': [120.257444, 33.773],
            '阜宁县': [119.615, 33.725],
            '滨海县': [120.00, 34.09],
            '盐都区': [119.88256837, 33.25],
            '亭湖区': [120.250, 33.383912],
            '大丰区': [120.5, 33.20],
            '东台市': [120.6116376, 32.797]

        };
        var data = [
            {name: '响水县', value: 199},
            {name: '建湖县', value: 39},
            {name: '射阳县', value: 152},
            {name: '阜宁县', value: 299},
            {name: '滨海县', value: 30},
            {name: '盐都区', value: 89},
            {name: '亭湖区', value: 52},
            {name: '大丰区', value: 9},
            {name: '东台市', value: 352}

        ];
        var max = 480, min = 9; // todo
        var maxSize4Pin = 100, minSize4Pin = 20;

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        option2 = {
            title: {
                text: '',
                subtext: '',
                x: 'center',
                textStyle: {
                    color: '#ccc'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (typeof(params.value)[2] == "undefined") {
                        return params.name + ' : ' + params.value;
                    } else {
                        return params.name + ' : ' + params.value[2];
                    }
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['Degree_of_heat'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                show: true,
                min: 0,
                max: 500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [1],
                /* inRange: {
                 color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
                 },*/
                textStyle: {
                    color: '#fff'
                },
                inRange: {

                    color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                }
            },
            geo: {
                show: true,
                map: 'yancheng',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077'
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                }
            },
            series: [
                {
                    name: 'Degree_of_heat',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#05C3F9'
                        }
                    }
                },
                {
                    type: 'map',
                    map: 'yancheng',
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: data
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin',
                    symbolSize: function (val) {
                        var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        var b = minSize4Pin - a * min;
                        b = maxSize4Pin - a * max;
                        return a * val[2] + b;
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 9
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F62157' //标志颜色
                        }
                    },
                    zlevel: 6,
                    //  data: convertData(data),
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    /* type: 'scatter', */
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 5)),
                    /*    data:convertData(data),*/
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#05C3F9',
                            shadowBlur: 10,
                            shadowColor: '#05C3F9'
                        }
                    },
                    zlevel: 1
                }
            ]
        };
        return option2;
    });
    return data;
}
function FormateNOGroupData(data) {
    //data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
    var categories = [];
    var datas = [];
    for (var i = 0; i < data.length; i++) {
        categories.push(data[i].name || "");
        datas.push({name: data[i].name, value: data[i].value || 0});
    }
    return {category: categories, data: datas};
}

function FormateGroupData(data) {
    var xAxis = [];
    var series = [];
    var data1 = data[0];
    var legendData = [];
    for (var i = 0; i < data1.length; i++) {
        for (var j = 0; j < xAxis.length && xAxis[j] != data1[i].name; j++);
        if (j == xAxis.length)
            xAxis.push(data1[i].name);
    }
    for (var z = 0; z < data.length; z++) {
        var datatemp = data[z];
        var temp = [];
        var nametemp = '';
        for (var f = 0; f < datatemp.length; f++) {
            temp.push(datatemp[f].value);
        }
        nametemp = datatemp[0].nickName;
        legendData.push(datatemp[0].nickName);
        var series_temp = {
            name: nametemp,
            type: 'line',
            stack: '总量',
            data: temp
        };
        series.push((series_temp));
    }
    return {xAxis: xAxis, series: series, legendData: legendData};
}

function getMapData(data) {
    var datas = [];
    for (var i = 0; i < data.length; i++) {
        datas.push({name: data[i].name, value: data[i].value || 0});
    }
    return datas;
}
function getDeviceData(data) {
    var datas = [];
    if (!isEmpty(data) && data.length > 0) {
        for (var i = 0; i < data.length; i++) {
            if (data[i].status == 10) {
                datas.push({
                    name: data[i].name,
                    exhibition: data[i].name,
                    value: [data[i].slongitude, data[i].slatitude],
                    ip: data[i].ip,
                    code: data[i].code,
                    idenTotalNum: data[i].idenTotalNum,
                    status: data[i].status,
                    idenSpeciesTotalNum: data[i].idenSpeciesTotalNum
                });
            }
        }
    }
    return datas;
}
function getDeviceDataLX(data) {
    var datas = [];
    if (!isEmpty(data) && data.length > 0) {
        for (var i = 0; i < data.length; i++) {
            if (data[i].status != 10) {
                datas.push({
                    name: data[i].name,
                    exhibition: data[i].name,
                    value: [data[i].slongitude, data[i].slatitude],
                    ip: data[i].ip,
                    code: data[i].code,
                    idenTotalNum: data[i].idenTotalNum,
                    status: data[i].status,
                    idenSpeciesTotalNum: data[i].idenSpeciesTotalNum
                });
            }
        }
    }
    return datas;
}