地圖上面加柱狀圖組

地區地圖陰影，加上單點柱狀圖組的展示

 

 

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

const geoCoordMap = {
    市區1: [113.0989, 22.81677],
    市區2: [113.200601, 22.672211],
    市區3: [113.038584, 22.440247],
    市區4: [112.793414, 22.250713],
    市區5: [112.592262, 22.566286],
    市區6: [112.761795, 22.766104],
   市區7: [112.314051, 22.382956],
}

class ChartMap extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            mapData: [
                ['市區1', 50, 20, 30],
                ['市區2', 10, 60, 30],
                ['市區3', 40, 10, 50],
                ['市區4', 30, 50, 70],
                ['市區5', 50, 50, 30],
                ['市區6', 60, 30, 30],
                ['市區7', 45, 90, 60],
            ],
            categoryType: ['數據1', '數據2', '數據3']
        }
        this.myChart = null
    }

    componentDidMount(){
        this.initEcharts()
        this.renderEachCity()
    }

    renderEachCity = () => {
        const { mapData, categoryType } = this.state
        const MyCubeRect = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
                width: 10, // 柱寬        
                zWidth: 10, // 陰影折角寬 
                zHeight: 0, // 陰影折角高
            },
            buildPath(ctx, shape) {
                const { api } = shape
                // 坐標系列
                const xAxisPoint = api.coord([shape.xValue, 0])
                const p0 = [shape.x, shape.y]
                const p1 = [shape.x - 5, shape.y]
                const p4 = [shape.x + 5, shape.y]
                const p2 = [xAxisPoint[0] - 5, xAxisPoint[1]]
                const p3 = [xAxisPoint[0] + 5, xAxisPoint[1]]
                // 描繪的圖形 
                ctx.moveTo(p0[0], p0[1]) // 0
                ctx.lineTo(p1[0], p1[1]) // 1
                ctx.lineTo(p2[0], p2[1]) // 2
                ctx.lineTo(p3[0], p3[1]) // 3
                ctx.lineTo(p4[0], p4[1]) // 4
                ctx.lineTo(p0[0], p0[1]) // 0
                ctx.closePath()
            }
        })
        const MyCubeShadow = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
                width: 15,
                zWidth: 6,
                zHeight: 4,
            },
            buildPath(ctx, shape) {
                const { api } = shape
                const xAxisPoint = api.coord([shape.xValue, 0])
                const p1 = [shape.x - 5, shape.y]
                const p4 = [shape.x + 5, shape.y]
                const p6 = [shape.x + 5 + 8, shape.y - 4]
                const p7 = [shape.x - 5 + 8, shape.y - 4]
                const p3 = [xAxisPoint[0] + 5, xAxisPoint[1]]
                const p5 = [xAxisPoint[0] + 5 + 8, xAxisPoint[1] - 4]
              
                ctx.moveTo(p4[0], p4[1]) // 4
                ctx.lineTo(p3[0], p3[1]) // 3
                ctx.lineTo(p5[0], p5[1]) // 5
                ctx.lineTo(p6[0], p6[1]) // 6
                ctx.lineTo(p4[0], p4[1]) // 4
              
                ctx.moveTo(p4[0], p4[1]) // 4
                ctx.lineTo(p6[0], p6[1]) // 6
                ctx.lineTo(p7[0], p7[1]) // 7
                ctx.lineTo(p1[0], p1[1]) // 1
                ctx.lineTo(p4[0], p4[1]) // 4
                ctx.closePath()
            }
        })
        echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
        echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
        const option = {
            xAxis: [],
            yAxis: [],
            grid: [],
            series: [
                {
                    type: 'map',
                    map: '地市地圖',
                    tooltip: {
                        show: false
                    },
                    label: {
                        show: true,
                        color: '#FFFFFF',
                        fontSize: 16
                    },
                    roam: false,
                    aspectScale: 1.5,
                    zoom: 1, // 地圖初始大小
                    center: [112.699885, 22.36442], // 初始中心位置
                    // layoutCenter: ['50%', '55%'], // 地圖位置
                    // layoutSize: '118%',
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 0.6)',
                            borderWidth: 0.8,   
                            areaColor: '#ADDEFF',
                        },
                        emphasis: {
                            areaColor: '#ADDEFF'
                        }
                    },
                    zlevel: -100
                }
            ]
        }
 
        echarts.util.each(mapData, (dataItem, idx) => {
            const inflationData = [dataItem[1], dataItem[2], dataItem[3]]
            const geoCoord = geoCoordMap[dataItem[0]]// 獲得城市的坐標
            const coord = this.myChart.convertToPixel('geo', geoCoord)// 轉換坐標系上的點到像素坐標值。
            if (!coord && !geoCoord){
                return
            }
            //         const colorList = ['#369BFF', '#EBB34D', '#45BDE0', '#7D95FC', 
            // '#F19350', '#D94EC4', '#F26266', '#0283EA', '#16BA58', '#6E00FF', '#FFCE2F', '#F08C45']
            const colorList = ['#2364EE', '#F3A612', '#20C0B7', '#748CF3', '#EE8031', '#C52DAD', 
                '#F26266', '#0283EA', '#16BA58', '#6E00FF', '#FFCE2F', '#F08C45']
            const colorListShadow = ['#0346D3', '#EBB34D', '#14A599', '#7D95FC', '#F19350', '#862B77', 
                '#F26266', '#0283EA', '#16BA58', '#6E00FF', '#FFCE2F', '#F08C45']
            const index = `${idx}`
            option.xAxis.push({
                id: index,
                gridId: index,
                type: 'category',
                name: dataItem[0],
                nameTextStyle: {
                    color: '#fff',
                },
                nameLocation: 'middle',
                nameGap: 3,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: categoryType,
                z: 200
 
            })
            option.yAxis.push({
                id: index,
                gridId: index,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false,
                },
                z: 200
            })
            option.grid.push({
                id: index,
                width: 30,
                height: 40,
                left: coord[0] - 15,
                top: coord[1] - 15,
                z: 200
            })
            option.series.push({
                type: 'custom',
                xAxisId: index,
                yAxisId: index,
                data: inflationData,
                z: 200,
                renderItem(params, api) {
                    if (!api.value(1)){
                        return null
                    }
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'MyCubeRect', // shape 屬性描述了這個矩形的像素位置和大小
                                shape: {
                                    api,
                                    xValue: api.value(0), // 表示取出當前 dataItem 中第一個維度的數值
                                    yValue: api.value(1), 
                                    x: location[0],
                                    y: location[1]
                                
                                },
                                style: {
                                    fill: colorList[params.dataIndex], // 平面顏色
                                }
                            },
                            {
                                type: 'MyCubeShadow',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1]
                                },
                                style: {
                                    fill: colorListShadow[params.dataIndex], // 平面顏色
                                }
                            }]
                    }
                }
            })
        })
        this.myChart.resize()
        this.myChart.setOption(option)
    }

    initEcharts = () => {
        this.myChart = echarts.init(document.getElementById('chart-bar'))
        
        const option = {
            animation: false,
            // 地圖背景顏色
            // backgroundColor: transition,
            tooltip: {
                trigger: 'axis'
            },
            z: 100,
            geo: {
                map: '地市地圖',
                // silent: true,
                roam: false,
                aspectScale: 1.5,
                zoom: 1, // 地圖初始大小
                center: [112.699885, 22.31442], // 初始中心位置
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                // 地區塊兒顏色
                itemStyle: {
                    normal: {
                        areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#409EFD'
                        },
                        {
                            offset: 1,
                            color: '#0866CC'
                        }
                        ], false),
                        borderColor: '#fff',
                        borderWidth: '2',
                    },
                    emphasis: {
                        areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#38D2FF'
                        },
                        {
                            offset: 1,
                            color: '#0396E8'
                        }
                        ], false),
                    }
                }
            },
            series: []
        }
        // 繪制圖表
        this.myChart.setOption(option)
    }
    
    render() {
        return (
            <div styleName="chart-map-main" id="chart-bar" />
        )
    }
}
ChartMap.defaultProps = {
}

ChartMap.propTypes = {
}

export default ChartMap