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
发布的文章
jQuery 选择器
2024-05-12 00:05:34
jQuery Layer插件:前端弹出层快速实现指南
2024-10-13 20:10:14
cdn引入前端插件
2024-10-13 20:10:14
echarts将不同表放入一个网页中(简单版)
2024-10-13 20:10:11
ECharts关系图-日历关系图,附视频讲解与代码下载
2024-10-13 20:10:05
简单的vue三维饼状图,echacts
2024-10-13 20:10:05
基于ssm vue.js的仓库管理系统附带文章源码部署视频讲解等
2024-10-13 20:10:39
基于SpringBoot Vue的商城购物系统实战
2024-10-13 20:10:40
Vue、Springboot 大文件分片下载、多线程下载
2024-10-13 20:10:14
下载vue/cli脚手架的时候,下载速度过慢怎么解决,适配版本
2024-10-13 20:10:46
大家推荐的文章