漏刻有时数据可视化Echarts组件开发(18)：渐变透明柱状图和地图map结合的案例

项目需求

1. echarts地图map类型；
2. 圆形柱状图；
3. 指定区域柱图颜色突出展示；

代码开发 构建容器

数据格式

 //散点图标准数据格式;
    var scrData = [
        {"name": "合肥市", "value": [117.323065, 31.886248], data: 70},
        {"name": "芜湖市", "value": [118.398616, 31.354343], data: 20},
        {"name": "六安市", "value": [116.50514, 31.722042], data: 50},
        {"name": "安庆市", "value": [116.667096, 30.512095], data: 40},
        {"name": "宿州市", "value": [117.001588, 33.646085], data: 28}
    ]

初始化图表

    var myChart = echarts.init(document.getElementById("container"));

选项配置

 var option = {
        backgroundColor: '#131C38',
        tooltip: {
            trigger: 'item',
            show: true,
            textStyle: {
                fontSize: 20,
                color: '#fff'
            },
            formatter: function (params) {
                //console.log(params)
                if (typeof(params.data) == "undefined") {
                    return params.name;
                } else {
                    return params.name + "" + params.data.data;
                }
            }
        },
        geo: [
            {
                map: '安徽省',
                aspectScale: 0.75,
                roam: false, // 是否允许缩放
                zoom: 1, // 默认显示级别
                layoutSize: '95%',
                layoutCenter: ['55%', '50%'],
                label: {
                    show: false,
                    color: '#fff'
                },
                itemStyle: {
                    areaColor: {
                        type: 'linear-gradient',
                        x: 0,
                        y: 400,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(37,108,190,0.3)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(15,169,195,0.3)' // 50% 处的颜色
                        }],
                        global: true // 缺省为 false
                    },
                    borderColor: '#4ecee6',
                    borderWidth: 1
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#0160AD'
                    },
                    label: {
                        show: true,
                        color: '#fff'
                    }
                },
                zlevel: -10
            }
        ],
        series: [
            {
                type: 'map',
                map: '安徽省',
                geoIndex: 0,
                coordinateSystem: 'geo',
                showLegendSymbol: true,
                roam: true,
                label: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                itemStyle: {
                    opacity: 1,
                    borderColor: '#2ab8ff',
                    borderWidth: 1.5,
                    areaColor: '#12235c'
                },
                zlevel: 9,
                data: scrData
            },
            // 柱状体的主干
            {
                type: 'lines',
                zlevel: 5,
                effect: {
                    //show: true,
                    //period: 4, //箭头指向速度，值越小速度越快
                    //trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    //symbol: 'arrow', //箭头图标
                    symbolSize: 5 // 图标大小
                },
                lineStyle: {
                    width: 20, // 尾迹线条宽度
                    color: function (params) {
                        //console.log(params);
                        if (params.name == "合肥市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 0.7, // 尾迹线条透明度
                    curveness: 0 // 尾迹线条曲直度
                },
                label: {
                    show: false,
                    position: 'end',
                    formatter: '245'
                },
                silent: true,
                data: getBodyData(scrData, getMax(scrData))
            },
            // 柱状体的顶部
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 5,
                label: {
                    show: true,
                    formatter: function (params) {
                        //console.log(params)
                        return "产值：" + params.data.value[2];
                    },
                    position: "top"
                },
                symbol: 'circle',
                symbolSize: [20, 10],
                itemStyle: {
                    color: function (params) {
                       // console.log(params);
                        if (params.name == "合肥市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 1
                },
                silent: true,
                data: getTopData(scrData, getMax(scrData))
            },
            // 柱状体的底部
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 4,
                label: {
                    formatter: '{b}',
                    position: 'bottom',
                    color: '#fff',
                    fontSize: 12,
                    distance: 10,
                    show: false
                },
                symbol: 'circle',
                symbolSize: [20, 10],
                itemStyle: {
                    color: function (params) {
                        if (params.name == "合肥市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 1
                },
                silent: true,
                data: scrData
            },
            // 底部外框
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 4,
                label: {
                    show: false
                },
                rippleEffect: {
                    scale: 3,
                    brushType: "fill"
                },
                symbol: 'circle',
                symbolSize: [40, 20],
                itemStyle: {
                    color: function (params) {
                        if (params.name == "合肥市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 1
                },
                silent: true,
                data: scrData
            }
        ]
    }

    //自适应浏览器;
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

数据格式处理的封装函数

//01.获取数组对象值的最大值;
function getMax(Arr) {
    var newArr = [];
    for (var i = 0; i