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

最新推荐文章于 2024-08-27 22:04:01 发布

置顶落花别有意流水似无情

最新推荐文章于 2024-08-27 22:04:01 发布

阅读量6.3k

点赞数 1

文章标签：地图热力图地图打点图地图打点热力图 Echarts时间轴打点图和热力图

本文链接：https://blog.csdn.net/weixin_42931825/article/details/82186985

版权

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,
}