Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度echarts公交线路道路拥堵分布图(嘉兴市)

var uploadedDataURL = "https://echarts.ipkd.cn/asset/jiaxing.txt";

function convertData(sourceData) {
  return [].concat.apply([], $.map(sourceData, function(busLine, index) {
    var prevPoint = null;
    var points = [];
    var value = busLine.shift();
    for (var i = 0; i < busLine.length; i += 2) { var point = [busLine[i], busLine[i + 1]]; if (i > 0) {
        point = [
          prevPoint[0] + point[0],
          prevPoint[1] + point[1]
        ];
      }
      prevPoint = point;

      points.push([point[0] / 1e5, point[1] / 1e5]);
    }
    return {
      value: value,
      coords: points
    };
  }));
}

var option = {
  bmap: {
    roam: true
  },
  visualMap: {
    type: "piecewise",
    left: 'right',
    /*      pieces: [
        {min: 15}, // 不指定 max,表示 max 为无限大(Infinity)。
        {min: 12, max: 15},
        {min: 9, max: 12},
        {min: 6, max: 9},
        {min: 3, max: 6},
        {max: 3}   // 不指定 min,表示 min 为无限大(-Infinity)。
      ],*/
    min: 0,
    max: 15,
    splitNumber: 5,
    maxOpen: true,
    color: ['red', 'yellow', 'green']
  },
  tooltip: {
    formatter: function(params, ticket, callback) {
      return "拥堵指数:" + params.value;
    },
    trigger: 'item'
  },
  series: [{
    type: 'lines',
    coordinateSystem: 'bmap',
    polyline: true,
    lineStyle: {
      normal: {
        opacity: 1,
        width: 4
      },
      emphasis: {
        width: 6
      }
    },
    effect: {
      show: true,
      symbolSize: 2,
      color: "white"
    }
  }]
};

$.getJSON(uploadedDataURL, function(rawData) {
  option.series[0].data = convertData(rawData);
  myChart.setOption(option);
  // console.log(option);
  //获取echart中使用的bmap实例
  var map = myChart.getModel().getComponent('bmap').getBMap();
  map.disableDoubleClickZoom();
  map.centerAndZoom("嘉兴", 13);
});
点击展开全文

相关文章

  1. 百度Echarts设置geo地图位置(上下左右)
  2. 百度Echarts公交线路实时进度
  3. vue3项目中如何搭建Echarts图表
  4. 浙江省嘉兴市桐乡市边界地图
  5. 浙江省嘉兴市平湖市边界地图

热门workflows工作流