ECharts 自定义地图 以及 对应区域添加图表

一、 ECharts 如何自定义绘图

ECharts 自定义绘图需要用到 GeoJson 数据来绘制图形

二、如何获取 GeoJson 数据

• 通过百度在网上寻找需要的 GeoJson 数据
• 通过 GeoJsonMap 使用其绘制工具，来自定义绘制想要的图形，然后生成 GeoJson

三、ECharts 如何使用 GeoJson

通过 ECharts 的 API registerMap 来注册Map

示例：

import echarts from 'echarts' 
// axios 获取geoJson数据的请求，具体我就不写，大家都清楚
getGeoJson()
    .then((res) => {
        const geoJson = res
        echarts.registerMap('GeoJsonName', geoJson)
    })

四、注册后如何使用

方法1：

const option = {
    geo: [
        {
            map: 'GeoJsonName'
            // .... 其他一些列配置
        }
    ]
}

方法2：

const option = {
    series: [
        {
            type: 'map',
            map: 'GeoJsonName'
            // .... 其他一些列配置
        }
    ]
}

五、如何在地图制定的区域添加 柱状图、折线图、饼图

这里以柱状图为例

1、首先，需要一组需要展示的数据

const barData = [
    { name: '艾欧尼亚', value: [666, 999]},
    { name: '德玛西亚', value: [999, 666]},
    // ...... 其他一些数据
]

2、其次，需要知道图表放在那个位置，也就是说需要一组经纬度的数据

关于点位的获取，可以通过坐标拾取器来获取 百度地图拾取坐标系统

const barCoord = {
    '艾欧尼亚': [111.147147, 28.233233], // 这里是我乱填的...
    '德玛西亚': [112.147147, 29.233233],
    // ...... 其他一些数据
}

3、然后，需要通过这些数据，去生成x轴、y轴、图表

myChart = echarts.init(document.getElementById('chart'))

要使用 convertToPixel API 必须把之前使用了 GeoJson 数据的图表渲染 myChart.setOption(option) 才能使用

const option = {
    grid: [],
    xAxis: [],
    yAxis: [],
    series: [
        {
            type: 'map',
            map: 'GeoJsonName'
            // .... 其他一些列配置
        }
    ]
}

barData.forEach((item, index) => {
    const {name, value} = item
    const itemCoord = barCoord[name]
    
    // 这里使用 series 中的第一个数据的坐标来计算，也可以使用 geo 来计算
    // 详细的使用请查看官方文档
    const itemCoord2D = myChart.convertToPixel({seriesIndex: 0, itemCoord})
    
    // 首先来设置每个图表的 grid 即位置
    option.grid.push({
        id: index,
        width: 50,
        height: 50,
        top: itemCoord2D[1] ± 0, // 可以自行计算坐标位置
        left: itemCoord2D[0] ± 0, //  请写 demo 的时候，不要把 ± 0 带进去。 233
    })
    
    // 生成每个图表的 y轴
    option.yAxis.push({
        id: index,
        gridId: index, // 对应上方的 grid 配置
        // ...... 其他一些配置
    })
    
    // 生成每个图表的 x轴
    option.xAxis.push({
        id: index,
        gridId: index,
        type: 'category',
        name: name,
        data: [name] // 这里是 把 x轴 作为类目轴，类目即使区域名称
        // ...... 其他一些配置
    })
    
    // 这里 柱状图 做显示呢，看系列，多系列需要轮询
    const series = ['英雄', '战力']
    series.forEach((seriesItem, seriesIndex) => {
        name: seriesItem,
        type: 'bar',
        xAxisId: index,
        yAxisId: index,
        data: [value[seriesIndex]]
    })
    
    myChart.setOption(option)
})

六、地图区域点击事件操作

1、事件绑定

params 具体有哪些数据请查阅 events 文档

myChar.on('click', (params) => {
    // params 看上上面
    
    // ...... 一些操作
    
    // 这里我踩了坑
    // 这里 我操作的时候 修改了option所以对图形重绘了
    // 导致 区域的选中没有了
    // 可以通过 dispatchAction 来手动 高亮 区域，注意得再 myChart.setOption(option) 后
    myChart.dispatchAction({
        type: 'mapSelect',
        seriesIndex: 0, // 需要 高亮的 系列索引
        dataIndex: params.dataIndex
    })
})