后台数据也调出来，但是不会显示在页面上，arr应该放在哪里显示
<template>
<div>
<div class="title">国内疫情地图</div>
<!-- 地图容器 -->
<div id="main" style="width:7rem;height:8rem"></div>
</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: [],
};
},
name: "Chinamap",
// echarts实例-创建地图
mounted() {
// 生命周期去调用
this.getchart();
api.getChinadata().then((res)=>{
console.log('国内地图数据',res.data);
let citys = res.data.retdata;
const conve=function(citys){
let arr =[]
for (let i=0;i<citys.length;i++){
let obj = {}
obj.name = citys[i].xArea;
obj.value = citys[i].curConfirm; //现存确诊人数
arr.push(obj)
}
}
this.arr = arr
console.log('城市数据',arr)
})
},
methods: {
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);
},
},
};
</script>
<style lang="scss" scoped></style>
