报的错误是Error in nextTick: "ReferenceError: arr is not defined"
ReferenceError: arr is not defined
```bash
<template>
<div>
<div class="title">国内疫情地图</div>
<!-- 地图容器 -->
<van-tabs v-model="active" animated @change="change">
<van-tab title="现存确诊">
<div id="nowmain" style="width: 7.5rem; height: 7rem"></div>
</van-tab>
<van-tab title="累计确诊">
<div id="main" style="width: 7.5rem; height: 7rem"></div>
</van-tab>
</van-tabs>
</div>
</template>
<script>
// 引入接口
import api from "../api/index";
// 引入echarts
import echarts1 from "echarts";
// 引入地图echart中有
import "echarts/map/js/china";
export default {
data() {
return {
active: 0,
arr: [],
nowarr:[],
};
},
name: "Chinamap",
// echarts实例-创建地图
mounted() {
// 生命周期去调用
// this.getchart();
api.getChinadata().then((res) => {
console.log("国内地图数据", res.data);
let citys = res.data.retdata;
let arr = []; //累计
let nowarr = []; //现存
for (let i = 0; i < citys.length; i++) {
let obj = {};
obj.name = citys[i].xArea;
obj.value = citys[i].confirm; //累计确诊人数
arr.push(obj);
let noe = {};
noe.name = citys[i].xArea;
noe.value = citys[i].curConfirm; //现存确诊人数
nowarr.push(noe);
}
// 等待加载
this.arr = arr;
this.nowarr = nowarr;
this.$nextTick(()=>{
// 切换才能渲染
// this.getchart(arr);
this.getchart1(nowarr);
})
console.log("城市数据", arr);
console.log("城市数据", nowarr);
});
},
methods: {
change(title){
console.log("-----",title);
if(title==1){
this.$nextTick(()=>{
this.getchart(arr);
})
}
},
getchart(data) {
// 基于准备好的dom，初始化我查人太少实例
var myChart = echarts1.init(document.getElementById("main"));
// 指定图标的配置项和数据
var option = {
tooltip: {
//悬浮弹框
triggerOn: "click", //提示框触发的条件
enterable: true, //鼠标是否可进入提示框浮层中，默认为false
formatter(item) {
//item=下面serves里面的data里面的每一项 //[{} ] data={} a b c d
return (
'<a href="#/citys/' +
item.name +
'" style="color:#fff">省份：' +
item.name +
"--详情</a>"
);
},
},
visualMap: [
{
//映射高亮颜色
orient: "horizontal", //水平的
type: "piecewise", //离散
bottom: 0,
textGap: 4,
itemGap: 4,
itemWidth: 10,
itemHeight: 10,
padding: 2,
textStyle: {
fontSize: 9,
},
pieces: [
// 配置颜色区间
{
min: 0,
max: 0,
color: "#FFFFFF",
},
{
min: 1,
max: 9,
color: "#FAEBD2",
},
{
min: 10,
max: 99,
color: "#E9A188",
},
{
min: 100,
max: 499,
color: "#D56355",
},
{
min: 500,
max: 999,
color: "#BB3937",
},
{
min: 1000,
max: 10000,
color: "#772526",
},
{
min: 10000,
color: "#480F10",
},
],
},
],
series: [
{
name: "省",
type: "map", //地图 bar line map
map: "china", //中国地图 需要引入地图china.js
roam: false,
zoom: 1.2,
aspectScale: 0.75,
top: 40,
layoutCenter: ["5%", "5%"],
label: {
normal: {
show: true,
textStyle: {
fontSize: 8,
},
},
},
itemStyle: {
normal: {
areaColor: "rgba(0,255,236,0)",
borderColor: "rgba(0,0,0,0.2)",
},
emphasis: {
// 选中的区域颜色及阴影效果等
areaColor: "rgba(255,180,0,0.8)",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
},
},
data,
},
],
};
myChart.setOption(option);
},
getchart1(data) {
// 基于准备好的dom，初始化我查人太少实例
var myChart1 = echarts1.init(document.getElementById("nowmain"));
// 指定图标的配置项和数据
var option = {
tooltip: {
//悬浮弹框
triggerOn: "click", //提示框触发的条件
enterable: true, //鼠标是否可进入提示框浮层中，默认为false
formatter(item) {
//item=下面serves里面的data里面的每一项 //[{} ] data={} a b c d
return (
'<a href="#/citys/' +
item.name +
'" style="color:#fff">省份：' +
item.name +
"--详情</a>"
);
},
},
visualMap: [
{
//映射高亮颜色
orient: "horizontal", //水平的
type: "piecewise", //离散
bottom: 0,
textGap: 4,
itemGap: 4,
itemWidth: 10,
itemHeight: 10,
padding: 2,
textStyle: {
fontSize: 9,
},
pieces: [
// 配置颜色区间
{
min: 0,
max: 0,
color: "#FFFFFF",
},
{
min: 1,
max: 9,
color: "#FAEBD2",
},
{
min: 10,
max: 99,
color: "#E9A188",
},
{
min: 100,
max: 499,
color: "#D56355",
},
{
min: 500,
max: 999,
color: "#BB3937",
},
{
min: 1000,
max: 10000,
color: "#772526",
},
{
min: 10000,
color: "#480F10",
},
],
},
],
series: [
{
name: "省",
type: "map", //地图 bar line map
map: "china", //中国地图 需要引入地图china.js
roam: false,
zoom: 1.2,
aspectScale: 0.75,
top: 40,
layoutCenter: ["5%", "5%"],
label: {
normal: {
show: true,
textStyle: {
fontSize: 8,
},
},
},
itemStyle: {
normal: {
areaColor: "rgba(0,255,236,0)",
borderColor: "rgba(0,0,0,0.2)",
},
emphasis: {
// 选中的区域颜色及阴影效果等
areaColor: "rgba(255,180,0,0.8)",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
},
},
data,
},
],
};
myChart1.setOption(option);
},
},
};
</script>
<style lang="scss" scoped></style>
```
