效果如下
实时车辆信息图
—组件代码
<!--车辆实时信息图-->
<template>
<div class="com-container">
<div class="com-chart" ref="stock_ref"></div>
</div>
</template>
<script>
export default {
name: "Stock",
data() {
return {
chartInstance:null,
allData:null,
currentIndex:0,//当前显示数据的页数
timerId:null,//定时器标识
}
},
mounted(){
this.initChart();
this.getData();
window.addEventListener('resize',this.screenAdapter);
//在页面加载完成忠厚,主动进行屏幕的适配
this.screenAdapter();
},
destroy(){
//在组件销毁的时候,将窗口监听器取消掉
window.removeEventListener('resize',this.screenAdapter);
clearInterval(this.timerId);
},
methods: {
//初始化echartInstance对象
initChart(){
this.chartInstance=this.echarts.init(this.$refs.stock_ref,'chalk');
const initOption={
title:{
text:'┃ 实时车辆信息',
left:20,
top:20,
}
};
this.chartInstance.setOption(initOption);
//设置鼠标移入移出事件
this.chartInstance.on('mouseover',()=>{
clearInterval(this.timerId);
});
this.chartInstance.on('mouseout',()=>{
this.startInterval();
});
},
//获取服务器数据
async getData(){
await this.axios.get("/chart/stock").then(res=>{
this.allData=res.data;
});
this.updateChart();
this.startInterval();
},
//处理数据
updateChart(){
const centerArr = [
['18%', '40%'],
['50%', '40%'],
['82%', '40%'],
['34%', '75%'],
['66%', '75%']
];
const colorArr=[
['#4FF778', '#0BA82C'],
['#E5DD45', '#E8B11C'],
['#E8821C', '#E55445'],
['#5052EE', '#AB6EE5'],
['#23E5E5', '#2E72BF']
];
const start=this.currentIndex*5;
const end=(this.currentIndex+1)*5;
const showData=this.allData.slice(start,end);
const seriesArr=showData.map((item,index)=>{
return {
type:'pie',
center:centerArr[index],
hoverAnimation:false,//关闭鼠标移入变细的效果
labelLine:{
show:false,//隐藏指市线
},
label:{
position:'center',
color:colorArr[index][0],
},
data:[
{
name:item.name+'\n\n'+item.model+'\n\n'+item.sales,
value:item.sales,
itemStyle:{
color:new this.echarts.graphic.LinearGradient(0,1,0,0,[
{
offset:0,
color:colorArr[index][0],
},
{
offset:1,
color:colorArr[index][1],
},
])
}
},
{
value:item.stock,
itemStyle:{
color:'#333843'
}
},
]
}
});
const dataOption={
series:seriesArr
};
this.chartInstance.setOption(dataOption);
},
//当浏览器的大小发生变化的时候,调用该方法,来完成屏幕的适配
screenAdapter(){
const titleFontSize=this.$refs.stock_ref.offsetWidth/100 * 3.6;
const innerRadius=titleFontSize*2.8;
const outterRadius=innerRadius*1.125;
//和分辨率大小相关的配置项
const adapterOption={
title:{
textStyle:{
fontSize:titleFontSize
}
},
series:[
{
type:'pie',
radius:[outterRadius,innerRadius],
label: {
fontSize:titleFontSize/2
}
},
{
type:'pie',
radius:[outterRadius,innerRadius],
label: {
fontSize:titleFontSize/2
}
},
{
type:'pie',
radius:[outterRadius,innerRadius],
label: {
fontSize:titleFontSize/2
}
},
{
type:'pie',
radius:[outterRadius,innerRadius],
label: {
fontSize:titleFontSize/2
}
},
{
type:'pie',
radius:[outterRadius,innerRadius],
label: {
fontSize:titleFontSize/2
}
},
],
};
this.chartInstance.setOption(adapterOption);
//手动的调用图表的resize方法
this.chartInstance.resize();
},
startInterval(){
if (this.timerId) {
clearInterval(this.timerId);
}
this.timerId=setInterval(()=>{
this.currentIndex++;
if (this.currentIndex > 1) {
this.currentIndex=0
}
this.updateChart();//在更改完currentIndex之后,需要更新界面
},5000);
}
}
}
</script>
<style scoped>
.com-container{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.com-chart{
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 20px;
}
</style>
实时车辆信息图
—接口数据
[{"name":"豫J·Q2292","model":"宇通客车豪华版","stock":"53","sales":"53"},{"name":"豫J·Q2293","model":"大众CC","stock":"4","sales":"4"},{"name":"豫J·Q2295","model":"奔驰迈巴赫","stock":"2","sales":"2"},{"name":"沪Q·2296","model":"五菱宏光","stock":"3","sales":"3"},{"name":"豫J·Q2297","model":"宇通客车旅游版","stock":"60","sales":"60"}]