利用geo3d地圖數據畫地圖上面的柱子

利用geo3d地圖數據畫地圖上面的柱子

 

import 'echarts-gl'
import echarts from 'echarts'
import '../../../../map-json/jiangmen'

const data = [{
    name: '蓬江區',
    value: [113.00859, 22.81677, 10],

},
{
    name: '江海區',
    value: [113.119978, 22.567851, 20]
},

{
    name: '新會區',
    value: [113.047065, 22.324486, 60]
},
{
    name: '台山市',
    value: [112.614703, 22.002776, 80]
},
{
    name: '開平市',
    value: [112.597861, 22.390725, 30]
},
{
    name: '鶴山市',
    value: [112.785845, 22.767248, 40]
},
{
    name: '恩平市',
    value: [112.221539, 22.096532, 55]
},
{
    name: '恩平市',
    value: [112.221539, 22.096532, 20]
},
{
    name: '恩平市',
    value: [112.121539, 22.096532, 90]
},

]

class ChartMap extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
        }
        this.myChart = null
    }

    componentDidMount(){
        this.initEcharts()
    }

    initEcharts = () => {
        this.myChart = echarts.init(this.el, null, {
            renderer: 'canvas',
            height: '800px'
        })
        const option = {
            geo3D: {
                map: '江門',
                show: true,
                zlevel: -10,
                
                boxWidth: 110,
                boxHeight: 30, // 4:沒有bar. 30:有bar,bar最高度30，按比例分配高度
                regionHeight: 3,
                shading: 'lambert',
                label: { // 標簽的相關設置
                    show: true, // (地圖上的城市名稱)是否顯示標簽 [ default: false ]
                    // distance: 50, // 標簽距離圖形的距離，在三維的散點圖中這個距離是屏幕空間的像素值，其它圖中這個距離是相對的三維距離
                    // formatter:, // 標簽內容格式器
                    textStyle: { // 標簽的字體樣式
                        color: '#fff', // 地圖初始化區域字體顏色
                        fontSize: 12, // 字體大小
                        opacity: 1, // 字體透明度
                        backgroundColor: 'transparent' // 字體背景色
                    },
                },
                itemStyle: {
                    color: '#0396E8',
                    opacity: 0.5,
                    borderWidth: 2,
                    borderColor: '#67C1FF'
                },
                emphasis: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            backgroundColor: 'transparent' // 字體背景色
                        }
                    },
                    borderColor: '#ADDEFF',
                    borderWidth: 2,
                    itemStyle: {
                        color: '#38D2FF',
                    }
                },
                light: {
                    main: {
                        shadow: true,
                        shadowQuality: 'ultra',
                        intensity: 1,
                        alpha: 40,
                        beta: 300
                    },
        
                },
        
                viewControl: {
                    projection: 'perspective',
                    autoRotate: false,
                    // damping: 0,
                    rotateSensitivity: 1, // 旋轉操作的靈敏度
                    rotateMouseButton: 'left', // 旋轉操作使用的鼠標按鍵
                    zoomSensitivity: 1, // 縮放操作的靈敏度
                    panSensitivity: 1, // 平移操作的靈敏度
                    // panMouseButton: 'right', // 平移操作使用的鼠標按鍵
                    
                    distance: 150, // 默認視角距離主體的距離
                    center: [0, 0, 0],
                   
                    // animation: false,
                    // animationDurationUpdate: 1000,
                    // animationEasingUpdate: 'cubicInOut'
                },
        
            },
            
            series: [
                // bar
                {
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    zlevel: 3,
                    barSize: 3, // 柱子粗細
                    shading: 'lambert',
                    itemStyle: {
                        color: '#67ebc0'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            backgroundColor: 'transparent'
                        },
                        formatter(params) {
                            return params.value[2]
                        }
                    },
                    data
                }
              
            ]
        }
        
        // 繪制圖表
        this.myChart.setOption(option)
    }
    
    render() {
        return (
            <div className="chart-map" ref={el => { this.el = el }} id="chart-bar-geo" />
        )
    }
}
ChartMap.defaultProps = {
}

ChartMap.propTypes = {
}

export default ChartMap