bar3D、scatter3D、geo3DECharts Gallery

20:11:45图表已生成
代码
let geoCoordMap = {
    '郑州': [113.631557, 34.75261],
    '开封': [114.341447, 34.797049],
    '洛阳': [112.434468, 34.663041],
    '平顶山': [113.300848978, 33.7453014565],
    '安阳': [114.351806508, 36.1102667222],
    '鹤壁': [114.297769838, 35.7554258742],
    '新乡': [113.912690161, 35.3072575577],
    '焦作': [113.211835885, 35.234607555],
    '濮阳': [115.026627441, 35.7532978882],
    '漯河': [114.0460614, 33.5762786885],
    '三门峡': [111.181262093, 34.7833199411],
    '南阳': [112.542841901, 33.0114195691],
    "商丘": [115.641885688, 34.4385886402],
    '信阳': [114.085490993, 32.1285823075],
    '周口': [114.654101942, 33.6237408181],
    '许昌': [113.83531246, 34.0267395887],
    '驻马店': [114.049153547, 32.9831581541],
    '济源': [112.608898, 35.074838],
    '省直': [113.759766, 34.773383]
};


var yn = [{
    name: '省直',
    value: 200
}, {
    name: '郑州',
    value: 400
}, {
    name: '洛阳',
    value: 200
}, {
    name: '开封',
    value: 20
}, {
    name: '信阳',
    value: 30
}, {
    name: '驻马店',
    value: 212
}, {
    name: '南阳',
    value: 456
}, {
    name: '周口',
    value: 125
}, {
    name: '许昌',
    value: 2085
}, {
    name: '平顶山',
    value: 322
}, {
    name: '新乡',
    value: 303
}, {
    name: '漯河',
    value: 5
}, {
    name: '商丘',
    value: 304
}, {
    name: '三门峡',
    value: 35
}, {
    name: '济源',
    value: 350
}, {
    name: '焦作',
    value: 23
}, {
    name: '安阳',
    value: 45
}, {
    name: '鹤壁',
    value: 35
}, {
    name: '濮阳',
    value: 50
}, {
    name: '开封',
    value: 24
}];
var gd = [{
    name: '省直',
    value: 300
}, {
    name: '郑州',
    value: 490
}, {
    name: '洛阳',
    value: 210
}, {
    name: '开封',
    value: 120
}, {
    name: '信阳',
    value: 300
}, {
    name: '驻马店',
    value: 212
}, {
    name: '南阳',
    value: 230
}, {
    name: '周口',
    value: 125
}, {
    name: '许昌',
    value: 25
}, {
    name: '平顶山',
    value: 22
}, {
    name: '新乡',
    value: 303
}, {
    name: '漯河',
    value: 5
}, {
    name: '商丘',
    value: 304
}, {
    name: '三门峡',
    value: 35
}, {
    name: '济源',
    value: 350
}, {
    name: '焦作',
    value: 23
}, {
    name: '安阳',
    value: 45
}, {
    name: '鹤壁',
    value: 35
}, {
    name: '濮阳',
    value: 50
}, {
    name: '开封',
    value: 24
}];


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)
            });
        }
    }
    //console.log(res)
    return res;
};




option = {
    title: {
        text: '测试bar3D、scatter3D、geo3D',
        x: 'left',
        top: "10",
        textStyle: {
            color: '#000',
            fontSize: 14
        }
    },

    legend: {
        show: true,
        data: ['系列1', '系列2'],
    },

    tooltip: {
        show: true,
        formatter: (params) => {
            let data = params.name + "<br/>" + params.seriesName + "：" + params.value[2];
            debugger
            return data;

        },

    },
    /*     visualMap: [{
             show:false,
             type: 'continuous',
             seriesIndex: 0,
             text: ['bar3D'],
             calculable: true,
             max: 400,
             inRange: {
                 color: ['#87aa66', '#eba438', '#d94d4c']
             }
         },
        //  {
        //      type: 'continuous',
        //      seriesIndex: 1,
        //      text: ['scatter3D'],
        //      left: 'right',
        //      max: 100,
        //      calculable: true,
        //      inRange: {
        //          color: ['#000', 'blue', 'purple']
        //      }
        //  }
         ],*/
    geo3D: {
        map: 'henan',
        roam: true,

        //boxWidth:'100%',   
        boxHeight: 16,
        boxDepth: 95,
        regionHeight: 4, //立体阴影高度

        //  groundPlane: {    //地面
        //      show: true,
        //      color: '#555555',
        //  },


        itemStyle: {
            areaColor: '#1d5e98',
            opacity: 1,
            borderWidth: 0.6,
            borderColor: 'yellow'
        },
        label: {
            show: true,
            textStyle: {
                color: '#00ffff', //地图初始化区域字体颜色
                fontSize: 14,
                opacity: 1, //图形不透明度
                backgroundColor: 'rgba(0,23,11,0.6)'
            },
        },
        emphasis: { //当鼠标放上去  地区区域是否显示名称
            label: {
                show: false,
                textStyle: {
                    color: '#FFF',
                    fontSize: 14,
                    backgroundColor: 'rgba(0,23,11,0)'
                }
            }
        },
        //shading: 'lambert',
        light: { //光照阴影
            main: {
                color: '#00ffff', //光照颜色
                intensity: 1.2, //光照强度
                //shadowQuality: 'high', //阴影亮度
                shadow: false, //是否显示阴影
                alpha: 55,
                beta: 10

            },
            ambient: {
                intensity: 0.5
            }
        },

        viewControl: { //用于鼠标的旋转，缩放等视角控制。
            // autoRotate: true,    //自动旋转
            damping: 0.8,
            distance: 110, //距离中心原点的距离 
            //minDistance: 40,
            alpha: 55, // 视角绕x轴的角度
            beta: 0, // 视角绕y轴的角度
            center: [0, 0, 0], //视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]
            animation: true,
        }
    },
    series: [
        //柱状图
        {
            name: '系列1',
            type: "bar3D",
            coordinateSystem: 'geo3D',
            minHeight: 3, //最小高度
            //bevelSize:1,
            stack: 'one',
            barSize: 2, //柱子粗细
            //shading: 'lambert',
            opacity: 1,
            bevelSize: 0.3,


            itemStyle: {
                color: 'blue',
            },

            label: {
                show: false,
                formatter: '{b}'
            },
            emphasis: {
                label: {
                    show: false,
                },
            },
            data: convertData(yn),
        },

        {
            name: '系列2',
            type: "bar3D",
            coordinateSystem: 'geo3D',
            minHeight: 3, //最小高度
            //bevelSize:1,
            stack: 'one',
            barSize: 2, //柱子粗细
            //shading: 'lambert',
            opacity: 1,
            bevelSize: 0.3,

            itemStyle: {
                color: 'red',
            },


            label: {
                show: false,
                formatter: '{c}'
            },
            emphasis: {
                label: {
                    show: false,
                },
            },
            data: convertData(gd),
        },
        //画线        
        //      {
        //      name: 'scatter3D',
        //      type: "scatter3D",
        //      coordinateSystem: 'geo3D',
        //      symbol: 'pin',
        //      symbolSize: 30,
        //      opacity: 1,
        //      label: {
        //          show: false,
        //          formatter: '{b}'
        //      },
        //      itemStyle: {
        //          borderWidth: 0.5,
        //          borderColor: '#fff'
        //      },
        //      data: convertData([{
        //          name: "阳泉",
        //          value: ((Math.random() * 100) + 50).toFixed(2)
        //      }, {
        //          name: "莱州",
        //          value: ((Math.random() * 100) + 50).toFixed(2)
        //      }, {
        //          name: "湖州",
        //          value: ((Math.random() * 100) + 50).toFixed(2)
        //      }, {
        //          name: "汕头",
        //          value: ((Math.random() * 100) + 50).toFixed(2)
        //      }, {
        //          name: "昆山",
        //          value: ((Math.random() * 100) + 50).toFixed(2)
        //      }, {
        //          name: "张家口",
        //          value: ((Math.random() * 100) + 50).toFixed(2)
        //      }])
        //  },


    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
