Echart地图带有时间轴的打点图和热力图

超、凢脫俗 2022-05-15 12:19 1485阅读 0赞

## Echarts带有时间轴的打点图和热力图型地图 ##

option ={
          baseOption: {
              timeline: {   // 时间轴样式
                axisType: 'category',
                data: yearArray,
                playInterval: 1000,
                bottom: '0',
                symbolSize: 10,
                autoPlay: false,
                loop: true,
                realtime: true,
                lineStyle: {
                  color: '#466872',
                  width: 2,
                },
                label: {
                  color: '#5cc5da',
                  fontSize: 14,
                },
              },
              title: {
                text: '产量（辆）',
                right: '8.5%',
                bottom: '15%',
                textStyle: {
                  color: '#fff',
                  fontSize: '17',
                },
              },
              grid: {    //echarts地图距离容器位置
                left: '14%',
                right: '2%',
                bottom: '70%',
                top: '2%',
                containLabel: false,
              },
              visualMap: {
                seriesIndex: 1, //选取series里面第二个数值是地图的图例样式
                right: '5%',
                bottom: '10%',
                itemWidth: '12',
                itemHeight: '110',
                calculable: true,
                orient: 'horizontal',
                inRange: {
                  color: ['#efefef', '#00abfb', '#0090f9', '#007dfb'],
                },
                textStyle: {
                  color: '#fff',
                },
    
              },
              geo: {
                map: 'china',   //设置地图属于哪个地点，根据插件china.json设置
                label: {
                  normal: {
                    show: false,
                    fontSize: 18,
                    color: '#fff',
                  },
                },
                itemStyle: {
                  normal: {
                    areaColor: 'transparent',
                    borderWidth: 1,
                    borderColor: '#01AFEB',
                  },
                },
              },
              tooltip: {
                show: true,
                trigger: 'item',
              },
              series: [
                {    //第一个值为打点所用
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbolSize: 12,
                  itemStyle: {
                    normal: {
                      color: '#D2D531',
                    },
                  },
                  tooltip: {
                    formatter: function (params) {
                      return params.name;
                    },
                  },
                },
                {    //第二个值为地图热力所用![这里写图片描述](https://img-blog.csdn.net/20180829170008715?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
                  type: 'map',
                  mapType: 'china',
                  roam: false,
                  showLegendSymbol: false,
                  tooltip: {
                    formatter: function (params) {
                      return params.name + ' : ' + params.value;
                    },
                  },
                  label: {
                    normal: {
                      show: false,
                      fontSize: 18,
                      color: '#fff',
                    },
                  },
                  itemStyle: {
                    normal: {
                      areaColor: 'transparent',
                      borderWidth: 1,
                      borderColor: '#01AFEB',
                    },
                  },
                },
              ],
            },
            options: options,
    }

![这里写图片描述][70]

[70]: /images/20220515/33fd5fea4f0f4b708394818257c4ff14.png