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
大家推荐的文章