大家都知道，一般情况下，想要使用前端设置一个 中国地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。

什么是 Echarts 插件

中国地图成品展示

cnpm install echarts@4.9.0 --save
  
引入 Echarts 插件（在vue中一般都是引入到main.js组件中）
  
import echarts from 'echarts'
// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts
  
在js中使用需要进行的步骤：
  
引入中国地图的地址在 node_modules_echarts@4.9.0@echarts\map\json 文件夹下
 
1. 先设置一个显示的标签
<div id="main" style="width: 600px;height:400px;"></div>
2. 引入中国地图代码
import geoJson from "echarts/map/json/china";
3. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main"));
4. 注册地图
this.$echarts.registerMap("china", geoJson);
5. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {}
6. 将配置和数据添加到实例中
myChart.setOption(option);
注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
 地图分为：世界地图，中国地图，省份地图，市区地图
 
下面代码的意思，可以跳转至官方网站进行查看
 
完成中国地图代码
 
<template>
  <div class="map-view">
    <div id="main"></div>
</template>
<script>
import geoJson from "echarts/map/json/china";
export default {
  data() {
    return {};
  mounted() {
    let myChart = this.$echarts.init(document.getElementById("main"));
    // 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
    // 地图：世界地图，中国地图，省份地图，市区地图
    this.$echarts.registerMap("china", geoJson);
    myChart.setOption({
      // 背景色
      backgroundColor: "rgb(121,145,200)",
      // 配置项(组件)
      geo: {
        map: "china",
        // 地图的长宽比例
        aspectScale: 0.75,
        // 图层
        zoom: 1.1,
        // 样式
        itemStyle: {
          // 标准
          normal: {
            // 地图区域的颜色
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              // 颜色的步骤
              colorStops: [
                  offset: 0,
                  color: "#09132c",
                  offset: 1,
                  color: "#274d68",
              // 延长作用域
              globalCoord: true,
            // 盒子的阴影
            shadowColor: "rgb(58,115,192)",
            // 偏移
            shadowOffsetX: 10,
            shadowOffsetY: 11,
        region: [
            name: "南海诸岛",
            itemStyle: {
              opacity: 0,
      series: [
        // 配置地图相关的数据参数
          type: "map",
          label: {
            normal: {
              // 显示文字
              show: true,
              textStyle: {
                color: "#1DE9B6",
            emphasis: {
              textStyle: {
                color: "rgb(183,185,14)",
          // 图层
          zoom: 1.1,
          map: "china",
          itemStyle: {
            normal: {
              // 背景色
              backgroundColor: "rgb(147,235,248)",
              // 边框
              borderWidth: 1,
              // 区域颜色
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                // 文档
                r: 0.8,
                colorStops: [
                  { offset: 0, color: "rgb(34,54,150)" },
                  { offset: 1, color: "rgb(89,128,142)" },
                // 全局生效
                globalCoord: true,
            // 高亮效果
            emphasis: {
              areaColor: "rgb(46,229,206)",
              borderWidth: 0.1,
  methods: {},
</script>
<style lang="scss" scoped>
.map-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
</style>
以上就是 vue基于 Echarts 插件，实现中国地图功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
 我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog
                    大家都知道，一般情况下，想要使用前端设置一个 中国地图 需要使用  canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用地图分为：世界地图，中国地图，省份地图，市区地图引入中国地图代码import geoJson from "echarts/map/json/china";注册地图this.$echarts.registerMap("china", geoJson);
				
现在我们经常会用到一些地图应用，无论是在网页上还是手机App中，地图貌似是一个不可或缺的应用。本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件，有几款地图比较实用，有些则是具有抽象的概念，很有个性化。
1、HTML5世界地图 划分世界区域并显示国家名
这是一款基于HTML5的世界地图应用，它的特点是可以将地图中的各个国家区域进行划分，鼠标滑过时即可显示该区域对应的国家名...
				
Echarts实现中国版地图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5xSwd4cP-1653831276441)(C:\Users\blank\Desktop\ChinaEarchs.png)]
项目中下载echarts；
npm i echarts --save
全局注册echarts；（main.js中全局引入）
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
  onReady() {
    const ctx = uni.createCanvasContext('mychart')
    const chart = echarts.init(ctx)
    // echarts配置项
    const option = {...}
    // 设置图表配置项并渲染
    chart.setOption(option)
</script>
以上就是在uniapp中使用echarts插件的基本流程。需要注意的是，echarts插件的使用方式和原生的使用方式基本一致，只是在uniapp中需要通过canvas元素来绑定echarts实例。