vue3框架下datav大屏可视化，地图使用echarts构建

最近有个作业需要制作一个大屏，具体要求要如下图：

首先我进行了datav的学习，在datav学习我觉得难点在于配置项的选用，就比如下图中主线图，里面的线上点大小，坐标轴颜色，文字大小等均可以调节（值得注意的点是x轴数据一定要和下面的data对应，不然显示不了）：

<script setup>
import {ref,reactive} from "vue";

const option = {
  legend: {
    data: ['设备数量', '设备总量'],
    top: 80,
    right:80,
    textStyle:{
      fill:'#fff',
    }
  },
  xAxis: {
    data: [
      '11.29', '11.30', '12.1', '12.2','12.3','12.4','12.5'
    ],
    axisLabel: {
      style: {
        rotate: 20,
        textAlign: 'left',
        textBaseline: 'top',
        fill:'#fff'
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: [{
    name:'万吨',
    nameTextStyle: {
      fill: '#fff',
      fontSize: 20
    },
    data: 'value',
    min: 0,
    max: 300,
    interval: 50,
    splitLine: {
      style: {
        lineDash: [3,3],
      }
    },
    axisLabel: {
      formatter: '{value} 万元',
      style:{
        fill:'#fff',
      }
    },
    axisTick: {
      show: false
    }
  },
    {
      name: '',
      nameTextStyle: {
        fill: '#fff',
        fontSize: 10
      },
      data: 'value',
      position: 'right',
      min: 0,
      max: 30,
      interval: 5,
      splitLine: {
        show: false
      },
      axisLabel: {
        formatter: '{value}  ',
        style:{
          fill:'#fff',
          fontSize:10
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '设备数量',
      data: [
        175, 125, 90, 130, 45, 65,
        65,
      ],
      type: 'bar',
      gradient: {
        color: ['#37a2da', '#67e0e3']
      },
      animationCurve: 'easeOutBounce'
    },
    {
      name: '设备总量',
      data: [
        23, 18, 16, 14, 10, 8,
        6,
      ],
      type: 'line',
      // 这里设置标点大小
      linePoint:{
        style:
            {
              lineWidth:5
            }
      },
      yAxisIndex: 1,
      animationCurve: 'easeOutBounce'
    }
  ]
}
</script>

饼状图使用的是echarts，echarts比datav好，datav不能显示总数，只能显示百分比，而echarts使用tooltip能实现鼠标点击显示数据总量。这里随便去找找就能解决，最主要的还是怎么在vue里引入echarts，代码格式怎么写：

<script setup>
import {ref, onMounted, reactive} from 'vue'
import * as echarts from 'echarts'
import hunanMap from '@/assets/json/湖南省.json'

let chart = ref();//代表dom引用
onMounted(() => {
  initChart();
})

function initChart() {
  var myChart = echarts.init(chart.value);
  echarts.registerMap('hunan', hunanMap)

  const jsonData =
      [
        {name: '长沙市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '株洲市', value: 180}, // 已给定的示例值
        {name: '湘潭市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '衡阳市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '邵阳市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '岳阳市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '常德市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '张家界市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '益阳市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '郴州市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '永州市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '怀化市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '娄底市', value: Math.floor(Math.random() * 1000) + 1},
        {name: '湘西土家族苗族自治州', value: Math.floor(Math.random() * 1000) + 1}
      ];

  const pointData = [
    {name: '设备1', value: [110.9945, 27.1234]},
    {name: '设备2', value: [113.5678, 29.5432]},
    {name: '设备3', value: [112.9876, 25.8765]},
    {name: '设备4', value: [110.1234, 26.9876]},
    {name: '设备5', value: [113.3456, 28.7654]},
    {name: '设备6', value: [112.5678, 27.1234]},
    {name: '设备7', value: [111.7890, 25.5432]},
    {name: '设备8', value: [110.9876, 29.8765]},
    {name: '设备9', value: [112.1234, 26.9876]},
    {name: '设备10', value: [113.3456, 27.7654]},
    {name: '设备11', value: [111.5678, 28.1234]},
    {name: '设备12', value: [110.7890, 27.5432]},
    {name: '设备13', value: [112.9876, 26.8765]},
    {name: '设备14', value: [111.1234, 27.9876]},
    {name: '设备15', value: [112.3456, 28.7654]},
    {name: '设备16', value: [111.5678, 27.1234]},
    {name: '设备17', value: [110.7890, 26.5432]},
    {name: '设备18', value: [112.9876, 28.8765]},
    {name: '设备19', value: [112.1234, 25.9876]},
    {name: '设备20', value: [112.3456, 26.7654]}
  ];

  let option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        // 检查数据点是否属于scatter系列
        if (params.seriesType === 'scatter') {
          // 如果是scatter系列，只显示name属性
          return params.data.name;
        } else {
          // 如果是其他类型的数据点，使用默认的formatter或自定义的formatter
          // 可以删除这一行，让ECharts使用默认的formatter
          // 或者自定义返回其他信息
          return params.name + ' ' + params.value;
        }
      }
    },
    geo: {
      map: 'hunan',
      roam: true,
      zoom: 1.25,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#2a333d'
        }
      }
    },
   
    series: [{
      name: '湖南',
      type: 'map',
      map: 'hunan',
      zoom: 1.2,
      data: jsonData,
      label: {
        show: true,
        color: '#fff',
        fontSize: 12
      },
      itemStyle: {
        areaColor: '#219edb',
        borderColor: '#fff',
        borderWidth: 1,
      },
      emphasis: {
        label: {
          show: true,
          color: '#fff',
          fontSize: 20
        },
        itemStyle: {
          areaColor: '#11e1b0',
          borderColor: '#fff',
          borderWidth: 2,
        },
      },
    },
      {
        name: '设备',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: pointData,
        symbolSize: 5,
        label: {
          normal: {
            position: 'right',
            show: true,
            formatter: '{b}',
          },
        },
        itemStyle: {
          normal: {
            color: '#f4e925'
          },
        },
      }]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  })
}
</script>

<template>
  <!--  <div style="width:100%;height:100%">-->
  <div style="height: 100%">
    <div ref="chart" style="width: 100%;height: 650px;"></div>
  </div>
</template>

<style scoped>

</style>

可以自己看一下，注意把echarts的格式从“id=‘’***’换成ref =‘***’

然后是地图的引入，自己去阿里云哪里下载地图的JSON数据，这里主要还是说一下怎么在地图上标点和显示，标点是在geo显示地图基础上进行的，

{
        name: '设备',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: pointData,
        symbolSize: 5,
        label: {
          normal: {
            position: 'right',
            show: true,
            formatter: '{b}',
          },
        },
        itemStyle: {
          normal: {
            color: '#f4e925'
          },
        },

就是在geo地图上使用散点图实现标点，注意这里有个好处，有两张地图，所以我们可以把地图显示的有层次感，这是非常好的一点，算是小彩蛋。然后就是在地图上显示地名（长沙市等），这里使用

label: {
  show: true,
  color: '#fff',
  fontSize: 12
},

即可。当然我这个比较简单，你们可以去githup或者Gitee上找其他人的，他们能实现钻探，就是几张地图联用。

然后这里面，我们可以使用css样式对图表进行修改，移动。

初始版效果如图：