<script>
import echarts from 'echarts'
export default {
data() {
return {
chartBar1:null,
chartBar2:null,
chartBar3:null,
chartBar4:null,
tableData: [{
province: '吉林',
watch: '664',
rate: '52.37%'
}, {
province: '吉林',
watch: '664',
rate: '52.37%'
}, {
province: '吉林',
watch: '664',
rate: '52.37%'
}, {
province: '吉林',
watch: '664',
rate: '52.37%'
},
{
province: '吉林',
watch: '664',
rate: '52.37%'
},
{
province: '吉林',
watch: '664',
rate: '52.37%'
},
{
province: '吉林',
watch: '664',
rate: '52.37%'
},
{
province: '吉林',
watch: '664',
rate: '52.37%'
},
{
province: '吉林',
watch: '664',
rate: '52.37%'
},
{
province: '吉林',
watch: '664',
rate: '52.37%'
}],
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
options2: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value2: '',
areaName:'',
data:[
{
name: "东北地区",
value:9,
rate:'东北地区:5%'
},
{
name: "西北地区",
value:90,
rate:'西北地区:6%'
},
{
name: "华北地区",
value:900,
rate:'华北地区:15%'
},
{
name: "华东地区",
value:9000,
rate:'华东地区:26%'
},
{
name: "华中地区",
value:9,
rate:'华中地区:16%'
},
{
name: "华南地区",
value:90,
rate:'华南地区:18%'
},
{
name: "西南地区",
value: 900,
rate:'西南地区:14%'
},
{
name: "港澳地区",
value:9,
rate:'港澳地区:0.05%'
}
],
geoCoordMap:{
'东北地区':[126.63,45.75],
'西北地区':[90.68,38.77],
'华北地区':[112.46,40.92],
'华东地区':[121.48,31.22],
'华中地区':[111.15,33.38],
'华南地区':[110.3,24.08],
'西南地区':[98.06,30.67],
'港澳地区':[123.06,23.67]
},
}
},
methods: {
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
},
//地图
drawMap(){
var _this = this;
var chart = echarts.init(document.getElementById('map'),"macarons");
chart.setOption({
backgroundColor: '#F6F2EE',
title: {
text: '用户分布',
left: 'center'
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true,title:'导出'},
}
},
tooltip : {
show:true,
trigger: 'item',
// triggerOn: 'click',
formatter:function(params,ticket,callback){
var res = '';
for(var i = 0 ; i < _this.data.length; i++){
if(params.name==_this.data[i].name){
res = _this.data[i].rate;
_this.areaName = params.name;
break;
}
}
// console.log(_this.areaName)
return res;
}
},
visualMap: {
min: 0,
max: 1600,
left: 'left',
top: 'bottom',
text: ['High','Low'],
seriesIndex: [1],
inRange: {
color: ['#55c5c7', '#93a5ff','#5ab1ef','#ff916a','#d87a80','#8d98b3','#e5cf0d','#97b552']
},
calculable : true
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
roam: false,//禁止缩放
label: {
normal: {
show: false,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
//背景色
itemStyle: {
//正常的颜色
normal: {
areaColor: '#d6d6d6',
borderColor: '#fff',
},
//鼠标划上去的颜色
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
//区域打点
{
name: '',
type: 'effectScatter',
coordinateSystem: 'geo',
data: this.convertData(this.data),
symbolSize: function (val) {
return 20;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#ff6633',//点点的颜色
shadowBlur: 10,
shadowColor: '#fff',
}
},
zlevel: 1
},
//地图数据的配置
{
name: 'categoryA',
type: 'map',
geoIndex: 0,
// tooltip: {show: false},
data:[
{name: '北京', value: 200},
{name: '天津', value: 200},
{name: '上海', value: 0},
{name: '重庆', value: 400},
{name: '河北', value: 200},
{name: '河南', value: 800},
{name: '云南', value: 400},
{name: '辽宁', value: 1600},
{name: '黑龙江', value:1600},
{name: '湖南', value: 800},
{name: '安徽', value: 0},
{name: '山东', value: 0},
{name: '新疆', value: 1400},
{name: '江苏', value: 0},
{name: '浙江', value: 0},
{name: '江西', value: 800},
{name: '湖北', value: 800},
{name: '广西', value: 1000},
{name: '甘肃', value: 1400},
{name: '山西', value: 200},
{name: '内蒙古',value:200},
{name: '陕西', value: 1400},
{name: '吉林', value: 1600},
{name: '福建', value: 0},
{name: '贵州', value: 400},
{name: '广东', value: 1000},
{name: '青海', value: 1400},
{name: '西藏', value: 400},
{name: '四川', value: 400},
{name: '宁夏', value: 1400},
{name: '海南', value: 1000},
{name: '台湾', value: 600},
{name: '香港', value: 600},
{name: '澳门', value: 600}
]
}
]
});
return chart
},
exportExcel(){
},
// 柱形图性别比例
drawChartBar1() {
this.chartBar1 = echarts.init(document.getElementById('chartBar1'),"macarons");
var that = this.chartBar1;
this.chartBar1.setOption({
title : {
text: '性别比例',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
orient: 'horizontal',
y: 'bottom',
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true,title:'导出'},
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 70.7],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
});
return this.chartBar1;
},
// 柱形图年龄分布
drawChartBar2() {
this.chartBar2 = echarts.init(document.getElementById('chartBar2'),"macarons");
var that = this.chartBar2;
this.chartBar2.setOption({
title : {
text: '年龄分布',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
orient: 'horizontal',
y: 'bottom',
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true,title:'导出'},
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
});
return this.chartBar2;
},
// 学历分布
drawChartBar3() {
this.chartBar3 = echarts.init(document.getElementById('chartBar3'),"macarons");
var that = this.chartBar3;
this.chartBar3.setOption({
title : {
text: '学历分布',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
orient: 'horizontal',
y: 'bottom',
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true,title:'导出'},
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
});
return this.chartBar3;
},
drawBarChart4() {
this.chartBar4 = echarts.init(document.getElementById('chartBar4'),"macarons");
this.chartBar4.setOption({
title : {
text: '职业分布',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
orient: 'horizontal',
y: 'bottom',
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true,title:'导出'},
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
});
return this.chartBar4;
},
},
mounted() {
this.drawMap();
this.drawChartBar1();
this.drawChartBar2();
this.drawChartBar3();
this.drawBarChart4();
var that = this;
var that = this;
this.drawMap().on('click', function (params) {
var province = params.name;
if(province=="东北地区"||province=="华北地区"||province=="西北地区"||province=="华中地区"||province=="西南地区"||province=="华东地区"||province=="华南地区"||province=="港澳地区"){
console.log(province)
}
else{
that.$notify({
title: '警告',
message: '请点击热点区域',
type: 'warning',
offset:70
});
}
});
window.onresize = function() {
that.drawMap().resize();
that.drawChartBar1().resize();
that.drawChartBar2().resize();
that.drawChartBar3().resize();
that.drawBarChart4().resize();
}
},
}
</script>
核心：
visualMap: {
min: 0,
max: 1600,
left: 'left',
top: 'bottom',
text: ['High','Low'],
seriesIndex: [1],
inRange: {
color: ['#55c5c7', '#93a5ff','#5ab1ef','#ff916a','#d87a80','#8d98b3','#e5cf0d','#97b552']
},
calculable : true
},
//地图数据的配置
{
name: 'categoryA',
type: 'map',
geoIndex: 0,
// tooltip: {show: false},
data:[
{name: '北京', value: 200},
{name: '天津', value: 200},
{name: '上海', value: 0},
{name: '重庆', value: 400},
{name: '河北', value: 200},
{name: '河南', value: 800},
{name: '云南', value: 400},
{name: '辽宁', value: 1600},
{name: '黑龙江', value:1600},
{name: '湖南', value: 800},
{name: '安徽', value: 0},
{name: '山东', value: 0},
{name: '新疆', value: 1400},
{name: '江苏', value: 0},
{name: '浙江', value: 0},
{name: '江西', value: 800},
{name: '湖北', value: 800},
{name: '广西', value: 1000},
{name: '甘肃', value: 1400},
{name: '山西', value: 200},
{name: '内蒙古',value:200},
{name: '陕西', value: 1400},
{name: '吉林', value: 1600},
{name: '福建', value: 0},
{name: '贵州', value: 400},
{name: '广东', value: 1000},
{name: '青海', value: 1400},
{name: '西藏', value: 400},
{name: '四川', value: 400},
{name: '宁夏', value: 1400},
{name: '海南', value: 1000},
{name: '台湾', value: 600},
{name: '香港', value: 600},
{name: '澳门', value: 600}
]
}
