//图表的配置文件
this.mapChartOption1 = {
//鼠标放置在地图上的显示
tooltip: {
trigger: "item",
formatter: (p) => {
// console.log('guo');
// console.log(p);
//这里p可以获取到所有的数据
let val = p.value;
if (window.isNaN(val)) {
val = 0;
}
let txtCon =
"<div style='text-align:center'>" +
p.name +
":<br />总数:" +
val +
"</div>";
return txtCon;
},
},
series: [
{
type: "map",
map: name,
itemStyle: {
//未选中样式
//背景颜色
areaColor: "#909399",
//边框颜色
borderColor: "#fbfdfe",
//边框宽度
borderWidth: 1,
},
emphasis: {
// 选中样式
borderWidth: 1,
//高亮颜色
areaColor: "#2062e6",
label: {
//显示文字
show: true,
//鼠标移入的字体颜色
color: "black",
},
},
data: [],
},
{
name: "预警", // series名称
type: "effectScatter", // series图表类型
coordinateSystem: "geo", // series坐标系类型
// symbolSize: function (val) {
// return val[2];
// },
symbolSize: 16,
// data: myData, // series数据内容
data: [
{
name: "成都", // 数据项名称,在这里指地区名称
value: [
// 数据项值
"104.072747", // 地理坐标,经度
"30.578994", // 地理坐标,纬度
340, // 成都地区的数值
],
},
],
emphasis: {
show: false,
label: {
show: false,
},
},
//series样式
itemStyle: {
color: "#711d8e",
},
},
],
};
console.log(this.mapChartOption1);
// option && myChart.setOption(this.mapChartOption1);
myChart.setOption(this.mapChartOption1, true);
},