最近有个作业需要制作一个大屏,具体要求要如下图:
首先我进行了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样式对图表进行修改,移动。
初始版效果如图: