标签：name setup myChart value dataCity Vue3 data echarts 函数

在做项目实现请求接口数据，作用在echarts地图上时遇到了问题
首先在echart初始化配置数据的格式是data这里

series: [
  {
     type: 'scatter',
     coordinateSystem: 'geo' // 对应上方配置
   },
   {
     name: '用户数量', // 浮动框的标题
     type: 'map',
     geoIndex: 0,
     data: [{ name: '黔南布依族苗族自治州', value: 1 }]
   }
 ]

在setup函数里定义了在echarts初始化时用到的数据

const dataCity = ref([]);
GET_CITY_STAR({ province: pText }).then(res => {
  dataCity.value = res.data.data.map(item => {
    return {
      name: item.name,
      value: 1
    };
  });
});
console.log(dataCity);

在打印dataCity时发现没有数据
原因是setup函数是一个同步函数，而请求接口时异步，异步函数.then里的操作是在同步操作后，因此需要把echarts初始化函数写在then里
修改后：

const chinaConfigure = subText => {
  let myChart = echarts.init(document.getElementById('myEchart')); //这里是为了获得容器所在位置
  window.onresize = myChart.resize;
  GET_CITY_STAR({ province: pText }).then(res => {
    dataCity.value = res.data.data.map(item => {
      return {
        name: item.name,
        value: 1
      };
    });
    // 异步获取数据成功
    // 初始化echarts
    myChart.setOption({
      ..
      /** 相关配置 */
      ...
      series: [
        {
          type: 'scatter',
          coordinateSystem: 'geo' // 对应上方配置
        },
        {
          name: '用户数量', // 浮动框的标题
          type: 'map',
          geoIndex: 0,
          data: dataCity.value // 获取到接口返回的数据
        }
      ]
    });
    myChart.on('click', function (params) {
      console.log(params.data); //此处写点击事件内容
      if (params.data?.value == 1) {
        itemShow.value = true;
      } else {
        itemShow.value = false;
      }
    }); //点击事件，此事件还可以用到柱状图等其他
  });
};

完美解决了问题

标签：name,setup,myChart,value,dataCity,Vue3,data,echarts,函数
来源： https://blog.csdn.net/qq_37669585/article/details/121801989

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。