这个是效果图，再不改变宽口大小的时候echats的图标是图一，改变窗口大小之后才会自适应。

未改变窗口大小：

改变窗口大小之后，图像就会自适应。

HTML代码

<div id="stairOne" class="stairOne" style="width:35%;"><!-- 雷达轮播图 --><el-carousel height="409px" :autoplay="false"><el-carousel-item><div class="panel" style="height: 409px;margin-bottom: 0px;"><div id="Map-cal-proportionChart" style="width:100%"></div><div class="panel-footer"></div></div></el-carousel-item><el-carousel-item><div class="panel" style="height: 409px;margin-bottom: 0px;"><div id="Map-cal-proportionChart2" style="width:100%"></div><div class="panel-footer"></div></div></el-carousel-item></el-carousel><!--<div class="panel"><div id="Map-cal-proportionChart"></div><div class="panel-footer"></div></div>--></div>

js代码

//雷达图的轮播图初始化var Carousel = new Vue({el: "#stairOne",data: {},mounted: function () {initMap();//var a = $("#stairOne").width() - 10;//$("#Map-cal-proportionChart").width(a);//$("#Map-cal-proportionChart2").width(a);}});

initMap 初始化方法

function initMap() {proportionChartInstantiation = echarts.init(document.getElementById('Map-cal-proportionChart'));proportionChartInstantiation2 = echarts.init(document.getElementById('Map-cal-proportionChart2'));//图5服务台单量分布proportionChart = {color: colors,toolbox: {show: true,feature: {myTool2: {show: true,title: '刷新',icon: 'image://../../images/刷新.png',onclick: function () {MapPersonList4("false");}}}},title: {subtext: '票易通完结率：0\n\n服务台完结率：0\n\n总完结率：0',//top: 5,left: "3%",textStyle: {//文字颜色color: textcolor}},tooltip: {trigger: 'item'},radar: {center: ['50%', '55%'],//位置indicator: [{ text: '重开量', max: 100 },{ text: '关单量', max: 100 },{ text: '转单量', max: 100 },{ text: '响应量', max: 100 },{ text: '触碰量', max: 100 }]},series: {name: '工单汇总',type: 'radar',//symbol: 'none',areaStyle: {},label: {show: true,position: 'bottom',color: 'navajowhite'},//设置仪表盘位置lineStyle: {width: 1},emphasis: {areaStyle: {color: 'rgba(0,250,0,0.3)'}},data: [{value: [22, 100, 44, 100, 40]}]}};proportionChart2 = {color: colors,toolbox: {show: true,feature: {myTool2: {show: true,title: '刷新',icon: 'image://../../images/刷新.png',onclick: function () {MapPersonList4("false");}}}},title: {subtext: '票易通完结率：0\n\n服务台完结率：0\n\n总完结率：0',//top: 5,left: "3%",textStyle: {//文字颜色color: textcolor}},tooltip: {trigger: 'item'},radar: {center: ['50%', '55%'],//位置indicator: [{ text: '服务台', max: 100 },{ text: '关单量', max: 100 },{ text: '转单量', max: 100 },{ text: '响应量', max: 100 },{ text: '触碰量', max: 100 }]},series: {name: '工单汇总',type: 'radar',//symbol: 'none',areaStyle: {},label: {show: true,position: 'bottom',color: 'navajowhite'},//设置仪表盘位置lineStyle: {width: 1},emphasis: {areaStyle: {color: 'rgba(0,250,0,0.3)'}},data: [{value: [22, 33, 44, 100, 40]}]}};proportionChartInstantiation.setOption(proportionChart)proportionChartInstantiation2.setOption(proportionChart2)// 当浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function () {// 让图表调用 resize这个方法proportionChartInstantiation.resize();proportionChartInstantiation2.resize();});
};

有那个大神能帮忙解答一下，已经设置了echarts容器的宽度为100%，实际再打断点测试的时候在new Vue 中运行的时候是100px，但是页面加载完成后F12看容器是没有问题的是100%宽度。是在不知道哪里出问题了，可能是element 的走马灯初始化在echarts图初始化之前运行。但是不太清楚怎么调整了。请大神指导

已解决，记录一下。自己太笨了。

//雷达图的轮播图初始化var Carousel = new Vue({el: "#stairOne",data: {},mounted: function () {initMap();//获取容器对象var myChart = echarts.init(document.getElementById('Map-cal-proportionChart'));var myChart2 = echarts.init(document.getElementById('Map-cal-proportionChart2'));this.$nextTick(() => {//调用echarts的resize myChart.resize();myChart2.resize();})//var a = $("#stairOne").width() - 10;//$("#Map-cal-proportionChart").width(a);//$("#Map-cal-proportionChart2").width(a);}});

element ui+echarts实现走马灯相关推荐

Element UI学习6--Carousel 走马灯
轮播是前端页面运用的比较广泛的一个功能. 在有限空间内,循环播放同一类型的图片.文字等内容. 今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法. 1.基础用法 1.默认 ...
基于vue-router vuex+Element ui+echarts+axios +mysql的后台管理系统
目录前言一.使用HBuilderX新建项目二.安装依赖三.文件创建 1.引入插件 2.APP.vue文件 3.注册路由 4.Main.vue文件 5.侧边栏实现 6顶部导航条实现四.首页制作 ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C: ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...

element ui+echarts实现走马灯

这个是效果图，再不改变宽口大小的时候echats的图标是图一，改变窗口大小之后才会自适应。

HTML代码

js代码

initMap 初始化方法

已解决，记录一下。自己太笨了。

element ui+echarts实现走马灯相关推荐

最新文章

热门文章