请问在vue框架下，如何调整echarts图表在移动端的位置？

Question

如图，将echarts图表在移动端模拟，是这样一片惨状，请问该如何修改呢？

<template>

  <div id="epidemicData" style="text-align: center">
    



        <div class="echartsPart" :style="{marginTop:'0px'}">
          <div class="form-title" style="margin-bottom:2vw">全国疫情新增趋势</div>
          <div id="todayChart" :style="{minWidth: '35vw',minHeight:'49vw'}"></div>
        </div>


        <div class="echartsPart" :style="{marginTop:'0px'}">
          <!--        <div class="form-title" style="margin-bottom:2vw">全国疫情新增趋势</div>-->
          <div id="totalChart" :style="{minWidth: '35vw',minHeight:'49vw'}"></div>
        </div>

        <div class="echartsPart" :style="{marginTop:'0px'}">
          <!--        <div class="form-title" style="margin-bottom:2vw">全国疫情新增趋势</div>-->
          <div id="totalHealAndDeadChart" :style="{minWidth: '35vw',minHeight:'49vw'}"></div>
        </div>


   





  </div>

</template>



<script>

import axios from 'axios'



const dangerousPlaceColumns = [

  {
    title: '城市（区）',
    key: 'name',
    dataIndex: 'name',

  },

  {
    title: '新增',
    key: 'today.confirm',
    dataIndex: 'today.confirm',
    scopedSlots: {customRender: 'today.confirm'},

  },

  {
    title: '现有确诊',
    key: 'total.nowConfirm',
    dataIndex: 'total.nowConfirm',
    // scopedSlots: {customRender: 'action'},
    // width: '40%',
  },



  {
    title: '区域风险',
    key: 'total.grade',
    dataIndex: 'total.grade',

  },

];


const provinceEpidemicDataColumns = [
  {
    title: '地区',
    key: 'name',
    dataIndex: 'name',

  },

  {
    title: '现有',
    key: 'total.nowConfirm',
    dataIndex: 'total.nowConfirm',
    slots:{title:'total.nowConfirm'},
    sorter: (a, b) => {
      return a.total.nowConfirm > b.total.nowConfirm? 1 : -1
    },

  },

  {
    title: '累计',
    key: 'total.confirm',
    dataIndex: 'total.confirm',
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.confirm > b.total.confirm? 1 : -1
    },

  },


  {
    title: '治愈',
    key: 'total.heal',
    dataIndex: 'total.heal',
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.heal > b.total.heal? 1 : -1
    },

  },

  {
    title: '死亡',
    key: 'total.dead',
    dataIndex: 'total.dead',
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.dead > b.total.dead? 1 : -1
    },

  },

];


export default {

  name: "index",
  data () {
    return{

      current: ['epidemicData'],

      dataPart:null,

      pagination: {
        pageSize:10,
        total: 0,
        current: 1,
        showTotal: total => `共${total}条`, // 显示总数
        onChange: page => {

          console.log('page', page);
          this.pagination.current = page
        }
      },

      pagination1: {
        pageSize:10,
        total: 0,
        current: 1,
        showTotal: total => `共${total}条`, // 显示总数
        onChange: page => {
          console.log('page', page);
          this.pagination1.current = page
        }
      },

      provinceEpidemicData: [],

      dangerousPlaceColumns,
      provinceEpidemicDataColumns,

      statisticalTimes:'',
      chinaTotal:{
        confirm:'',
        dead:'',
        heal:'',
        importedCase:'',
        localConfirm:'',
        localConfirmH5:'',
        local_acc_confirm:'',
        noInfect:'',
        noInfectH5:'',
        nowConfirm:'',
        nowSevere:'',
        showLocalConfirm:'',
        showlocalinfeciton:'',
        suspect:''
      },
      chinaAdd:{
        confirm:'',
        dead:'',
        heal:'',
        importedCase:'',
        localConfirm:'',
        localConfirmH5:'',
        noInfect:'',
        noInfectH5:'',
        nowConfirm:'',
        nowSevere:'',
        suspect:'',

      },
      dangerousPlace:[],
      epidemicDataWithTime:{
        date:'',
        todayConfirm:'',
        todaySuspect:'',
        totalConfirm:'',
        totalStoreConfirm:'',
        totalHeal:'',
        totalDead:''
      }

    }
  },


  mounted() {
    console.log("vdh")
    this.getStatistic()
    this.getDataWithTime()

  },
  methods: {
    onChange(a) {
      console.log(a);
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var todayChart = this.$echarts.init(document.getElementById('todayChart'));
      var totalChart=this.$echarts.init(document.getElementById('totalChart'))
      var totalHealAndDeadChart=this.$echarts.init(document.getElementById('totalHealAndDeadChart'))
      // 绘制图表
      todayChart.setOption({
        grid:{
          x:50,
          y:60,
          x2:40,
          y2:70,
          // borderWidth:10
        },
        // title为图表配置标题
        // title: {
        //   // text: '全国疫情新增趋势',
        //   x:'center',
        //   y:'top',
        //   textAlign:'left',
        // },

        // 配置提示信息
        tooltip: {
          trigger:'axis',

        },

        // tooltip: {},
        legend: {
          data: ['确诊','疑似'],

          x: 'right',
          y: 'top',
          textStyle:{
            fontSize:18
          },
        },
        // legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        // xAxis配置要在 X 轴显示的项
        // xAxis: {
        //   // data: ["1", "2", "3", "4", "5", "6"]
        //   data:this.epidemicDataWithTime.date
        // },
        // 配置要在 Y 轴显示的项。
        xAxis: {
          data: [],
          name: '日期',

          "axisLabel":{
            interval:5,
            rotate:45,
            // margin-top:12
          }
        },
        yAxis: {

        },

        series: [
          {
            name: '确诊',   //系列名称
            // type: 'bar',    //系列图表类型
            // // data:this.epidemicDataWithTime
            // data: [5, 20, 36, 10, 10, 20]   //系列中的数据内容

            type: 'line',
            data: [],
            smooth : true,

          },
          {
            name: '疑似',   //系列名称
            type: 'line',
            data: [],
            smooth : true,
            itemStyle: {
              normal: {
                color: 'rgb(255,214,103)'
              }
            }

          }

        ]
      });

      totalChart.setOption({
        grid:{
          x:50,
          y:60,
          x2:40,
          y2:70,
          // borderWidth:10
        },
        // title为图表配置标题
        // title: {
        //   // text: '全国疫情新增趋势',
        //   x:'center',
        //   y:'top',
        //   textAlign:'left',
        // },

        // 配置提示信息
        tooltip: {
          trigger:'axis',

        },

        // tooltip: {},
        legend: {
          data: ['累计确诊','现有确诊'],
          x: 'right',
          y: 'top',
          textStyle:{
            fontSize:18
          },
        },
        // legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        // xAxis配置要在 X 轴显示的项
        // xAxis: {
        //   // data: ["1", "2", "3", "4", "5", "6"]
        //   data:this.epidemicDataWithTime.date
        // },
        // 配置要在 Y 轴显示的项。
        xAxis: {
          data: [],
          name: '日期',

          "axisLabel":{
            interval:5,
            rotate:45,
            // margin-top:12
          }
        },
        yAxis: {

        },

        series: [
          {
            name: '累计确诊',   //系列名称
            // type: 'bar',    //系列图表类型
            // // data:this.epidemicDataWithTime
            // data: [5, 20, 36, 10, 10, 20]   //系列中的数据内容

            type: 'line',
            data: [],
            smooth : true,
            itemStyle: {
              normal: {
                color: 'rgb(163,29,19)'
              }
            }

          },
          {
            name: '现有确诊',   //系列名称
            type: 'line',
            data: [],
            smooth : true,
            itemStyle: {
              normal: {
                color: 'rgb(228,74,61)'
              }
            }

          }

        ]
      });

      totalHealAndDeadChart.setOption({
        grid:{
          x:50,
          y:60,
          x2:40,
          y2:70,
          // borderWidth:10
        },
        // title为图表配置标题
        // title: {
        //   // text: '全国疫情新增趋势',
        //   x:'center',
        //   y:'top',
        //   textAlign:'left',
        // },

        // 配置提示信息
        tooltip: {
          trigger:'axis',

        },

        // tooltip: {},
        legend: {
          data: ['累计治愈','累计死亡'],
          x: 'right',
          y: 'top',
          textStyle:{
            fontSize:18
          },
        },
        // legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        // xAxis配置要在 X 轴显示的项
        // xAxis: {
        //   // data: ["1", "2", "3", "4", "5", "6"]
        //   data:this.epidemicDataWithTime.date
        // },
        // 配置要在 Y 轴显示的项。
        xAxis: {
          data: [],
          name: '日期',

          "axisLabel":{
            interval:5,
            rotate:45,
            // margin-top:12
          }
        },
        yAxis: {

        },

        series: [
          {
            name: '累计治愈',   //系列名称
            // type: 'bar',    //系列图表类型
            // // data:this.epidemicDataWithTime
            // data: [5, 20, 36, 10, 10, 20]   //系列中的数据内容

            type: 'line',
            data: [],
            smooth : true,
            itemStyle: {
              normal: {
                color: 'rgb(88,169,122)'
              }
            }


          },
          {
            name: '累计死亡',   //系列名称
            type: 'line',
            data: [],
            smooth : true,
            itemStyle: {
              normal: {

                color: 'rgb(130,130,130)'
              }
            }

          }

        ]
      });



      //显示加载动画
      todayChart.showLoading();
      totalChart.showLoading();
      totalHealAndDeadChart.showLoading();

      setTimeout(()=>{  //为了让加载动画效果明显,这里加入了setTimeout,实现300ms延时
        todayChart.hideLoading(); //隐藏加载动画
        totalChart.hideLoading();
        totalHealAndDeadChart.hideLoading();

        todayChart.setOption({
          xAxis: {
            data: this.epidemicDataWithTime.date
          },
          series: [
            {
              data: this.epidemicDataWithTime.todayConfirm
            },
            {
              data:this.epidemicDataWithTime.todaySuspect
            }
          ]
        })

        totalChart.setOption({
          xAxis: {
            data: this.epidemicDataWithTime.date
          },
          series: [
            {
              data: this.epidemicDataWithTime.totalConfirm
            },
            {
              data:this.epidemicDataWithTime.totalStoreConfirm
            }
          ]
        })

        totalHealAndDeadChart.setOption({
          xAxis: {
            data: this.epidemicDataWithTime.date
          },
          series: [
            {
              data: this.epidemicDataWithTime.totalHeal
            },
            {
              data:this.epidemicDataWithTime.totalDead
            }
          ]
        })

        window.onresize = function () {
          todayChart.resize();
          totalChart.resize();
          totalHealAndDeadChart.resize()
        }
      }, 300 )
    },


    getDataWithTime(){
      console.log("去获取随时间变化的疫情数据")
      axios('/proxy1/ug/api/wuhan/app/data/list-total').then(({data})=>{
        var dataset=data.data.chinaDayList
        console.log("dataset:",dataset)

        const date=[];
        const todayConfirm=[];
        const todaySuspect=[];
        const totalConfirm=[];
        const totalStoreConfirm=[];
        const totalDead=[];
        const totalHeal=[];
        for(let i=0;i<dataset.length;i++){
          date.push(dataset[i].date)
          todayConfirm.push(dataset[i].today.confirm)
          todaySuspect.push(dataset[i].today.suspect)
          totalConfirm.push(dataset[i].total.confirm)
          totalStoreConfirm.push(dataset[i].total.storeConfirm)
          totalDead.push(dataset[i].total.dead)
          totalHeal.push(dataset[i].total.heal)
        }
        console.log("date:",date)
        this.epidemicDataWithTime.date=date
        console.log("新增确诊todayConfirm:",todayConfirm)
        this.epidemicDataWithTime.todayConfirm=todayConfirm
        console.log("新增疑似todaysuspect:",todaySuspect)
        this.epidemicDataWithTime.todaySuspect=todaySuspect
        console.log("累计的确诊totalConfirm:",totalConfirm)
        this.epidemicDataWithTime.totalConfirm=totalConfirm
        console.log("现有确诊totalStoreConfirm:",totalStoreConfirm)
        this.epidemicDataWithTime.totalStoreConfirm=totalStoreConfirm
        console.log("累计治愈totalHeal:",totalHeal)
        this.epidemicDataWithTime.totalHeal=totalHeal
        console.log("累计死亡：",totalDead)
        this.epidemicDataWithTime.totalDead=totalDead


        this.drawLine()


      })
    },


    toKnowledge(){

      console.log("跳转到防疫须知组件")
      this.dataPart=false
      console.log("this.dataPart:",this.dataPart)

    },

    toDataPart(){
      console.log("跳转到数据部分组件")
      this.dataPart=null
      console.log("this.dataPart:",this.dataPart)
      this.getDataWithTime()

    },

    getStatistic() {
      console.log("去获取疫情数据")
      axios('/proxy/g2/getOnsInfo?name=disease_h5').then(({data}) => {
        var dataset = eval('(' + data.data + ')');
        console.log("获取到的疫情数据：", dataset)
        this.statisticalTimes = dataset.lastUpdateTime
        console.log("截止日期：", this.statisticalTimes)

        // 获取当前系统时间算间隔
        console.log("国内疫情数据：", dataset.chinaTotal)
        this.chinaTotal = dataset.chinaTotal
        console.log("较上日变化的数据", dataset.chinaAdd)
        this.chinaAdd = dataset.chinaAdd

        const temp = [];
        // console.log("中国所有城市列表的长度：",dataset.areaTree[0].children.length)
        // console.log("某城市所有区域列表的长度",dataset.areaTree[0].children[4].children.length)

        for (let i = 0; i < dataset.areaTree[0].children.length; i++) {

          const index = dataset.areaTree[0].children[i]

          for (let j = 0; j < index.children.length; j++) {
            if (index.children[j].name !== "境外输入") {
              // console.log("index.children[j]:",index.children[j].name)
              if (index.children[j].total.grade !== undefined && index.children[j].total.nowConfirm !== 0) {

                // console.log("是否有风险等级：",index.children[j].total.grade)
                temp.push(index.children[j])
                // console.log("temp:",temp)
              }
            }

          }
        }

        this.dangerousPlace = temp.sort((a, b) => b.today.confirm - a.today.confirm)
        console.log("近期31省市区本土病例：", this.dangerousPlace)

        // 新增那一列用插槽，找出所有列表中今天有新增的，用插槽放


        const temp1=[];

        for (let i = 0; i < dataset.areaTree[0].children.length; i++) {

          const index1 = dataset.areaTree[0].children[i]


          temp1.push(index1)


        }

        this.provinceEpidemicData=temp1

        console.log("国内疫情表:",this.provinceEpidemicData)

      })


    }

  }
}
</script>

以上为vue项目文件
以下为vue.config.js文件

const vueConfig = {
    lintOnSave: false,
    devServer: {
        // development server port 8000
        port: 8000,

        proxy: {
            "/proxy/": {//以/proxy/为开头的适合这个规则
                target:"https://view.inews.qq.com",
                // target: "https://interface.sina.cn",//目标地址
                "secure": true,//false为http访问，true为https访问
                "changeOrigin": true,//跨域访问设置，true代表跨域
                "pathRewrite": {//路径改写规则
                    "^/proxy": ""//以/proxy/为开头的改写为''
                    //下面这种也行
                    //  "^/api":"/list"//以/api/为开头的改写为'/list'
                },
                // "headers": {//设置请求头伪装成手机端的访问
                //     "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36"
                // }
            },

            "/proxy1/": {//以/proxy/为开头的适合这个规则
                target:"https://c.m.163.com",
                // target: "https://interface.sina.cn",//目标地址
                "secure": true,//false为http访问，true为https访问
                "changeOrigin": true,//跨域访问设置，true代表跨域
                "pathRewrite": {//路径改写规则
                    "^/proxy1": ""//以/proxy/为开头的改写为''
                    //下面这种也行
                    //  "^/api":"/list"//以/api/为开头的改写为'/list'
                },
                // "headers": {//设置请求头伪装成手机端的访问
                //     "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36"
                // }
            },
        }
    }
}
module.exports = vueConfig

Answer 1

echars或者heightchars都是生成图片插件的一种方式，你只需要将装插件的位置移动，插件的位置也会移动