利用echarts实战一个复杂图形

演示图：

中国地图

要想画出上图中的中国地图，并不是一个简单的事情，需要进行如下设置：

// 获取中国地图的数据data，然后注册为china
echarts.registerMap('china', data)
// 生成一个china的地图
geo: {
  map: 'china',
  // 确定了地图的大小
  zoom: 1.1,
  // 启动鼠标滚轮
  roam: false,
  center: [113.83531246, 34.0267395887],
  itemStyle: {
    borderColor: 'rgba(147, 235, 248, 1)',
    borderWidth: 1,
    // 设置地图的颜色
    areaColor: {
      type: 'radial',
      x: 0.5,
      y: 0.5,
      r: 0.8,
      colorStops: [
        {
          offset: 0,
          color: 'rgba(147, 235, 248, 0)'
        },
        {
          offset: 1,
          color: 'rgba(147, 235, 248, 0.2)'
        }
      ],
      global: false
    },
    shadowColor: 'rgba(128, 217, 248, 1)',
    shadowBlur: 10,
    shadowOffsetX: -2,
    shadowOffsetY: 2
  },
  tooltip: {
    show: false
  },
  emphasis: {
    itemStyle: {
      areaColor: '#389BB7',
      borderWidth: 0
    },
    label: {
      show: false
    }
  }
}

timeline

timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。

timeline 和其他场景有些不同，它需要操作『多个option』。一般有一个baseOption，再有一个options。初始化的时候，对应于当前图表的那个 Option 会被合并（merge）到 baseOption，形成 finalOption。

它们之间的结构关系如下：

const _option = {
    baseOption: {},
    // 对每个option进行设置
    options: []
}
setOption(_option)

设置baseOption

baseOption: {
  backgroundColor: '#424446',
  // 这个不会对地图有效，这个其实就是设置柱状图的摆放位置
  grid: {
    right: '5%',
    top: '15%',
    bottom: '15%',
    width: '20%'
  },
  tooltip: {},
  geo: {
    map: 'china',
    zoom: 1.1,
    // 启动鼠标滚轮
    roam: false,
  }
},

设置多个options

for (let i = 0; i < cities.length; i++) {
  _option.options.push({
    title: [],
    xAxis: {},
    yAxis: {},
    series: [
        // 每一项都对应timeline里面data中的每一项
        {},
        {}.
    ]
  })
}

timeline设置

timeline: {
  data: cities,
  axisType: 'category',
  autoPlay: true,
  left: '10%',
  bottom: '3%',
  width: '80%',
  label: {
    color: '#ddd'
  },
  symbolSize: 10,
  lineStyle: {
    color: '#555'
  }
}

data里面的每一项对应_option里面的option

飞线和涟漪效果

// 涟漪图
{
  type: 'effectScatter',
  // 这里的geo即我们定义的geo组件
  coordinateSystem: 'geo',
  data: convertData(mapData[i]),
  // 定义气泡图的大小
  symbolSize: function(val) {
    return val[2] / 10
  },
  // 设置涟漪的效果
  rippleEffect: {
    brushType: 'stroke'
  },
  label: {
    show: true,
    position: 'right',
    formatter: function(params) {
      return params.data.name
    }
  },
  itemStyle: {
    color: colors[colorIndex][i],
    shadowColor: colors[colorIndex][i],
    shadowBlur: 10
  },
  // hover上去放大效果
  emphasis: {
    scale: true
  },
  // 当多个图叠加在一起的时候，为了显示更加清晰，就设置图与图的层级关系，比如地图与飞线两个图，就需要设置，这样飞线就看的很清楚
  zlevel: 1
},
// 飞线图
{
  type: 'lines',
  data: convertToLineData(mapData[i], geoGpsMap[i + 1]),
  // 对飞线进行动画特效的设置
  effect: {
    show: true,
    // 动画快慢
    period: 4,
    symbol: 'arrow',
    symbolSize: 3,
    // 特效尾迹的长度
    trailLength: 0.02
  },
  lineStyle: {
    color: colors[colorIndex][i],
    width: 0.1,
    opacity: 0.5,
    // 把直线弄成弯曲的
    curveness: 0.3
  },
  zlevel: 2
},