HTML5移动框架】在vue框架下,如何调整echarts图表在移动端的位置?

2022-03-15 16:11发布

5条回答
靓猴一枚
2楼 · 2022-03-17 09:55

内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。
如果是想调整图表与div间上下左右留白,则设置grid属性就可以。


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

不吃鱼的猫
4楼 · 2022-03-23 09:30

可以通过调整div的属性来设置

三岁奶猫
5楼 · 2022-03-24 09:38

内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以了

如果是想调整图表与div间上下左右留白,则设置grid属性就可以了


722
6楼 · 2022-03-29 09:35

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

[removed]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            }          ]        })        [removed] = 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 {        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)      })    }  }}[removed]

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

  1. const vueConfig = {

  2. lintOnSave: false,

  3. devServer: {

  4. // development server port 8000

  5. port: 8000,

  6. proxy: {

  7. "/proxy/": {///proxy/为开头的适合这个规则

  8. target:"https://view.inews.qq.com",

  9. // target: "https://interface.sina.cn",//目标地址

  10. "secure": true,//false为http访问,true为https访问

  11. "changeOrigin": true,//跨域访问设置,true代表跨域

  12. "pathRewrite": {//路径改写规则

  13. "^/proxy": ""///proxy/为开头的改写为''

  14. //下面这种也行

  15. //  "^/api":"/list"///api/为开头的改写为'/list'

  16. },

  17. // "headers": {//设置请求头伪装成手机端的访问

  18. //     "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"

  19. // }

  20. },

  21. "/proxy1/": {///proxy/为开头的适合这个规则

  22. target:"https://c.m.163.com",

  23. // target: "https://interface.sina.cn",//目标地址

  24. "secure": true,//false为http访问,true为https访问

  25. "changeOrigin": true,//跨域访问设置,true代表跨域

  26. "pathRewrite": {//路径改写规则

  27. "^/proxy1": ""///proxy/为开头的改写为''

  28. //下面这种也行

  29. //  "^/api":"/list"///api/为开头的改写为'/list'

  30. },

  31. // "headers": {//设置请求头伪装成手机端的访问

  32. //     "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"

  33. // }

  34. },

  35. }

  36. }

  37. }

  38. module.exports = vueConfig

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


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



    1. const vueConfig = {

    2. lintOnSave: false,

    3. devServer: {

    4. // development server port 8000

    5. port: 8000,


    6. proxy: {

    7. "/proxy/": {///proxy/为开头的适合这个规则

    8. target:"https://view.inews.qq.com",

    9. // target: "https://interface.sina.cn",//目标地址

    10. "secure": true,//false为http访问,true为https访问

    11. "changeOrigin": true,//跨域访问设置,true代表跨域

    12. "pathRewrite": {//路径改写规则

    13. "^/proxy": ""///proxy/为开头的改写为''

    14. //下面这种也行

    15. //  "^/api":"/list"///api/为开头的改写为'/list'

    16. },

    17. // "headers": {//设置请求头伪装成手机端的访问

    18. //     "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"

    19. // }

    20. },


    21. "/proxy1/": {///proxy/为开头的适合这个规则

    22. target:"https://c.m.163.com",

    23. // target: "https://interface.sina.cn",//目标地址

    24. "secure": true,//false为http访问,true为https访问

    25. "changeOrigin": true,//跨域访问设置,true代表跨域

    26. "pathRewrite": {//路径改写规则

    27. "^/proxy1": ""///proxy/为开头的改写为''

    28. //下面这种也行

    29. //  "^/api":"/list"///api/为开头的改写为'/list'

    30. },

    31. // "headers": {//设置请求头伪装成手机端的访问

    32. //     "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"

    33. // }

    34. },

    35. }

    36. }

    37. }

    38. module.exports = vueConfig