vue使用echart图表过程所遇问题整理

1、v-for循环时，ref获取不到div

//原来的写法
<div class="echartDiv" ref="barEchartRef" :style="{height: echartConH+'px'}"></div>

//修改后写法
<div class="echartDiv" :ref="el => barEchartRef= el" :style="{height: echartConH+'px'}"></div>

2、echart图表使用同一个div，点解按钮进行切换时参数互相影响，例如柱状图与饼状图的切换

//原来写法
barEchart.setOption(barOptions);
//解决方法
barEchart.setOption(barOptions,true);
//解析：第二个参数控制重绘图表时是否进行配置合并，默认为false-合并。修改为true后即以不合并的方式重绘

//也可在init初始化之前先销毁
barEchart.dispose();
barEchart = echarts.init(carBarEchartRef.value);
barEchart.setOption(barOptions,true);

3、解决echart “ There is a chart instance already initialized on the dom ”提示

//解决方法
const barEchartRef = ref();
var barEchart = null;
function barEchartInit(){let barOptions={};let hasEchart = echarts.getInstanceByDom(barEchartRef .value);if( !hasEchart ){barEchart = echarts.init(barEchartRef .value);}barEchart.setOption(barOptions,true);
}

4、使用el-tab时，图表在el-tab中，解决图表点击空白，或者出现Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight 提示

解决方法：
1、for去掉，改为直接的写法；此时ref也可直接获取到，不用方法一的改写
2、增加lazy参数
3、图表使用同一个div，点击tab进行切换

//代码参考
<div style="padding:15px 0px 0px 15px;"><el-radio-group v-model="echartForm.echartType"><el-radio-button label="1" @change.native="echartChange('tab01',1)">人员统计</el-radio-button><el-radio-button label="2" @change.native="echartChange('tab01',2)">督察项统计</el-radio-button></el-radio-group>
</div>
<!-- 图表搜索end -->
<div class="echartDiv" ref="carBarEchartRef"></div><script setup>
//按钮切换
function echartChange(name,type){if( name=='tab01' ){if(type=='1'){if(pieEchart){pieEchart.dispose();}barEchartInit();}else{if(barEchart){barEchart.dispose();}pieEchartInit();}}
}const barEchartRef = ref();
var barEchart = null;
const barXData = ref([]);//柱状图横坐标
const barYData = ref([]);//柱状图竖坐标
function barEchartInit(){let params={};//接口调取接口名(params).then(res=> {//接口调取成功barXData.value=res.Xdata;barYData.value=res.Ydata;let barOptions;if( barXData.value.length==0 ){barOptions = {title:{text:'暂无数据',left:'center',top:'center'}}}else{barOptions ={tooltip:{show: true},xAxis: {type: 'category',data: barXData.value,axisLabel: {rotate:30,align: "right",verticalAlign: "top"},},yAxis: {type: 'value',},series: [{data: barYData.value,type: 'bar',barMaxWidth: 35,barMinWidth: 15,itemStyle: barStyle.value.itemStyle,emphasis: {itemStyle: barStyle.value.emphasisItemStyle}}]}}nextTick(()=>{let hasEchart = echarts.getInstanceByDom(barEchartRef.value);if( !hasEchart ){barEchart = echarts.init(barEchartRef.value);}barEchart.setOption(barOptions,true);})})
}var pieEchart = null;
const pieData = ref([]);
function pieEchartInit(){let params={};//接口调取接口名(params).then(res=> {pieData.value = res.data;let perOptions;if( pieData.value.length==0 ){perOptions = {title:{text:'暂无数据',left:'center',top:'center'}}}else{perOptions={tooltip: {trigger: 'item',formatter: '{b} <br/>{c} ({d}%)'},legend:{orient: 'vertical',right: '6%',top:'middle'},series: [{name: '问题督察项占比',type: 'pie',radius: ["0%", "60%"],right: '26%',data: pieData.value,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}}nextTick(()=>{let hasEchart = echarts.getInstanceByDom(barEchartRef.value);if( !hasEchart ){pieEchart = echarts.init(barEchartRef.value);}pieEchart.setOption(perOptions,true);})})
}
</script>

vue使用echart图表过程所遇问题整理相关推荐

vue制作echart图表随着画面等比例放大缩小
因为本身echart做的图表不会随着div的大小比例进行变化,因此下面介绍两种控制echart大小变化的方法. 第一种:根据屏幕分辨率变化切换echart图表的大小变化在mounted中添加监听事件 ...
vue 使用echart图表随屏幕放大缩小_哈特（HART）475手操器使用教程
HART手操器:HART(Highway Addressable Remote Transducer),可寻址远程传感器高速通道的开放通信协议,是一种用于现场智能仪表和控制室设备之间的通信协议.使用它 ...
基于VUE的echart图表自适应窗口大小变化插件开发
需求在PC端开发含图表展示的页面时,需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化. 常规做法在含有图表组件mounted的钩子中增加监听window的resize事件,具体如下代 ...
vue+echart图表数据切换
vue+echart图表数据切换前言一.效果图二.代码演示 1.准备阶段 2.HTML片段 3.js片段 4.css片段总结前言最近有个需求,同一个echart图表点击切换不同数据,花了点 ...
vue动态给散点图每个圆球设置背景色 - echart图表
如图所示: 代码如下:(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html> <head><meta charset=&qu ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Echart图表在项目中如何使用？（前后端详细技术讲解）
Echart图表在项目中的详细使用第二章 Echart图表在项目中的详细使用-折线图篇提示:我们在讲解Echart使用时首先要安装Echart,使用的前端框架时vue,后端时springboot项 ...
echart图表缩放到一定比例（可自定义）后，停止放大，还可以缩小回去
一.需求: 有时候,我们有这样的需求:当echart图表(特别是折线图)的数据量很大,客户要求可以放大图表来仔细查看数据.echart有dataZoom这种技术来支持,也蛮好用的.但是有的客户就是很刁 ...
【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）
这节也是这个系列最后的一篇文章了. 第二篇文章,将Echarts封装成了组件,在使用的时候,只需将ChartsOption传递进去即可,同时,提供了监听事件,当Option发生变化时,会刷新图表. 因 ...

vue使用echart图表过程所遇问题整理

vue使用echart图表过程所遇问题整理相关推荐

最新文章

热门文章