<template>
  <div class="container">
    <img class="bgImg" :src="bgImg2" />
    <img class="bgImg" :src="bgImg1" />
    <canvas id="myCanvas" ref="myCanvas" width="1920" height="1080" style="position: absolute;left: 0;top: 0"></canvas>
    <canvas id="donghua" ref="donghua" width="1920" height="1080" style="position: absolute;left: 0;top: 0"></canvas>
    <div style="position: absolute;width: 450px;top: 140px;right: 24px;">
      <video
        src="https://fire-map-prod.oss-cn-hangzhou.aliyuncs.com/2021_03_06/%E5%85%B0%E5%B7%9E%E5%AE%A3%E4%BC%A0%E7%89%872020.mov"
        :poster="poster"
        :controls="controls"
        id="video"
        class="video1">
      </video>
      <div class="infoBox" @mouseover="over" @mouseout="start">
      <p class="p1"><img src="@/assets/images/logo-s.png">最新动态</p>
      <div class="infoBox_inside">
        <div class="liBox liBox1">
          <el-scrollbar ref="scroll1" style="height: 100%;">
            <div>
              <p class="liItem" @click="gotoNew(item.id)" v-for="item in othersList" :key="item.Id">
                <span class="liItem-2">{{item.title}}</span>
                <span class="liItem-3">{{item.publishTime | filtersDate}}</span>
              </p>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    </div>

    <div v-if="!controls" class="play" @click="play" ></div>
    <img style="position: absolute;left:70px;top:600px;" src="@/assets/images/index/l-img.png">
    <div class="indexText">
      <div class="row"><img style="height: 45px" src="@/assets/images/indexText1.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style="height: 45px" src="@/assets/images/indexText2.png"></div>
      <div class="row"><img style="height: 45px" src="@/assets/images/indexText3.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style="height: 45px" src="@/assets/images/indexText4.png"></div>
    </div>

    <div class="dw">
      <span>主办单位：兰州市人民政府合作交流办公室</span><span>电话：0931-8772824</span><span>传真：0931-8772824</span>
    </div>

  </div>
</template>

<script>
import { baseURL } from '@/plugins/service'
export default {
  data () {
    return {
      time: 0,
      show: false,
      bgImg1: require('../assets/images/index-bg.jpg'),
      bgImg2: require('../assets/images/index-bg_mini.jpg'),
      poster: require('../assets/images//index/video-img.png'),
      controls: false,
      fangxiang1: true,
      oneNew: '',
      othersList: [],
      dian: [
        {
          spot: { l: 1355, r: 414 },
          control: { l: 1262, r: 390 },
          j: 100
        }, {
          spot: { l: 1390, r: 754 },
          control: { l: 1360, r: 535 },
          j: 170
        }, {
          spot: { l: 1298, r: 550 },
          control: { l: 1260, r: 485 },
          j: 160
        }, {
          spot: { l: 770, r: 744 },
          control: { l: 1060, r: 696 },
          j: 250
        }, {
          spot: { l: 615, r: 534 },
          control: { l: 900, r: 600 },
          j: 290
        }, {
          spot: { l: 174, r: 440 },
          control: { l: 671, r: 604 },
          j: 290
        }, {
          spot: { l: 786, r: 400 },
          control: { l: 970, r: 480 },
          j: 310
        }, {
          spot: { l: 795, r: 390 },
          control: { l: 980, r: 470 },
          j: 310
        }, {
          spot: { l: 700, r: 340 },
          control: { l: 850, r: 450 },
          j: 310
        }, {
          spot: { l: 817, r: 376 },
          control: { l: 985, r: 447 },
          j: 310
        }, {
          spot: { l: 968, r: 415 },
          control: { l: 1065, r: 437 },
          j: 310
        }, {
          spot: { l: 909, r: 329 },
          control: { l: 1019, r: 399 },
          j: 310
        }, {
          spot: { l: 1031, r: 405 },
          control: { l: 1090, r: 427 },
          j: 310
        }, {
          spot: { l: 1164, r: 341 },
          control: { l: 1150, r: 385 },
          j: 10
        }
      ]
    }

    // 1169, 429
  },
  mounted () {
    this.start()
    this.getData()
    this.setLine()
    this.setDonghua()
    this.show = true
  },
  filters: {
    filtersDate (sTime = '') {
      if (sTime && sTime !== '') {
        const d = new Date(sTime)
        const m = d.getMonth() + 1
        const da = d.getDate()
        return `${d.getFullYear()}-${m < 10 ? '0' + m : m}-${da < 10 ? '0' + da : da}`
      }
    }
  },
  methods: {
    setLine () {
      const c = this.$refs.myCanvas
      const ctx = c.getContext('2d')
      for (const item of this.dian) {
        this.huaLine(ctx, item.spot, item.control)
        this.sanjiao(ctx, item.spot, item.j)
      }
    },
    setDonghua () {
      const that = this
      const c = that.$refs.donghua
      const ctxd = c.getContext('2d')
      that.loopDraw(ctxd)
    },
    start () {
      const that = this
      that.interval = setInterval(() => {
        try {
          if (that.fangxiang1) {
            that.$refs.scroll1.wrap.scrollTop = that.$refs.scroll1.wrap.scrollTop + 2
          } else {
            that.$refs.scroll1.wrap.scrollTop = that.$refs.scroll1.wrap.scrollTop - 2
          }
          // console.log(that.$refs.scroll1.wrap.scrollTop)
          if (that.$refs.scroll1.wrap.scrollTop >= 488) {
            that.fangxiang1 = false
          }
          if (that.$refs.scroll1.wrap.scrollTop <= 0) {
            that.fangxiang1 = true
          }
        } catch (e) {}
      }, 30)
    },
    getData () {
      const that = this
      // debugger
      that.$axios.post(baseURL + '/web/cms/content/selectPageByCategory', {
        name: '投资动态',
        pageIndex: 1,
        pageSize: 16
      }).then(function (res) {
        // debugger
        const list = res.data.data.records
        that.oneNew = list.length > 0 ? list[0] : ''
        that.othersList = list.length > 2 ? list : []
      })
    },
    over () {
      const that = this
      clearInterval(that.interval)
    },
    gotoNew (objid = 9) {
      this.$router.push({
        path: '/newsDetail',
        query: {
          id: objid
        }
      })
    },
    play () {
      document.getElementById('video').play()
      this.controls = true
    },
    pause () {
      this.controls = false
    },
    huaLine (ctx, spot, control) {
      ctx.beginPath()
      ctx.moveTo(1169, 429)
      ctx.quadraticCurveTo(control.l, control.r, spot.l, spot.r)
      const grd = ctx.createLinearGradient(1169, 429, spot.l, spot.r)
      grd.addColorStop(0, '#1296b0')
      grd.addColorStop(1, '#fff984')
      ctx.strokeStyle = grd
      ctx.stroke()
    },
    sanjiao (ctx, d1, deg) {
      const icon = new Image()
      icon.style.opacity = '0.5'
      icon.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAYAAAArzdW1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxQjIxNTU4QkMzOTExRUI5MjMxQjJGQjQ4RTI5MDc1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxQjIxNTU5QkMzOTExRUI5MjMxQjJGQjQ4RTI5MDc1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjFCMjE1NTZCQzM5MTFFQjkyMzFCMkZCNDhFMjkwNzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjFCMjE1NTdCQzM5MTFFQjkyMzFCMkZCNDhFMjkwNzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6MMce0AAAAqklEQVR42mxPsQrCMBS8F1sRoTjrKK5+h5/g7C84uOgiilDwD8W5q5NK0+a8WLQovXBJSC53F2N5wg+I3aP2x8AA04hwSIkvHRdSHVLYMqWu0NDoWycGXrVM5VCAnHzOHbzmysAaqyhoEjnW83XcRRrLPFo4MtxUIWvLWWlJPYILT4UO5ef2QMj+PtBX9zOVok75jKG6oAt8h80T0m9kHZvdO2QD62H7EmAAIWJHcdkx59sAAAAASUVORK5CYII='
      icon.onload = () => {
        ctx.save()
        ctx.translate(d1.l, d1.r)
        ctx.rotate(Math.PI * deg / 180)
        ctx.drawImage(icon, -icon.width / 2, -icon.height / 2)
        ctx.restore()
      }
    },
    loopDraw (ctxd) {
      ctxd.clearRect(0, 0, ctxd.canvas.width, ctxd.canvas.height)
      ctxd.globalCompositeOperation = 'source-over'
      for (const item of this.dian) {
        for (let i = 0; i < 16; i++) {
          let x
          let y
          const t = this.time - i * 0.005
          if (this.time > 1 || this.time < 0) {
            this.time = 0
            x = item.spot.l
            y = item.spot.r
          } else {
            x = Math.pow(1 - t, 2) * 1169 + 2 * t * (1 - t) * item.control.l + Math.pow(t, 2) * item.spot.l
            y = Math.pow(1 - t, 2) * 429 + 2 * t * (1 - t) * item.control.r + Math.pow(t, 2) * item.spot.r
          }
          this.drawPoint(ctxd, x, y, (16 - i) / 16)
        }
      }
      requestAnimationFrame(() => {
        this.loopDraw(ctxd)
      })
      this.time += 0.005
    },
    drawPoint (ctxd, x, y, op) {
      ctxd.beginPath()
      ctxd.fillStyle = `rgba(186, 249, 255, ${op})`
      ctxd.arc(x, y, 2, 0, 2 * Math.PI)
      ctxd.fill()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .bgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
  }
  .infoBox {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    color: #FFFFFF;
    .p1 {
      font-size: 20px;
      padding: 0 28px;
      font-weight: bold;
      line-height: 48px;
      background-image: url("@/assets/images/index/title-back.png");

      img{
        width: 26px;
        height: 26px;
        display: inline-block;
        vertical-align: top;
        margin-top: 12px;
        margin-right: 10px;
      }
    }
    .p2 {
      font-size: 16px;
      font-weight: bold;
      line-height: 20px;
      margin-bottom: 2%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .p3 {
      font-size: 14px;
      line-height: 22px;
      position:relative;
      overflow: hidden;
      height: 66px;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;

    }
    .p4 {
      font-size: 12px;
      margin: 10px 0 15px 0;
    }
    .xianl {
      display: block;
      width: 100%;
      height: 1px;
      background: rgba(18, 152, 255, .27);
      position: relative;
      .xianl-l {
        position: absolute;
        left: 0;
        display: block;
        width: 10px;
        height: 1px;
        background: #30A4FD;
      }
      .xianl-r {
        position: absolute;
        right: 0;
        display: block;
        width: 10px;
        height: 1px;
        background: #30A4FD;
      }
    }
    .liBox {
      .liItem {
        display: flex;
        padding: 20px;
        cursor: pointer;
        .liItem-1 {
          width: 20px;
          font-size: 10px;
          color: #93D5FF;
        }
        .liItem-2 {
          flex: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          color: #FFF;
        }
        .liItem-3 {
          flex: 1;
          text-align: right;
          font-size: 16px;
          color: #6FA6E6;
        }
        &:nth-child(odd){
          background-color: rgba(0, 21, 96, 0.6);
        }
        &:nth-child(even){
          background-color: rgba(0, 23, 106, 0.6)
        }
      }
    }
  }
  .video1 {
    width: 100%;
    display: block;
    object-fit: cover;
  }
  .play{
    position: absolute;
    width: 64px;
    height: 64px;
    top: 276px;
    right: 215px;
    cursor: pointer;
  }
  video:focus {
    outline: none
  }
}
.container .infoBox .liBox1{
  height: 427px;
  display: block;
}
.container .infoBox .liBox2{
  height: 180px;
  display: none;
}
.dw{
  color: #3B809D;
  position: absolute;
  bottom: 35px;
  left: 40px;
  span {
    margin-right: 30px;
  }
}
.indexText{
  position: absolute;
  left: 300px;
  top: 700px;
  text-align: center;
}
.indexText .row:nth-child(1){
  margin-bottom: 15px;
  animation-name: left-right;
  animation-duration: 4s;
}
.indexText .row:nth-child(2){
  animation-name: left-right2;
  animation-duration: 4s;
}
@keyframes left-right {
  from {margin-left: -100px; opacity: 0;}
  to {margin-left: 0; opacity: 1;}
}

@keyframes left-right2 {
  0% {margin-left: -100px; opacity: 0;}
  30% {margin-left: -100px; opacity: 0;}
  100% {margin-left: 0; opacity: 1;}
}
</style>

转载： 详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
 
         Pyecharts绘制全球流向图
 
           pyecharts中文教程官网
 
目录 
 
安装对应的python模块
 
世界地图
 
中国地图
 
省市地图
 
区县地图
 
热力图
 
动态流向图
 

安装对应的python模块
 
 
 
根据 pyecharts使用教程 ：
 
 
自从 v0.3.2 开始，为了缩减项目本身的体积以及维持 pyecharts 项目的轻量化运行，pyecharts 将不再自带地图 js 文件。如用户需要用到地图图表，可自行安装对应的地图文件包。下面介绍如何安装。
 
 (1)、全球国家地图: echarts-countries-pypkg (1.9MB): 世界地图和 213 个国家，包括中国地图
 (2)、中国省级地图: echarts-china-provinces-pypkg (730KB)：23 个省，5 个自治区
 (3)、中国市级地图: echarts-china-cities-pypkg (3.8MB)：370 个中国城市
 (4)、中国县区级地图: echarts-china-counties-pypkg (4.1MB)：2882 个中国县·区
 (5)、中国区域地图: echarts-china-misc-pypkg (148KB)：11 个中国区域地图，比如华南、华北
 
 需要这些地图的朋友，可以装 pip 命令行:
 
 
 
pip install echarts-countries-pypkg
 
 
pip install echarts-china-provinces-pypkg
 
 
pip install echarts-china-cities-pypkg
 
 
pip install echarts-china-counties-pypkg
 
 
pip install echarts-china-misc-pypkg
 
 
pip install echarts-united-kingdom-pypkg
 
 
更多的地图数据可查看https://github.com/echarts-maps。
 
 
世界地图
 
from pyecharts import Map
  
value = [95.1, 23.2, 43.3, 66.4, 88.5]
attr = ["China", "Canada", "Brazil", "Russia", "United States"]
map0 = Map("世界地图示例", width=800, height=400)
map0.add("世界地图", attr, value, maptype="world", is_visualmap=True, visual_text_color='#000')
map0.render(path="世界地图.html")
 
 
中国地图
 
from pyecharts import Map
  
province_distribution = {'河南': 45.23, '北京': 37.56, '河北': 21, '辽宁': 12, '江西': 6, '上海': 20, '安徽': 10, '江苏': 16, '湖南': 9,'浙江': 13, '海南': 2, '广东': 22, '湖北': 8, '黑龙江': 11, '澳门': 1, '陕西': 11, '四川': 7, '内蒙古': 3, '重庆': 3,'云南': 6, '贵州': 2, '吉林': 3, '山西': 12, '山东': 11, '福建': 4, '青海': 1, '天津': 1,'其他': 1}
provice = list(province_distribution.keys())
values = list(province_distribution.values())
map = Map("中国地图", '中国地图', width=600, height=400)
map.add("", provice, values, visual_range=[0, 50], maptype='china', is_visualmap=True,
  visual_text_color='#000')
map.render(path="中国地图.html")
 
 
省市地图
 
from pyecharts import Map

map2 = Map("贵州地图", '贵州', width=600, height=400)
city = ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州']
values2 = [1.07, 3.85, 6.38, 8.21, 2.53, 4.37, 9.38, 4.29, 6.1]
map2.add('贵州', city, values2, visual_range=[1, 10], maptype='贵州', is_visualmap=True, visual_text_color='#000')

map2.render(path="贵州地图.html")
 
 
区县地图
 
from pyecharts import Map
quxian = ['观山湖区', '云岩区', '南明区', '花溪区', '乌当区', '白云区', '修文县', '息烽县', '开阳县', '清镇市']
values3 = [3, 5, 7, 8, 2, 4, 7, 8, 2, 4]

map3 = Map("贵阳地图", "贵阳", width=600, height=400)
map3.add("贵阳", quxian, values3, visual_range=[1, 10], maptype='贵阳', is_visualmap=True)
map3.render(path="贵阳地图.html")
 
 
热力图
 
from pyecharts import Geo

keys = ['上海', '北京', '合肥', '哈尔滨', '广州', '成都', '无锡', '杭州', '武汉', '深圳', '西安', '郑州', '重庆', '长沙', '贵阳', '乌鲁木齐']
values = [4.07, 1.85, 4.38, 2.21, 3.53, 4.37, 1.38, 4.29, 4.1, 1.31, 3.92, 4.47, 2.40, 3.60, 1.2, 3.7]

geo = Geo("全国主要城市空气质量热力图", "data from pm2.5", title_color="#fff",title_pos="left", width=600, height=400,background_color='#404a59')

geo.add("空气质量热力图", keys, values, visual_range=[0, 5], type='effectScatter',visual_text_color="#fff", symbol_size=15,is_visualmap=True, is_roam=True) # type有scatter, effectScatter, heatmap三种模式可选，可根据自己的需求选择对应的图表模式
geo.render(path="全国主要城市空气质量热力图.html")
 
 
动态流向图
 
更新：    pyecharts已更新，更新方法：
 
pip install  --upgrade pyecharts
 
中文官网教程：https://pyecharts.org/#/
 
此内容具体网址:https://pyecharts.org/#/zh-cn/geography_charts?id=geo%ef%bc%9a%e5%9c%b0%e7%90%86%e5%9d%90%e6%a0%87%e7%b3%bb
 
根据此方法获得的图示动态的，如果需要动态插入文章中可以制成GIF图片，我的制作方法是利用EV录屏软件录制一个动态周期的视频，然后在利用 动态图(GIF)制作方法这个网址，绘制此gif图片。当然如果你能保证每次截取的图片大小一样，可以直接多截几张图，利用一些网站，将图片合成gif也行。
 
绘图代码：
 
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time    : 2020/2/23 13:13
# @Author  : ystraw
# @Site    :
# @File    : t3.py
# @Software: PyCharm Community Edition
# @function: 绘制城市动态流向图

# 导入Geo包，注意1.x版本的导入跟0.x版本的导入差别
# 更新方法：pip install  --upgrade pyecharts
from pyecharts.charts import Geo
# 导入配置项
from pyecharts import options as opts
# ChartType：图标类型，SymbolType：标记点类型
from pyecharts .globals import ChartType, SymbolType

geo = Geo()
# 新增坐标点，添加名称跟经纬度, 也就是当地图中不包含这个地名的坐标时，自己加入！
geo.add_coordinate('新地点', 122.480539, 35.235929)

# 地图类型，世界地图可换为world
geo.add_schema(maptype="china")
# 添加数据点
geo.add("",[("北京",10),("上海",20),("广州",30),("成都",40),("哈尔滨",50),("新地点",40)],type_=ChartType.EFFECT_SCATTER)
# 添加流向，type_设置为LINES，涟漪配置为箭头，提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle',
#'diamond', 'pin', 'arrow', 'none'
geo.add("geo-lines",
        [('北京', '广州'), ('上海', '上海'), ('广州', '成都'),('成都', '哈尔滨'), ('新地点', '哈尔滨')],
        type_=ChartType.LINES,
        effect_opts=opts.EffectOpts(symbol=SymbolType.ARROW,symbol_size=10,color="yellow"),
        linestyle_opts=opts.LineStyleOpts(curve=0.2),
        is_large=True)
# 不显示标签
geo.set_series_opts(label_opts=opts.LabelOpts(is_show=True))
# 设置图标标题，visualmap_opts=opts.VisualMapOpts()为左下角的视觉映射配置项
geo.set_global_opts(visualmap_opts=opts.VisualMapOpts(),title_opts=opts.TitleOpts(title="城市动态流向图"))
# 直接在notebook里显示图表
geo.render_notebook()
# 生成html文件，可传入位置参数
geo.render("城市动态流向图2.html")
 
 

打算在年前实现用百度地图API绘制NYC出租车流向地图。目前实现了将出租车的起始点的GPS点映射到地图上，绘制了GPS点的热力图。记录在此。
 所用数据：NYC绿色出租车数据
 时间：2016.01.01 0:00-24:00 共24小时
 GPS点个数：64398
 绘图方式：热力图
 
百度地图API提供自定义热力图（Heatmap）功能，网站上提供示例代码。
 将经纬度数据喂进去即可。
 
记录一下csv文件转json文件：
 
绿色出租车csv数据包括上下车时间、上下车的经纬度，载客人数、各种收费计算，只读其中的上车点经纬度数据。
 
1.使用reader函数，返回一个生成器，类型为列表：
 
import csv
with open('example.csv','rb') as csvfile:
    reader = csv.reader(csvfile)
    rows= [row for row in reader]
 
读取其中的一列：
 
import csv
with open('A.csv','rb') as csvfile:
    reader = csv.reader(csvfile)
    column = [row[2] for row in reader]
    #读其中的第3列
 
读取其中的一行：
 下面代码打印出row[2]代表的值，也就是第三行
 
with open(csv_file, "r") as f:
    reader = csv.reader(f)
    row1 = [row for row in reader]
print row1[2]  #row1[i]就代表是第几行
 
读取指定的某行某列
 如果想打印出第一列第一行的值，直接
 
print column1[0]
 
2.使用DictReader
 
从csv读出的都是str类型。这种方法要事先知道列的序号，比如longitude在第5列，而不能根据’longtitude’这个标题查询。这时可以采用DictRead函数
 如果我们想用DictReader读取csv的某一列，就可以用列的标题查询：
 
#直接用列标题 Pickup_longitude 来读
with open(file1,"r") as csvfile1:
        reader = csv.DictReader(csvfile1)
        Pickup_longitude = [row['Pickup_longitude'] for row in reader]
 
3. 将读取的某几列写入到新的csv文件：
 
with open(file2,"w") as csvfile2:
        print(len(Pickup_longitude), len(Pickup_latitude))
        writer = csv.writer(csvfile2)
        writer.writerow(['lng','lat','count'])
        #for index in range(len(Pickup_latitude)):
        for index in range(num):
            writer.writerow([float(Pickup_longitude[index]),float(Pickup_latitude[index]),float(1)])
 
将处理好的csv文件转json文件
 
def read_csv(file):
    csv_rows = []
    with open(file) as csvfile:
        reader = csv.DictReader(csvfile)
        title = reader.fieldnames
        for row in reader:
            csv_rows.extend([{title[i]:float(row[title[i]]) for i in range(len(title))}])
        return csv_rows

# 写json文件
def write_json(data, json_file, format=None):
    with open(json_file, "w") as f:
        if format == "good":
            f.write(json.dumps(data, sort_keys=False, indent=4, separators=(',', ': '),encoding="utf-8",ensure_ascii=False))
        else:
            f.write(json.dumps(data))

write_json(read_csv('G:/nyc/data.csv'), 'data.json')
 
附完整代码：
 
import csv
import json 
def csv2csv(file1,file2):
    Pickup_longitude = []
    Pickup_latitude = []
    with open(file1,"r") as csvfile1:
        reader = csv.DictReader(csvfile1)
        Pickup_longitude = [row['Pickup_longitude'] for row in reader]
        # Pickup_latitude = [row2['Pickup_latitude'] for row2 in reader]
    with open(file1, "r") as csvfile1:
        reader = csv.DictReader(csvfile1)
        Pickup_latitude = [row['Pickup_latitude'] for row in reader]

    with open(file2,"w") as csvfile2:
        print(len(Pickup_longitude), len(Pickup_latitude))
        writer = csv.writer(csvfile2)
        writer.writerow(['lng','lat','count'])
        for index in range(len(Pickup_latitude)):            writer.writerow([float(Pickup_longitude[index]),float(Pickup_latitude[index]),float(1)])

csv2csv('G:/nyc/green_tripdata_2016-01.csv','G:/nyc/data.csv')

def read_csv(file):
    csv_rows = []
    with open(file) as csvfile:
        reader = csv.DictReader(csvfile)
        title = reader.fieldnames
        for row in reader:
            csv_rows.extend([{title[i]:float(row[title[i]]) for i in range(len(title))}])
        return csv_rows

# 写json文件
def write_json(data, json_file, format=None):
    with open(json_file, "w") as f:
        if format == "good":
            f.write(json.dumps(data, sort_keys=False, indent=4, separators=(',', ': '),encoding="utf-8",ensure_ascii=False))
        else:
            f.write(json.dumps(data))

write_json(read_csv('G:/nyc/data.csv'), 'data.json')

 
热力图效果如下
 

 
 
 
参考博客：
 使用python获取csv文本的某行或某列数据
 Python：CSV文件和JSON文件相互转换

先看效果：
 
 
前提
 
npm i echarts 
 
下面代码可直接食用：
 
代码：
 
<template>
  <div class="echarts">
    <div :style="{height:'500px',width:'500px'}" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
var geoCoordMap = {
  ww: [100, 100],
  xx: [200.00461, 200.01165],
  zz: [400.00461, 300.08395],
  cc: [300.8432, 300.08395],
  zjq: [400.8432, 100.08395],
  yy: [250, 500]
};
export default {
  mounted() {
    this.chinaConfigure();
  },
  methods: {
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      myChart.setOption({
        backgroundColor: "#000079",
        geo: {
          map: "zjq"
        },
        series: [
          {
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 5, //箭头指向速度，值越小速度越快
              trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 6 //图标大小
            },
            lineStyle: {
              normal: {
                color: "#a6c84c",
                width: 0.2, //尾迹线条宽度
                opacity: 0.2, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                coords: [geoCoordMap["yy"], geoCoordMap["xx"]]
              },
              {
                coords: [geoCoordMap["yy"], geoCoordMap["ww"]]
              },
              {
                coords: [geoCoordMap["yy"], geoCoordMap["zz"]]
              },
              {
                coords: [geoCoordMap["yy"], geoCoordMap["cc"]]
              },
              {
                coords: [geoCoordMap["yy"], geoCoordMap["zjq"]]
              }
            ]
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  display: block;
}
</style>