GIS引擎使用echarts专题图之—饼状图

前言

饼状图其实相较柱状图简单些，步骤也和柱状图类似，主要区别在于用于展示数据格式不同，参数不同，柱状图链接附上：GIS引擎使用echarts专题图之—柱状图_爱踢球的小前端的博客-CSDN博客_echarts gis

饼状图

饼状图样式有很多种，我们的项目采用的是基础款，更多款式在echarts官网

 echarts官网：Examples - Apache ECharts

效果图：

 

步骤

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}（百分比）