伪3D地图柱状图echarts lines配置项内容和展示

      var uploadedDataURL2 = "/asset/get/s/data-1602571749507-Ot_4cDkXj.json";
var uploadedDataURL = "/asset/get/s/data-1592366734603-Z-iQwIHJk.json";
var center = {
    "南京市": [118.767413, 32.041544],
    "无锡市": [120.301663, 31.574729],
    "徐州市": [117.184811, 34.261792],
    "常州市": [119.946973, 31.772752],
    "苏州市": [120.619585, 31.299379],
    "南通市": [120.864608, 32.216212],
    "连云港市": [119.178821, 34.600018],
    "淮安市": [119.021265, 33.597506],
    "盐城市": [120.139998, 33.377631],
    "扬州市": [119.421003, 32.393159],
    "镇江市": [119.352753, 32.004402],
    "泰州市": [120.015176, 32.484882],
    "宿迁市": [118.275162, 33.963008]
}
var center2 = {
    "南京市": [118.667413, 31.841544],
    "无锡市": [120.201663, 31.474729],
    "徐州市": [117.584811, 34.261792],
    "常州市": [119.646973, 31.672752],
    "苏州市": [120.419585, 31.099379],
    "南通市": [120.964608, 32.116212],
    "连云港市": [118.978821, 34.500018],
    "淮安市": [119.121265, 33.497506],
    "盐城市": [120.239998, 33.277631],
    "扬州市": [119.321003, 32.693159],
    "镇江市": [119.452753, 31.954402],
    "泰州市": [120.015176, 32.384882],
    "宿迁市": [118.375162, 33.863008]
}
var data = [
    {name: '南京市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '无锡市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '徐州市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '常州市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '苏州市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '南通市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '连云港市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '淮安市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '盐城市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '扬州市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '镇江市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '泰州市', value: (Math.random()*1000+1000).toFixed(0)},
    {name: '宿迁市', value: (Math.random()*1000+1000).toFixed(0)},
]
var lineData = data.map(item => {
    return {
        coords: [
            center[item.name],
            [center[item.name][0], center[item.name][1] + item.value * 0.0001]
        ]
    }
})
var scatterData = data.map(item => {
    return [center[item.name][0], center[item.name][1] + item.value * 0.0001]
})
var scatterData2 = data.map(item => {
    return center[item.name]
})
var scatterData3 = data.map(item => {
    return center2[item.name].concat(item.name)
})
$.get(uploadedDataURL2, function(json) {
    echarts.registerMap('js2', json);
})
$.get(uploadedDataURL, function(json) {
    echarts.registerMap('js', json);
    option = {
        backgroundColor: '#333',
        geo: [{
            map: 'js',
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            //zoom: 1.1, //默认显示级别
            layoutSize: '95%',
            layoutCenter: ['50%', '50%'],
            itemStyle: {
                areaColor: 'transparent',
                borderColor: '#37C1FD',
                borderWidth: 2,
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#0160AD'
                },
                label: {
                    show: 0,
                    color: '#fff'
                }
            },
            zlevel: 3,
        }, {
            map: 'js2',
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            //zoom: 1.1, //默认显示级别
            layoutSize: '95%',
            layoutCenter: ['50%', '50%'],
            itemStyle: {
                areaColor: {
                    type: 'radial',
                    x: 0.7,
                    y: 0.5,
                    r: 0.4,
                    colorStops: [{
                        offset: 0,
                        color: '#56CCFB' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#0160AD' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                borderColor: '#37C1FD',
                borderWidth: 2,
            },
            zlevel: 2,
            silent: true,
        }, {
            map: 'js2',
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            //zoom: 1.1, //默认显示级别
            layoutSize: '95%',
            layoutCenter: ['50%', '52%'],
            itemStyle: {
                areaColor: '#005DDC',
                borderColor: '#329BF5',
                borderWidth: 1,
            },
            zlevel: 1,
            silent: true,
        }, ],
        series: [{
            type: 'lines',
            zlevel: 5,
            effect: {
                show: false,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                width: 15, //尾迹线条宽度
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#F09B0A' // 0% 处的颜色
                    }, {
                        offset: 0.2,
                        color: '#F09B0A' // 0% 处的颜色
                    }, {
                        offset: 0.5,
                        color: '#FEF03B' // 0% 处的颜色
                    }, {
                        offset: 0.7,
                        color: '#FEF03B' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#F09B0A' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                opacity: 1, //尾迹线条透明度
                curveness: 0 //尾迹线条曲直度
            },
            label: {
                show: 0,
                position: 'end',
                formatter: '245'
            },
            silent: true,
            data: lineData
        }, {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            label: {
                show: !0,
                position: 'right',
                formatter: params => data[params.dataIndex].value,
                padding: [4, 8],
                backgroundColor: '#003F5E',
                borderRadius: 5,
                borderColor: '#67F0EF',
                borderWidth: 1,
                color: '#67F0EF'
            },
            symbol: 'circle',
            symbolSize: [15, 8],
            itemStyle: {
                color: '#FEF03B',
                opacity: 1
            },
            silent: true,
            data: scatterData
        }, {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            symbol: 'circle',
            symbolSize: [15, 8],
            itemStyle: {
                color: '#F09B0A',
                opacity: 1,
                shadowColor: '#000',
                shadowBlur: 5,
                shadowOffsetY: 2,
            },
            silent: true,
            data: scatterData2
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbol: 'circle',
            symbolSize: 4,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'fill',
                scale: 10
            },
            hoverAnimation: true,
            label: {
                formatter: p => p.data[2],
                position: 'right',
                color: '#fff',
                fontSize: 14,
                distance: 10,
                show: !0,
            },
            itemStyle: {
                color: '#FEF134',
            },
            zlevel: 6,
            data: scatterData3
        }]
    };
    myChart.setOption(option);
});