Vue+DataV+echarts⼤屏可视化开发注意点
前提是装好所需依赖开发包，默认都已经装好。
1.页⾯最外层使⽤DataV全屏容器组件
<dv-full-screen-container>content</dv-full-screen-container>
2.⼀般最外层div设置宽度(width:100vw),⾼度(height:100vh)。⼀定要设置。不然全屏组件显⽰页⾯不全。
3.建议⼀：(不⽤做多个echart切换等动态效果使⽤这个)echart⼀般封装成组件，下⾯是基本⽰例：
<template>
<div :id="charid">
数据可视化大屏设计
<dv-loading></dv-loading>
</div>
</template>
<script>
export default{
data(){
return{
charid: Math.random(1),
chart:null//关键⼀
};
},
props:["chardata"],
watch:{
chardata(){
this.initcarinfo();
this.init();
}
},
methods:{
initcarinfo(){
let that =this;
// 基于准备好的dom，初始化echarts实例
this.chart =harts.ElementById(this.charid));
// 指定图表的配置项和数据
var colorList =[
"#1bb1f5",
"#ffbb19",
"#ed4014",//红
"#af89ff",
"#67c23a",//绿
"#ff9599",
"#00a1ff",
"#fad254",
"#ffa149",
"#aac3e0",
"#ffbb19",
"#ed4041",
"#af89ef",
"#67c2a3"
];
let rounddata =[];
for(let item of that.chardata){
rounddata.push({ name: item.name, value: item.num });
}
let option ={
tooltip:{
trigger:"item"
},
legend:{
show:false,
bottom:-4,
orient:"horizontal",
align:"auto",
itemGap:10,
itemWidth:10,
itemHeight:10,
formatter:function(name){
for(let item of rounddata){
if(item.name == name){
return`${name} (${item.value})`;
}
}
// console.log(name);
},
textStyle:{
color:function(params){
return colorList[params.dataIndex];
},
fontSize:12
}
},
series:[
{
type:"pie",
center:["50%","50%"],
radius:["40%","62%"],
clockwise:true,
avoidLabelOverlap:true,
hoverOffset:5,
itemStyle:{
normal:{
color:function(params){
return colorList[params.dataIndex];
}
}
},
label:{
show:true,
position:"outside",
formatter:function(params){
// console.log(params);
return`${params.name}(${params.value})`;
}
},
labelLine:{
normal:{
length:5,
length2:10,
lineStyle:{
width:1
}
}
},
data: rounddata
}
]
};
// 使⽤刚指定的配置项和数据显⽰图表。
this.chart.setOption(option);
},
init(){
window.addEventListener("resize",()=>{
size();
});
}
}
};
</script>
4.建议⼆：（echart做动态切换，动效时建议使⽤）主要结合vue的diff算法，元素绑定的key值变化时，vue认为两个元素不是同⼀
个元素，会重新渲染元素，可以给外层元素添加动态key值，屏幕⼤⼩改变时改变绑定元素的key值，key值改变发⽣diff算法，元素在界⾯上重新渲染，echart也会重新绘制，实现⾃适应。缺点：因为重新渲染元素，性能也会有所影响。还有就是改变key值时需要重新绑定echart数据，不然⽆法显⽰
<div class="mainbar":key="timer">
...
/
/echart代码
</div>
this.timer =new Date().getTime();
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。