羞愁 2022-01-27 11:39 采纳率: 100%
浏览 47
已结题

echarts自适应

实现echarts图表自适应


if (!this.echarts.analysisAmplificationChart) {
            document.getElementById('analysisAmplificationChart').style.width = (window.innerWidth * 0.48) + "px"  //初始化echarts图表宽度
            this.echarts.analysisAmplificationChart = echarts.init(document.getElementById('analysisAmplificationChart'), 'macarons', {
              renderer: "svg",
            })
            window.onresize = function () {
            twChart.resize();
        }
          }
          this.echarts.analysisAmplificationChart.setOption({
            tooltip: {
              trigger: 'item',
              axisPointer: {
              type: 'cross',
              label:{
              backgroundColor:'#6a7985'
            }
          },
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            // toolbox: {
            //   feature: {
            //     saveAsImage: {}
            //   }
            // },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            dataZoom: [
              {
                type:'slider', //图标下面的伸缩条
                show:true, // 是否显示
                realtime:true, // 拖动时更新视图  
                start:0, //滚动条 开始位置(0-100)
                end:100, //滚动条结束位置(0-100)
                height:10 //滚动条高度
               },
              {
                type: 'inside',
                orient: 'vertical',
                filterMode: 'none',
                start: 0,
                end: 100
              },
              {
                type: 'inside',
                orient: 'horizontal',
                filterMode: 'none',
                start: 0,
                end: 100
              }
            ],
            series: seriesData
          }, true)
  • 写回答

3条回答 默认 最新

  • 前端互助会 2022-01-27 13:56
    关注

    容器适应之外,echarts实例需要加个myCharts.resize()

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月18日
  • 已采纳回答 10月10日
  • 创建了问题 1月27日

悬赏问题

  • ¥15 onlyoffice编辑完后立即下载,下载的不是最新编辑的文档
  • ¥15 求caverdock使用教程
  • ¥15 Coze智能助手搭建过程中的问题请教
  • ¥15 12864只亮屏 不显示汉字
  • ¥20 三极管1000倍放大电路
  • ¥15 vscode报错如何解决
  • ¥15 前端vue CryptoJS Aes CBC加密后端java解密
  • ¥15 python随机森林对两个excel表格读取,shap报错
  • ¥15 基于STM32心率血氧监测(OLED显示)相关代码运行成功后烧录成功OLED显示屏不显示的原因是什么
  • ¥100 X轴为分离变量(因子变量),如何控制X轴每个分类变量的长度。