天枫庄资源网 Design By www.wosibo.com
我就废话不多说了,大家还是直接看代码吧~
this.$nextTick(() => {
$("select[name='ddlCostCenter']").select2({
language: "zh-CN"
});
});
补充知识:vue+Echarts动态数据已经赋值,但是无法渲染页面的问题
最近用vue+Echarts想做一个饼状统计图,但是数据明明已经绑定完毕,但是页面渲染一直没有效果,最终才发现问题所在,自己还是个新手,主要对vue还不是很熟悉。废话不说,接下来看我的代码:
正常的给个div的大小
<div>
<div id="echartss" :style="{width: '100%', height: '600px'}"></div>
</div>
接下来是option部分:
echarts1_option:{
backgroundColor: '#45515a', //背景颜色
//标题
title: {
text: '订单中保险公司所占的比例',
subtext: '饼图示例',
left: 'center',
top: 20,
textStyle: {
color: '#ccc',
fontStyle: 'italic'//标题字体
}
},
//弹窗,响应鼠标指向,显示具体细节
tooltip : {
trigger: 'item',//以具体项目触发弹窗
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
//图例,选择要显示的项目
legend:{
orient:'vertical',
left:'left',
textStyle:{
color:'#c8c8d0'
},
data:['安心','安盛天平','中华联合保险','中国太平洋保险','中国人保财险','平安车险'] //注意要和数据的name相对应
},
//工具箱
toolbox:{
show:true,//显示工具箱
feature:{
dataView:{show:true}, //以文字形式显示数据
restore:{show:true}, //还原
//dataZoom:{show:true}, //区域缩放
saveAsImage:{show:true}, //保存图片
//magicType:{type:['line','bar']}//动态数据切换,数据显示可以在该规定内容中切换显示方式,
}
},
/*//视觉映射组件,将数据映射到视觉元素上
visualMap: {
show: false,
min: 1,
max: 2,
dimension: 0, //选取数据的维度,如人数据:[身高,体重],则1代表将体重进行映射,默认值为数组的最后一位
// seriesIndex: 4, //选取数据集合中的哪个数组,如{一班},{二班},默认选取data中的所有数据集
inRange: {
//选定了要映射的对象,用inRange详细写要渲染的具体细节,[x,y]中x指最小值对应的量(亮度,饱和度等),y指最大值对应的量,其余的按各自value线性渲染
color:['red'],
colorLightness: [0,1],
colorSaturation:[0,1]
}
},*/
//数据
series : [
{
name: '成交数量',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data:[
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',//角度和半径展现百分比,'area'只用半径展现
label: { //饼图图形的文本标签
normal: { //下同,normal指在普通情况下样式,而非高亮时样式
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: { //引导线样式
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.5, //0-1,越大越平滑弯曲
length: 10, //从块到文字的第一段长
length2: 20 //拐弯到文字的段长
}
},
itemStyle: { //图例样式
normal: {
//color: '#97413c',
shadowBlur: 50,//阴影模糊程度
shadowColor: 'rgba(0, 0, 0, 0.5)',//阴影颜色,一般黑
}
},
animationType: 'scale', //初始动画效果,scale是缩放,expansion是展开
animationEasing: 'elasticOut', //初始动画缓动效果
animationDelay: function (idx) { //数据更新动画时长,idx限定了每个数据块从无到有的速度
return Math.random() * 200;
}
}
],
color: ['#97858c','pink','green','yellow','orange','#97813c'],
},
接下来看init代码
init(){
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('echartss'))
// 绘制图表,this.echarts1_option是数据
myChart.setOption(this.echarts1_option,true)
},
然后是给动态数据赋值代码(从后台接口取得的数据)
drawline() {
// 数据初始化
API.account.getAccount().then(({data}) => {
if (data && data.code == 0) {
this.echarts1_option.series[0].data=data.data.list;
} else {
this.$Message.error(data.msg);
}
}).catch((data) => {
this.$Message.error('连接失败,请检查网络!');
});
},
到目前为止,页面的结果是:
页面完全没有效果:
在加上下面代码后:
//数据自动刷新,必然需要一个监听机制告诉Echarts重新设置数据
watch: {
//观察option的变化
echarts1_option: {
handler(newVal, oldVal) {
if (this.myChart) {
if (newVal) {
this.myChart.setOption(newVal);
} else {
this.myChart.setOption(oldVal);
}
} else {
this.init();
}
},
deep: true //对象内部属性的监听,关键。
}
},
我们再看看运行结果:
数据虽然刷新了,但是我们的Echart's组件却不知道,必须有个watch过程。
以上这篇解决vue页面渲染但dom没渲染的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,页面渲染,dom
天枫庄资源网 Design By www.wosibo.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
天枫庄资源网 Design By www.wosibo.com
暂无解决vue页面渲染但dom没渲染的操作的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2025年11月08日
2025年11月08日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]

