效果图:
步骤
1、使用GIS引擎在地图上开辟出信息窗口
// 创建饼状图窗口
let infoWindows = []
// res.data.features是从接口获取的地区参数
infoWindows = res.data.features.map((item, key) => {
// 添加一个div节点
var echartsWrap = document.createElement('div');
// 设置节点的样式
let BarStyle = {
width: '130px',
height: '130px'
}
for (var k in BarStyle) {
echartsWrap.style[k] = BarStyle[k];
}
let infowindow = new YunliMap.InfoWindow({
offset: [0, -20],// 偏移量,后两位用于信息窗超出显示范围时进行自适应偏移
defaultStyle: false,// 是否启用默认样式
position: item.geometry.coordinates,// 窗口中心点位
content: echartsWrap, // 用于挂载的节点
forceTop: true //当信息窗内容溢出显示边界时,信息窗禁止自适应调整位置
});
// 信息窗挂载到DOM后渲染echarts
let myChart = echarts.init(echartsWrap);
// defaultOptions是设置饼状图内容的方法,在步骤2中
// 传参item.properties为该地点的信息对象
myChart.setOption(defaultOptions(item.properties));
return infowindow;
});
//调用方法添加到地图上
map.add(infoWindows);
此时如果不渲染echarts得到的效果图参考柱状图,链接在上方
2、写一个方法,设置echarts饼状图内容
// 设置echarts饼状图内容
// 公司数据不便展示,用一些其他数据代替
function defaultOptions(data = {}) {
// name为名称,value为数值
let source = [
{ name: 'Matcha Latte', value: 43.3 },
{ name: 'Milk Tea', value: 83.1 },
{ name: 'Cheese Cocoa', value: 86.4 },
{ name: 'Walnut Brownie', value: 72.4 },
{ name: 'Email', value: 58 },
{ name: 'Union Ads', value: 48 },
{ name: 'Video Ads', value: 30 }
]
let options = {
tooltip: {}, //鼠标悬停提示信息
color: ['#ff0000', '#00ff00', '#0000ff', '#ddd', '#dddf00'],//饼块的颜色,如果数据量大于设置的颜色,就会循环展示颜色
series: [
{
type: 'pie', //饼状图
radius: '90%', //饼大小
data: source ,
label: {
position: 'inner', //展示名称位置,inner在饼内
show: true //显示名称
formatter: '{b}:{c}' //这个配置下面详细解释
},
emphasis: {
//饼块抬起时设置抬起阴影效果
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
};
return options;
}
设置完成后,上面代码生成的效果如下
3、formatter:
formatter模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等,不同图表类型下的 {a},{b},{c},{d} 含义不一样。
- 折线(区域)图、柱状(条形)图、K线图:{a}(系列名称),{b}(类目值),{c}(数值),{d}(无)
- echarts散点图(气泡)图 :{a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
- 饼图:{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)