echarts根据页面自适应

大湿骑码

已于 2022-09-07 17:32:52 修改

阅读量273

点赞数

分类专栏： vue js echarts 文章标签： echarts javascript 前端

于 2022-09-07 17:25:28 首次发布

本文链接：https://blog.csdn.net/yqlnihao/article/details/126750290

版权

js 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

vue

30 篇文章 1 订阅

订阅专栏

echarts

5 篇文章 0 订阅

订阅专栏

![在这里插入图片描述](https://img-blog.csdnimg.cn/bd922460105241a686d802af4b553bdb.png)
   <div class="ordernum" id="ordernum" ref="barChart" v-resize="elResize"></div>
elResize(){
    this.barchart && this.barChart.resize()
 },
var that = this
      this.$nextTick(()=>{
           var chart =echarts.init(document.getElementById("ordernum"));//获取dom
           var option = {
               title: {
                  text: '标题'
              },
               // legend: {
               //      bottom:0,
               //  },
               tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                  type: 'value',
                  min: '自定义最小值',
                  max: '自定义最大值',
                },
                series: [
                  {
                    name: '订单数量',
                    data: that.y_data,
                    type: 'line'
                  }
                ]
              };
               chart.setOption(option);
               window.addEventListener("resize", () => {//echarts根据页面自适应
                  chart.resize();
                });
      })