第二次用echart，第一次做地圖，
<template>
<div class="echarts" style="background:#3bafde">
<div :style="{height:'600px','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;
100%;
}
path{
fill: none;
stroke: #76BF8A;
}
svg{
100%;
height: 300px;
}
</style>