更新记录

1.0.0（2025-10-10） 下载此版本

1、生成地理图表（理论上其他图表也支持，具体未测试）

2、支持拖拽、放大、点击

3、自定义显示区域（通过区划JSON）

4、灵活的图表样式修改（同echarts）

5、小程序兼容性调整

平台兼容性

uni-app(4.15)

fg-ec-wxecharts，基于echarts微信小程序插件的地理图表模板

基于echarts微信小程序插件的整合定制版本，仅适用于微信小程序，支持地理图表（理论上也支持其他图表，需要自己修改）渲染、放大拖拽、区划点击等。

标签：Echarts 图表 小程序图表 地图图表

环境：Vue2

支持平台：微信小程序

注意：组件引入不包含wxcomponents原生插件内容，强烈建议模板使用！

核心使用示例：

1、页面引入：

<template>
    <view>
        <EcWXCharts @click="checkItem" />
    </view>
</template>

<script>
    import EcWXCharts from "@/components/fg-ec-wxcharts/fg-ec-wxcharts.vue"
    export default {
        components: { EcWXCharts },
        data() {
            return {}
        },
        onLoad() {},
        methods: {
            checkItem(item){
                console.log(item);
                uni.showToast({
                    title: `点击了${item.name}`,
                    icon: 'none'
                })
            }
        }
    }
</script>

2、pages.json使用小程序组件：(必须)

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "地理图表"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents": { // 微信小程序原生插件，此处全局引入组件，写在上面pages页面中为局部引入
            "ec-canvas": "/wxcomponents/ec-canvas/ec-canvas"
        }
    }
}

组件参数说明

注：因为是模板发布（微信原生插件关系），默认组件化并不深，其本身也并未抛出更多参数，需要根据实际需求自定义添加所需组件的控制参数。（图表的实际需求大多不一致，建议按需求自己修改组件的代码，此模板主要解决当前的echarts小程序插件对于最新的语法、规范以及标准等而出现的引入失败、实例创建失败等问题而做的引入示例。）

其他说明

1、小程序开发工具环境下可能存在层级过高、图表位置固定等展示问题，在真机环境是正常的。

2、配置内容基本同echarts，文档参照echarts文档即可。（鸣谢：https://github.com/ecomfe/echarts-for-weixin）

3、使用wx小程序原生组件，官网的代码有一些小问题，比如注册事件不生效、页面展示比例等，已修改源码，如不需要可以从官网或github替换wxcomponents的内容。

4、目的性的解决某些插件存在的放大、拖拽图表后点击区域存在的点击不准确（点击偏移）问题。（同类别的插件采用了页面xy轴定位计算点击位置的模式，此点击模式不适用于有要求放大以及拖动的需求）

更新日志

V1.0.0

1、生成地理图表（理论上其他图表也支持，具体未测试）

2、支持拖拽、放大、点击

3、灵活的图表样式修改（同echarts）

4、小程序兼容性调整