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

最近公司分配我制作专题图的任务，包括柱状图，饼状图，折线图，用了点时间了解了一下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: '200px',
      height: '125px',
      background: '#fff',
      borderRadius: '4px',
      boxShadow: '0 0 10px rgba(0, 0, 0, .5)'
    }
    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 // 用于挂载的节点
    });
    // 信息窗挂载到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 = {}) {
    //多柱参数格式 数组的第一位是字段名称，后面的是字段值
    let source = [
      // ['produc2t', '20125', '20126', '20217'], //第一行如果全是字符串会被识别为标题
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
    // 单柱参数格式
    // let source = [
    //   ['Matcha Latte', 43.3],
    //   ['Milk Tea', 83.1],
    //   ['Cheese Cocoa', 86.4],
    //   ['Walnut Brownie', 72.4]
    // ]
    let options = {
      color: '#ff0000', //柱颜色
      tooltip: {}, //鼠标悬停提示信息
      grid: { left: 30, top: 10, right: 0, bottom: 22 },//设置偏移（只是为了好看）
      xAxis: {
        type: 'category',
        axisLabel: { show: true } //是否展示x轴字段
      },
      yAxis: {
        type: 'value',
        axisLabel: { show: true } //是否展示y轴字段
      },
      dataset: {
        source: source //渲染数据
      },
      series: []
    };
    // 此对象格式固定
    let serie = {
      type: 'bar', //bar柱状图，line折线图，pie饼状图
      showBackground: true, //显示柱状图背影
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'  //柱背景颜色
      },
      barWidth: '10px', //柱宽
      label: {
        show: true, //是否展示数值
        position: 'insideTop', //柱顶部展示
        distance: -10,
      }
    }
    let series = []
    // series中有几个对象就代表有几根柱子，所以要根据参数进行调整
    source.map(() => {
      series.push(serie)
    })
    options.series = series
    return options;
  }

设置完成后，上面代码生成的效果如下

3、踩过的坑：

关于柱间距，当设置了柱宽后，设置柱间距就不再生效，或产生奇怪的效果，echarts会根据设置的柱宽适配窗口大小自动分配剩余间距形成柱间距

饼状图、环形图、折线图等同理，重点在于数据的处理和传递