浅谈AI代码编辑器使用

JianZhen✓2026-05-04 8:49

日常开发中开发者为了效率都要借助AI，让AI直接修改各个文件来实现需求是最快的办法，而大部分公司是不会付费去买token给开发用的

只能自己想办法了，国外的AI工具大多需要付费且翻墙，，gpt和gemini都要翻墙加买订阅账号，使用咸鱼还算便宜

对于工作量大的朋友来说，真的可以订阅尝试下，对效率提升很大，在用来吃饭的工具上就不要省钱了

不过大家作为一个普通开发，使用国内的免费AI工具往往就能满足要求了，杀鸡用不着牛刀，国内这么多免费的ai，其实都能满足需要

比如下方这些：

像Qoder虽然不付费不支持上传解析图片，但通过文字描述图片内容，也能把需求所需代码给做出来

如提示词：（

你是一位经验丰富的前端开发者，我现在在开发vue2+elementUI组成的前端项目,

需求如下：在当前page.vue页面的涉及舆情筛选框旁边新增一个增加按钮，点击按钮打开事件分类维护弹窗（可生成组件），弹窗内是涉及舆情筛选框同数据源循环遍历出来的值，在每一项旁边会有新增、删除、编辑按钮，功能与接口调用传参等复刻DataDic.vue文件内容，

根据需求生成相关页面或功能，不要使用?.可选链操作符，不要使用===全等符号必要时候用==，不要过度拆分过度封装，

请按照需求生成代码,帮我生成粘贴即用的代码直接应用于项目中,可针对页面代码写法进行优化，要求是代码可读性高,请结合上述文字继续优化代码，方便后期维护

着重强调：最后请返回完整的代码,不要省略任何东西,可以添加一些必要的注释，着重强调:不要删除任何已有注释,生成的代码应完整且准确

）

（我需要一份前端交接说明文档,帮我检索整个项目，分析项目结构,生成一份说明文档,主要写清楚：项目结构，各模块的作用，模块之间的交互逻辑,可参考一下附件文档内容）

Trea也挺好用，甚至还自执行语法检查

我常用提示词如下

html 复制代码 
你是一位经验丰富的前端开发者，我现在在开发vue2+elementUI组成的前端项目,
需求如下：（
图1是原型图，图2图3是需求新增内容说明，请根据这三张图帮我把monitor.vue页面缺失的部分补充完整，要求功能齐全，代码部分可参考模仿其他页面写法，图4图5是接口文档，请参考已有页面调用接口方式调用取参传参以实现功能，查询列表接口新增了两个字段（detection：是否检测 1-已检测 0-未监测
artificial：检测来源 1-人工 0-系统），同时（detection：是否检测 1-已检测 0-未监测
artificial：检测来源 1-人工 0-系统）也是顶部筛选区域检测状态筛选框和检测来源筛选框的值。其中改变任务接口文档如下：（请求URL：
- /disposalMonitor/changeTaskStatus?taskId=&status=
请求方式：
- GET
参数：
参数名必选类型说明taskId是String任务idstatus是String任务状态：run-运行，cancel-取消，stop-暂停
返回示例
复制{
    "code": 200,
    "msg": "success",
    "data": 1,
    "count": null
}
））
根据需求生成相关页面或功能，不要使用?.可选链操作符，不要使用===全等符号必要时候用==，不要过度拆分过度封装，
请按照需求生成代码,帮我生成粘贴即用的代码直接应用于项目中,可针对页面代码写法进行优化，要求是代码可读性高,请结合上述文字继续优化代码，方便后期维护
着重强调：最后请返回完整的代码,不要省略任何东西,可以添加一些必要的注释，着重强调:不要删除任何已有注释,生成的代码应完整且准确

但是像这种提示词一次给出太多可能会出现下面这种情况

所以可以一段一段来生成

javascript 复制代码 
1、图1上面红框标起来的列表三个字段排序支持，可借鉴其他已有 @页面图标 @，列表接口传参如括号里所示（sort   排序字段：1-发布时间，2-检测时间，3-处置状态
sortBy   排序方式：1-降序，2-升序）
2、图2，弹框任务后，针对红框里这种暂停的，字体变蓝色，可以点击打开弹框选择开启或者取消，已完成的字体显示绿色，取消的字体显示灰色

还有个缺点是，这个编辑器不会帮我们还原原型图布局和样式，还原度比较差，相比起来qoder生成的页面比较美观。

生成的代码容易产生代码冗余，重复代码堆叠

Lingma

使用到这个阿里的编辑器后开发效率明显变低了，很多东西都被理解错误且实现过程混乱，而且代码生成过程很慢

比如提示词如下：

Go 复制代码 
你是一位经验丰富的前端开发者，我现在在开发vue2大屏前端项目,
需求如下：（现在需要复制Screen.vue页面新增一个HeNanScreen.vue文件，并且可以通过名为HeNanScreen的路由路径打开，针对HeNanScreen.vue：去掉页面里的热点词云，让预警信息区域高度变长，如图1）

根据需求生成相关页面或功能，不要使用?.可选链操作符，不要使用===全等符号必要时候用==，不要过度拆分过度封装，
请按照需求生成代码,帮我生成粘贴即用的代码直接应用于项目中,可针对页面代码写法进行优化，要求是代码可读性高,请结合上述文字继续优化代码，方便后期维护
着重强调：最后请返回完整的代码,不要省略任何东西,可以添加一些必要的注释，着重强调:不要删除任何已有注释,生成的代码应完整且准确

这个编辑器是理解不了的，直接访问次数过多崩溃了

像下面这种提示词更是执行的一塌糊涂：

html 复制代码 
仿照下方代码，在当前引用文件内进行修改，让页面正常显示：<template>

  <div class="col-10">

    <h3><b>地域热点</b></h3>

    <div class="hometable2 hometable" style="height: 400px">

      <div class="fl echartsTable col-98">

        <!--<div class="echartsTit">

                        <p class="fl">

                            <ul>

                                <li v-for="(item,i) in timeNav2" :key="i" :class="{active:item.id==istime2}" 
                            </ul>

                        </p>

                        <p class="fr">



                             <el-radio-group v-model="radio2" size="mini" 
                                <el-radio-button :label=1>天</el-radio-button>

                                <el-radio-button :label=7>周</el-radio-button>

                                <el-radio-button :label=30>月</el-radio-button>

                            </el-radio-group>

                        </p>

                    </div>-->

        <div style="height: 20px"></div>

        <div class="echartsCont">

          <div

            class="fl col-68 echartsTable"

            id="homeArea"

            style="height: 333px"

          ></div>

          <div class="fr col-28 echartsTable">

            <table class="table">

              <tbody>

                <tr class="trTit">

                  <td style="width: 100%" colspan="3">{{ pmTitle }}热度排名</td>

                </tr>

                <tr

                  v-for="(missions, index) in AreaArr"

                  :key="index"

                  v-if="index < 10"

                  class="trCont"

                >

                  <td style="width: 10%">{{ index + 1 }}</td>

                  <td class="province" style="width: 40%">{{ missions.province }}</td>

                  <td style="width: 50%">{{ missions.countNum }}</td>

                </tr>

              </tbody>

            </table>

          </div>

        </div>

      </div>

    </div>

    <transition name="el-fade-in-linear">

      <v-Territory

        v-if="territory"

        :territory="territory"

        
        :areaData="areaData"

        :radio2="radio2"

        :istime2="istime2"

        title="地域舆情"

      >

      </v-Territory>

    </transition>

  </div>

</template>



<script>

import Territory from "./Territory.vue";

import "../../../node_modules/echarts/map/js/province/beijing.js";

import "../../../node_modules/echarts/map/js/province/tianjin.js";

import "../../../node_modules/echarts/map/js/province/hebei.js";

import "../../../node_modules/echarts/map/js/province/shanxi.js";

import "../../../node_modules/echarts/map/js/province/neimenggu.js";

import "../../../node_modules/echarts/map/js/province/liaoning.js";

import "../../../node_modules/echarts/map/js/province/jilin.js";

import "../../../node_modules/echarts/map/js/province/heilongjiang.js";

import "../../../node_modules/echarts/map/js/province/shanghai.js";

import "../../../node_modules/echarts/map/js/province/jiangsu.js";

import "../../../node_modules/echarts/map/js/province/zhejiang.js";

import "../../../node_modules/echarts/map/js/province/anhui.js";

import "../../../node_modules/echarts/map/js/province/fujian.js";

import "../../../node_modules/echarts/map/js/province/jiangxi.js";

import "../../../node_modules/echarts/map/js/province/shandong.js";

import "../../../node_modules/echarts/map/js/province/henan.js";

import "../../../node_modules/echarts/map/js/province/hunan.js";

import "../../../node_modules/echarts/map/js/province/hubei.js";

import "../../../node_modules/echarts/map/js/province/guangdong.js";

import "../../../node_modules/echarts/map/js/province/guangxi.js";

import "../../../node_modules/echarts/map/js/province/hainan.js";

import "../../../node_modules/echarts/map/js/province/chongqing.js";

import "../../../node_modules/echarts/map/js/province/sichuan.js";

import "../../../node_modules/echarts/map/js/province/guizhou.js";

import "../../../node_modules/echarts/map/js/province/yunnan.js";

import "../../../node_modules/echarts/map/js/province/xizang.js";

import "../../../node_modules/echarts/map/js/province/shanxi1.js";

import "../../../node_modules/echarts/map/js/province/gansu.js";

import "../../../node_modules/echarts/map/js/province/qinghai.js";

import "../../../node_modules/echarts/map/js/province/ningxia.js";

import "../../../node_modules/echarts/map/js/province/xinjiang.js";

//import '../../../node_modules/echarts/map/js/province/dalian.js'



//import '../../../node_modules/echarts/map/js/province/ningbo.js'

//import '../../../node_modules/echarts/map/js/province/xiamen.js'

//import '../../../node_modules/echarts/map/js/province/shenzhen.js'

import china from "echarts/map/json/china.json";

export default {

  components: {

    "v-Territory": Territory,

  },

  props: ["mapText", "mapName", "classifyId"],

  data() {

    return {

      territory: false,

      timeNav2: [

        {

          name: "地域舆情",

          id: 1,

        },

        //          {

        //              name:"各地银保监局",

        //              id:2

        //          },

      ], //地域选项

      istime2: 1,

      radio2: 30,

      AreaArr: [], //地域热点

      areaData: {},

      addressData: [

        {

          id: "",

          shorter: "",

          name: "全国",

        },

        {

          id: 110000000000,

          id2: 110100000000,

          shorter: "北京",

          name: "北京",

        },

        {

          id: 120000000000,

          id2: 120100000000,

          shorter: "天津",

          name: "天津",

        },

        {

          id: 130000000000,

          shorter: "河北",

          name: "河北",

        },

        {

          id: 140000000000,

          shorter: "山西",

          name: "山西",

        },

        {

          id: 150000000000,

          shorter: "内蒙古",

          name: "内蒙古",

        },

        {

          id: 210000000000,

          shorter: "辽宁",

          name: "辽宁",

        },

        {

          id: 220000000000,

          shorter: "吉林",

          name: "吉林",

        },

        {

          id: 230000000000,

          shorter: "黑龙江",

          name: "黑龙江",

        },

        {

          id: 310000000000,

          id2: 310100000000,

          shorter: "上海",

          name: "上海",

        },

        {

          id: 320000000000,

          shorter: "江苏",

          name: "江苏",

        },

        {

          id: 330000000000,

          shorter: "浙江",

          name: "浙江",

        },

        {

          id: 340000000000,

          shorter: "安徽",

          name: "安徽",

        },

        {

          id: 350000000000,

          shorter: "福建",

          name: "福建",

        },

        {

          id: 360000000000,

          shorter: "江西",

          name: "江西",

        },

        {

          id: 370000000000,

          shorter: "山东",

          name: "山东",

        },

        {

          id: 410000000000,

          shorter: "河南",

          name: "河南",

        },

        {

          id: 420000000000,

          shorter: "湖北",

          name: "湖北",

        },

        {

          id: 430000000000,

          shorter: "湖南",

          name: "湖南",

        },

        {

          id: 440000000000,

          shorter: "广东",

          name: "广东",

        },

        {

          id: 450000000000,

          shorter: "广西",

          name: "广西",

        },

        {

          id: 460000000000,

          shorter: "海南",

          name: "海南",

        },

        {

          id: 500000000000,

          id2: 500100000000,

          shorter: "重庆",

          name: "重庆",

        },

        {

          id: 510000000000,

          shorter: "四川",

          name: "四川",

        },

        {

          id: 520000000000,

          shorter: "贵州",

          name: "贵州",

        },

        {

          id: 530000000000,

          shorter: "云南",

          name: "云南",

        },

        {

          id: 540000000000,

          shorter: "西藏",

          name: "西藏",

        },

        {

          id: 610000000000,

          shorter: "陕西",

          name: "陕西",

        },

        {

          id: 620000000000,

          shorter: "甘肃",

          name: "甘肃",

        },

        {

          id: 630000000000,

          shorter: "青海",

          name: "青海",

        },

        {

          id: 640000000000,

          shorter: "宁夏",

          name: "宁夏",

        },

        {

          id: 650000000000,

          shorter: "新疆",

          name: "新疆",

        },

        {

          id: 810000000000,

          shorter: "xianggang",

          name: "香港",

        },

        {

          id: 820000000000,

          shorter: "澳门",

          name: "澳门",

        },

        {

          id: 710000000000,

          shorter: "台湾",

          name: "台湾",

        },

        {

          id: 210200000000,

          shorter: "dalian",

          name: "大连",

        },

        {

          id: 330200000000,

          shorter: "ningbo",

          name: "宁波",

        },

        {

          id: 350200000000,

          shorter: "xiamen",

          name: "厦门",

        },

        {

          id: 370200000000,

          shorter: "qingdao",

          name: "青岛",

        },

        {

          id: 440300000000,

          shorter: "shenzhen",

          name: "深圳",

        },

        {

          id: 3280,

          shorter: "shizuishan",

          name: "石嘴山市",

        },

      ],

      qingdao: require("../../../static/json/qingdao.json"),

      xiamen: require("../../../static/json/xiamen.json"),

      shenzhen: require("../../../static/json/shenzhen.json"),

      ningbo: require("../../../static/json/ningbo.json"),

      dalian: require("../../../static/json/dalian.json"),

      shizuishan: require("../../../static/json/shizuishan.json"),

      pmTitle: "",

    };

  },

  mounted() {

    // this.getMap()//舆情趋势

  },

  methods: {

    //地域热点

    showTime1(id) {

      this.radio2 = id;

      this.getMap();

    },

    changeArea(id) {

      this.istime2 = id;

      this.getMap();

    },

    close() {

      this.territory = false;

    },

    getMap() {

      var mapUrl = "",

        that = this,

        seriesName = this.mapName;

      if (this.istime2 == 1) {

        mapUrl = "/cbrc/homePage/map/mapChart";

      } else if (this.istime2 == 2) {

        mapUrl = "/cbrc/homePage/map/mapChart2";

      }

      // 基于准备好的dom，初始化echarts实例

      let homeArea = this.$echarts.init(document.getElementById("homeArea"));

      this.$echarts.registerMap("qingdao", this.qingdao);

      this.$echarts.registerMap("xiamen", this.xiamen);

      this.$echarts.registerMap("ningbo", this.ningbo);

      this.$echarts.registerMap("shenzhen", this.shenzhen);

      this.$echarts.registerMap("dalian", this.dalian);

      this.$echarts.registerMap("shizuishan", this.shizuishan);

      this.$echarts.registerMap("china", china);

      homeArea.showLoading({

        text: "读取数据中...", //loading，是在读取数据的时候显示

      });

      homeArea.clear();

      this.$http({

        method: "GET",

        url: mapUrl,

        params: {

          time: this.radio2,

          industryId: this.classifyId,

        },

      }).then((res) => {

        if (res) {

          homeArea.hideLoading();

          var data = res.data.data.result;

          var newMap = "";

          var serName = "";

          var addressId = res.data.data.addressId;

          if (res.data.data.addressId == null) {

            var addressId = "";

          }

          for (var i = 0; i < this.addressData.length; i++) {

            if (addressId == this.addressData[i].id || addressId == this.addressData[i].id2) {

              newMap = this.addressData[i].shorter;

              this.pmTitle = this.addressData[i].name;

而qoder就可以做到两个页面代码融合这种

html 复制代码 
帮我生成一个新文件命名为Screen4HeNan,融合ScreenFour.vue的代码与下文代码，需要完全保留ScreenFour.vue的样式结构，但是echarts地图区域要使用下文代码的地图区域全部内容包括接口调用，代码：<template>

  <div class="col-10">

    <h3><b>地域热点</b></h3>

    <div class="hometable2 hometable" style="height: 400px">

      <div class="fl echartsTable col-98">

        <!--<div class="echartsTit">

                        <p class="fl">

                            <ul>

                                <li v-for="(item,i) in timeNav2" :key="i" :class="{active:item.id==istime2}" 
                            </ul>

                        </p>

                        <p class="fr">



                             <el-radio-group v-model="radio2" size="mini" 
                                <el-radio-button :label=1>天</el-radio-button>

                                <el-radio-button :label=7>周</el-radio-button>

                                <el-radio-button :label=30>月</el-radio-button>

                            </el-radio-group>

                        </p>

                    </div>-->

        <div style="height: 20px"></div>

        <div class="echartsCont">

          <div

            class="fl col-68 echartsTable"

            id="homeArea"

            style="height: 333px"

          ></div>

          <div class="fr col-28 echartsTable">

            <table class="table">

              <tbody>

                <tr class="trTit">

                  <td style="width: 100%" colspan="3">{{ pmTitle }}热度排名</td>

                </tr>

                <tr

                  v-for="(missions, index) in AreaArr"

                  :key="index"

                  v-if="index < 10"

                  class="trCont"

                >

                  <td style="width: 10%">{{ index + 1 }}</td>

                  <td class="province" style="width: 40%">{{ missions.province }}</td>

                  <td style="width: 50%">{{ missions.countNum }}</td>

                </tr>

              </tbody>

            </table>

          </div>

        </div>

      </div>

    </div>

    <transition name="el-fade-in-linear">

      <v-Territory

        v-if="territory"

        :territory="territory"

        
        :areaData="areaData"

        :radio2="radio2"

        :istime2="istime2"

        title="地域舆情"

      >

      </v-Territory>

    </transition>

  </div>

</template>



<script>

import Territory from "./Territory.vue";

import "../../../node_modules/echarts/map/js/province/beijing.js";

import "../../../node_modules/echarts/map/js/province/tianjin.js";

import "../../../node_modules/echarts/map/js/province/hebei.js";

import "../../../node_modules/echarts/map/js/province/shanxi.js";

import "../../../node_modules/echarts/map/js/province/neimenggu.js";

import "../../../node_modules/echarts/map/js/province/liaoning.js";

import "../../../node_modules/echarts/map/js/province/jilin.js";

import "../../../node_modules/echarts/map/js/province/heilongjiang.js";

import "../../../node_modules/echarts/map/js/province/shanghai.js";

import "../../../node_modules/echarts/map/js/province/jiangsu.js";

import "../../../node_modules/echarts/map/js/province/zhejiang.js";

import "../../../node_modules/echarts/map/js/province/anhui.js";

import "../../../node_modules/echarts/map/js/province/fujian.js";

import "../../../node_modules/echarts/map/js/province/jiangxi.js";

import "../../../node_modules/echarts/map/js/province/shandong.js";

import "../../../node_modules/echarts/map/js/province/henan.js";

import "../../../node_modules/echarts/map/js/province/hunan.js";

import "../../../node_modules/echarts/map/js/province/hubei.js";

import "../../../node_modules/echarts/map/js/province/guangdong.js";

import "../../../node_modules/echarts/map/js/province/guangxi.js";

import "../../../node_modules/echarts/map/js/province/hainan.js";

import "../../../node_modules/echarts/map/js/province/chongqing.js";

import "../../../node_modules/echarts/map/js/province/sichuan.js";

import "../../../node_modules/echarts/map/js/province/guizhou.js";

import "../../../node_modules/echarts/map/js/province/yunnan.js";

import "../../../node_modules/echarts/map/js/province/xizang.js";

import "../../../node_modules/echarts/map/js/province/shanxi1.js";

import "../../../node_modules/echarts/map/js/province/gansu.js";

import "../../../node_modules/echarts/map/js/province/qinghai.js";

import "../../../node_modules/echarts/map/js/province/ningxia.js";

import "../../../node_modules/echarts/map/js/province/xinjiang.js";

//import '../../../node_modules/echarts/map/js/province/dalian.js'



//import '../../../node_modules/echarts/map/js/province/ningbo.js'

//import '../../../node_modules/echarts/map/js/province/xiamen.js'

//import '../../../node_modules/echarts/map/js/province/shenzhen.js'

import china from "echarts/map/json/china.json";

export default {

  components: {

    "v-Territory": Territory,

  },

  props: ["mapText", "mapName", "classifyId"],

  data() {

    return {

      territory: false,

      timeNav2: [

        {

          name: "地域舆情",

          id: 1,

        },

        //          {

        //              name:"各地银保监局",

        //              id:2

        //          },

      ], //地域选项

      istime2: 1,

      radio2: 30,

      AreaArr: [], //地域热点

      areaData: {},

      addressData: [

        {

          id: "",

          shorter: "",

          name: "全国",

        },

        {

          id: 110000000000,

          id2: 110100000000,

          shorter: "北京",

          name: "北京",

        },

        {

          id: 120000000000,

          id2: 120100000000,

          shorter: "天津",

          name: "天津",

        },

        {

          id: 130000000000,

          shorter: "河北",

          name: "河北",

        },

        {

          id: 140000000000,

          shorter: "山西",

          name: "山西",

        },

        {

          id: 150000000000,

          shorter: "内蒙古",

          name: "内蒙古",

        },

        {

          id: 210000000000,

          shorter: "辽宁",

          name: "辽宁",

        },

        {

          id: 220000000000,

          shorter: "吉林",

          name: "吉林",

        },

        {

          id: 230000000000,

          shorter: "黑龙江",

          name: "黑龙江",

        },

        {

          id: 310000000000,

          id2: 310100000000,

          shorter: "上海",

          name: "上海",

        },

        {

          id: 320000000000,

          shorter: "江苏",

          name: "江苏",

        },

        {

          id: 330000000000,

          shorter: "浙江",

          name: "浙江",

        },

        {

          id: 340000000000,

          shorter: "安徽",

          name: "安徽",

        },

        {

          id: 350000000000,

          shorter: "福建",

          name: "福建",

        },

        {

          id: 360000000000,

          shorter: "江西",

          name: "江西",

        },

        {

          id: 370000000000,

          shorter: "山东",

          name: "山东",

        },

        {

          id: 410000000000,

          shorter: "河南",

          name: "河南",

        },

        {

          id: 420000000000,

          shorter: "湖北",

          name: "湖北",

        },

        {

          id: 430000000000,

          shorter: "湖南",

          name: "湖南",

        },

        {

          id: 440000000000,

          shorter: "广东",

          name: "广东",

        },

        {

          id: 450000000000,

          shorter: "广西",

          name: "广西",

        },

        {

          id: 460000000000,

          shorter: "海南",

          name: "海南",

        },

        {

          id: 500000000000,

          id2: 500100000000,

          shorter: "重庆",

          name: "重庆",

        },

        {

          id: 510000000000,

          shorter: "四川",

          name: "四川",

        },

        {

          id: 520000000000,

          shorter: "贵州",

          name: "贵州",

        },

        {

          id: 530000000000,

          shorter: "云南",

          name: "云南",

        },

        {

          id: 540000000000,

          shorter: "西藏",

          name: "西藏",

        },

        {

          id: 610000000000,

          shorter: "陕西",

          name: "陕西",

        },

        {

          id: 620000000000,

          shorter: "甘肃",

          name: "甘肃",

        },

        {

          id: 630000000000,

          shorter: "青海",

          name: "青海",

        },

        {

          id: 640000000000,

          shorter: "宁夏",

          name: "宁夏",

        },

        {

          id: 650000000000,

          shorter: "新疆",

          name: "新疆",

        },

        {

          id: 810000000000,

          shorter: "xianggang",

          name: "香港",

        },

        {

          id: 820000000000,

          shorter: "澳门",

          name: "澳门",

        },

        {

          id: 710000000000,

          shorter: "台湾",

          name: "台湾",

        },

        {

          id: 210200000000,

          shorter: "dalian",

          name: "大连",

        },

        {

          id: 330200000000,

          shorter: "ningbo",

          name: "宁波",

        },

        {

          id: 350200000000,

          shorter: "xiamen",

          name: "厦门",

        },

        {

          id: 370200000000,

          shorter: "qingdao",

          name: "青岛",

        },

        {

          id: 440300000000,

          shorter: "shenzhen",

          name: "深圳",

        },

        {

          id: 3280,

          shorter: "shizuishan",

          name: "石嘴山市",

        },

      ],

      qingdao: require("../../../static/json/qingdao.json"),

      xiamen: require("../../../static/json/xiamen.json"),

      shenzhen: require("../../../static/json/shenzhen.json"),

      ningbo: require("../../../static/json/ningbo.json"),

      dalian: require("../../../static/json/dalian.json"),

      shizuishan: require("../../../static/json/shizuishan.json"),

      pmTitle: "",

    };

  },

  mounted() {

    // this.getMap()//舆情趋势

  },

  methods: {

    //地域热点

    showTime1(id) {

      this.radio2 = id;

      this.getMap();

    },

    changeArea(id) {

      this.istime2 = id;

      this.getMap();

    },

    close() {

      this.territory = false;

    },

    getMap() {

      var mapUrl = "",

        that = this,

        seriesName = this.mapName;

      if (this.istime2 == 1) {

        mapUrl = "/cbrc/homePage/map/mapChart";

      } else if (this.istime2 == 2) {

        mapUrl = "/cbrc/homePage/map/mapChart2";

      }

      // 基于准备好的dom，初始化echarts实例

      let homeArea = this.$echarts.init(document.getElementById("homeArea"));

      this.$echarts.registerMap("qingdao", this.qingdao);

      this.$echarts.registerMap("xiamen", this.xiamen);

      this.$echarts.registerMap("ningbo", this.ningbo);

      this.$echarts.registerMap("shenzhen", this.shenzhen);

      this.$echarts.registerMap("dalian", this.dalian);

      this.$echarts.registerMap("shizuishan", this.shizuishan);

      this.$echarts.registerMap("china", china);

      homeArea.showLoading({

        text: "读取数据中...", //loading，是在读取数据的时候显示

      });

      homeArea.clear();

      this.$http({

        method: "GET",

        url: mapUrl,

        params: {

          time: this.radio2,

          industryId: this.classifyId,

        },

      }).then((res) => {

        if (res) {

          homeArea.hideLoading();

          var data = res.data.data.result;

          var newMap = "";

          var serName = "";

          var addressId = res.data.data.addressId;

          if (res.data.data.addressId == null) {

            var addressId = "";

          }

          for (var i = 0; i < this.addressData.length; i++) {

            if (addressId == this.addressData[i].id || addressId == this.addressData[i].id2) {

              newMap

融合后改动效果如下

融合前：

融合后

我们只需要微调样式就行了

相关推荐
byte轻骑兵2 小时前
蓝牙CAP规范解析：构建多设备协同的通用音频新生态
人工智能·音视频·le audio·低功耗音频·蓝牙通话
财经资讯数据_灵砚智能2 小时前
基于全球经济类多源新闻的NLP情感分析与数据可视化（夜间-次晨）2026年5月2日
人工智能·python·信息可视化·自然语言处理·ai编程
70asunflower2 小时前
从硬件决策哲学到生态竞争壁垒
人工智能·芯片
2zcode2 小时前
基于深度学习的口腔疾病自主诊断系统设计与实现（UI界面+训练代码+数据集）
人工智能·深度学习·口腔疾病
网络工程小王2 小时前
【LangChain Prompt 完整指南】提示词篇
运维·人工智能·学习
weixin_397578022 小时前
DeerFlow 2.0 深度解析
人工智能
量子-Alex2 小时前
【大模型】EvoLM EvoLM: 探寻遗失的语言模型训练动态
人工智能·语言模型·自然语言处理
你可以叫我仔哥呀2 小时前
Agent架构之ReAct
人工智能·ai·大模型
大象AI共学2 小时前
我让AI写了个网页，它自动变成了视频
人工智能·音视频
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04Codex 接入 DeepSeek API 完整配置文档05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06零基础教你claude code 接入 deepseek V4072026年AI前瞻：量子AI、具身智能与科学发现的新纪元08在Windows 11上安装Docker的踩坑记录09实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲10CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录