<template>
<div class="echarts" style="background:#3bafde">
<div :style="{height:‘600px‘,width:‘100%‘}" ref="myEchart"></div>
</div>
</template>
<script>
import config from ‘@/config‘
import echarts from "echarts";
import ‘../../../node_modules/echarts/map/js/china.js‘ // 引入中国地图数据，
export default {
name: "echarts",
props: ["userJson"],
data() {
return {
chart: null,
dataIOS:[], //两种类别数据定义
dataAndroid:[],
};
},
mounted() {
this.getBeforeDate() //拿取数据
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
getBeforeDate(){
let params = {
token:sessionStorage.getItem(‘token‘),
methodPost:false
}
this.axios(config.API + ‘/api/aply/statistics/totalInfo‘,{},params).then((res)=>{
// console.log(res)
if(res.data.code==1&&res.data.data.length!=0){
let datas = res.data.data
let dataIOS = []
let dataAndroid = []
datas.forEach(element => {
let obj = {
name:element.province.replace(/省/,‘‘), //map不识别‘省‘字
value:parseInt(element.down_number),
}
if(element.phone_type==1) dataIOS.push(obj)
if(element.phone_type==2) dataAndroid.push(obj)
});
let result = []
// console.log(this.addObjnum(dataIOS))
dataIOS = this.addObjnum(dataIOS)
dataAndroid = this.addObjnum(dataAndroid)
this.chinaConfigure(dataIOS,dataAndroid); //传参并绘制echart
}
})
},
// 合并相同省份的某条数据方法,否则有多少条展示多少条
addObjnum(arr, result ) {
var result={};
for(let i=0;i<arr.length;i++){
if(result[arr[i].name]){
result[arr[i].name]+=arr[i].value;
}else{
result[arr[i].name]=arr[i].value;
}
}
var keyvalue=[];
for(var key in result){
keyvalue.push({name:key,value:result[key]})
}
return keyvalue
},
chinaConfigure(dataIOS,dataAndroid) {
let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = myChart.resize;
console.log(dataIOS,dataAndroid) //确定编辑好的数据已经入echart画图的逻辑
let option = { //let一个option方便处理数据时拿取原数据
backgroundColor: ‘transparent‘,
title : {
text: ‘下载量统计‘,
subtext: ‘‘,
x:‘center‘
},
tooltip : {
trigger: ‘item‘,
//formatter()方法将合适的数据格式展示在划过的弹窗里
formatter:function(params){
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res=params.name+‘<br />‘;
//定义一个变量来保存series数据系列
var myseries=option.series;
//循环遍历series数据系列
for(var i=0;i<myseries.length;i++){
// 在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
for(var k=0;k<myseries[i].data.length;k++){
//如果data数据中的name和地区名称一样
if(myseries[i].data[k].name==params.name){
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res+=myseries[i].name+‘:‘+myseries[i].data[k].value+‘<br />‘;
}
}
}
return res;
}
},
dataRange: {
min: 0,
max: 2500,
x: ‘left‘,
y: ‘bottom‘,
text:[‘高‘,‘低‘], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show : true,
orient : ‘vertical‘,
x: ‘right‘,
y: ‘center‘,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: ‘ios‘,
type: ‘map‘,
mapType: ‘china‘,
roam: true,
scaleLimit: { //滚轮缩放的极限控制
min: .7,
max: 3
},
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: ‘rgba(0,0,0,0.9)‘
}
}
},
itemStyle:{
normal:{label:{show:true},borderColor: ‘rgba(0, 0, 0, 0.2)‘},//地图版块线条
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)‘
}
},
data:dataAndroid
},
{
name: ‘android‘,
type: ‘map‘,
mapType: ‘china‘,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:dataIOS
}
]
};
myChart.setOption(option);
}
}
}
</script>
<style scoped>
#myChart{
background: red;
width: 100%;
}
path{
fill: none;
stroke: #76BF8A;
}
svg{
width: 100%;
height: 300px;
}
</style>
