vue实现echarts的map自定义地图背景色
效果图:
使用series-map.data.itemStyle. color定义每个地区背景色
vue代码
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div class="map">
<div id="frames_cont0" style="width: 100%;height: 100%;"></div>
</div>
</template>
<script>
export default {
props:{
},
data() {
return {
};
},
methods: {
async getDataInfo(){
const {data:res} = await this.$http.get("get_citylist");
this.change(res.content);
},
change(datas){
var city_list=datas.city_list;
var city_data=datas.city_data;
var city='陕西省';
var chartDom = document.getElementById('frames_cont0');
var myChart = this.$echarts.init(chartDom);
var option;
myChart.showLoading();
this.$echarts.registerMap('Shaanxi', city_list);
myChart.hideLoading();
option = {
title: {
text: city,
textStyle:{
color:'#333'
},
},
tooltip: {
show: false, // 是否显示提示框
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center'
},
roam: true, // 滚轮滚动--放大或缩小
visualMap: {
show: false, // 是否显示左侧控件
},
series: [
{
name: city,
type: 'map',
mapType: 'Shaanxi', // 自定义扩展图表类型
label: {
show: true,
color: "#000"
},
data: city_data
}
],
};
option && myChart.setOption(option);
var that = this;
myChart.on('click', function (params) {
var group_id = params.data.group_id;
console.log(group_id)
that.$emit("changeGroupid", group_id);
});
}
},
watch: {
},
mounted() {
this.getDataInfo();
},
}
</script>
<style>
.map{
width:100%;
height: 100%;
overflow: hidden;
}
</style>
后端
// 获取省地图数据
public function get_citylist(){
$path = './static/map_json/陕西省.json';
if(file_exists($path)){
$fp = fopen($path,'r');
$str = fread($fp,filesize($path));//指定读取大小,这里把整个文件内容读取出来
fclose($fp);
}
$city_list = json_decode($str,true);
$datas['city_list'] = $city_list;
$array = [];
// 定义颜色
$color_list = ['#cfc5de','#f1ebd1','#feffdb','#e0cee4','#fde8cd','#fffdd6','#affed7','#e4f1d7','#e4f1d7','#fffed7','#fffed8','#dccee7','#fffed7'];
foreach ($city_list['features'] as $k=>$v){
$array[$k]['name'] = $v['properties']['name'];
$array[$k]['group_id'] = $v['properties']['groupid'];
$array[$k]['value'] = $k 1;
$array[$k]['itemStyle'] = ['color'=>$color_list[$k]]; // 设置各个地区背景色
}
$datas['city_data'] = $array;
$datas['city_data1'] = $groupid;
return $output;
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfiabfc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01