zjditu() {
var uploadedDataURL =
"http://api.ppmark.cn/chart-assets/asset/get/s/data-1482909892121-BJ3auk-Se.json";
let myChartditua = this.$refs.myChartditu;
let myChart = echarts.init(myChartditua);
function showProvince() {
var name = "shandong";
myChart.showLoading();
$.get(uploadedDataURL, function(geoJson) {
myChart.hideLoading();
echarts.registerMap(name, geoJson);
myChart.setOption(
(option = {
// title: {
// text: "",
// left: "center", //标题位置
// textStyle: {
// fontSize: 32,
// fontWeight: "bolder",
// color: "black", // 主标题文字颜色
// },
// },
color: ["#fff"],
// legend: {
// orient: "vertical",
// left: "left",
// textStyle: {
// fontSize: 16,
// color: "black", // 图例文字颜色
// },
// //data: ['地市']
// // 图例位置
// },
// visualMap: {
// min: 0,
// max: 20,
// left: "left",
// top: "bottom",
// text: ["高", "低"], // 文本,默认为数值文本
// calculable: false,
// color: ['blue', 'blue']
// },
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: {
// readOnly: false,
// },
// restore: {},
// saveAsImage: {},
// },
// },
series: [{
name: "地市",
type: "map",
mapType: name,
label: {
normal: {
show: true,
color: "#fff",
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
normal: {
borderWidth: 2, //区域边框宽度
borderColor: '#1A48E0', //区域边框颜色
areaColor: "#032261", //区域颜色
},
emphasis: {
borderColor: '#15DCF1', //区域边框颜色
areaColor: '#2190FF', // 鼠标 hover 高亮时地图板块的样式
}
},
selectedMode: "single", //选择模式,单选,只能选中一个地市
select: { //这个就是鼠标点击后,地图想要展示的配置
disabled: false, //可以被选中
itemStyle: { //相关配置项很多,可以参考echarts官网
areaColor: "#77e8e4" //选中
}
},
data: [{
name: "济南市",
value: 7,
},
{
name: "青岛市",
value: 13,
},
{
name: "淄博市",
value: 2,
},
{
name: "枣庄市",
value: 2,
},
{
name: "烟台市",
value: 8,
},
{
name: "潍坊市",
value: 3,
},
{
name: "济宁市",
value: 5,
},
{
name: "威海市",
value: 9,
},
{
name: "日照市",
value: 5,
},
{
name: "临沂市",
value: 7,
},
{
name: "德州市",
value: 6,
},
{
name: "聊城市",
value: 1,
},
{
name: "滨州市",
value: 3,
},
{
name: "菏泽市",
value: 4,
},
{
name: "泰安市",
value: 1,
},
],
// animationDurationUpdate: 1000,
// animationEasingUpdate: 'quinticInOut'
}, ],
})
);
});
}
var currentIdx = 0;
showProvince();
//点击地图
myChart.on('click', function(param) {
console.log(param)
alert(param.name);
this.didian = param.name
console.log(this.didian)
});
},
echarts山东地图改变地图颜色
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18078.html
发布的文章
C#解析JSON的常用库--Newtonsoft.Json
2024-11-30 11:11:42
jsonfield 项目常见问题解决方案
2024-11-30 11:11:42
【SpringMVC】_SpringMVC项目返回HTML与JSON
2024-11-30 11:11:41
BugJson因为json格式问题OOM怎么办
2024-11-30 11:11:41
python 解读JSON文件,一文搞懂!
2024-11-30 11:11:40
Redisson同时使用jackson、fastjson、kryo、protostuff序列化(含效率对比)
2024-11-30 11:11:40
开源项目“Pretty JSON”安装与配置完全指南
2024-11-30 11:11:39
2024年前端最新Nodejs基础之包管理工具npm(二)(2),微软面试题及答案
2024-11-30 11:11:39
解决全局安装pnpm后无法使用的问题
2024-11-30 11:11:39
安装Nodejs后,npm无法使用
2024-11-30 11:11:38
大家推荐的文章