2022-03-15 16:11发布
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
echars或者heightchars都是生成图片插件的一种方式,你只需要将装插件的位置移动
可以通过调整div的属性来设置
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以了
如果是想调整图表与div间上下左右留白,则设置grid属性就可以了
如图,将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文件
const vueConfig = {lintOnSave: false,devServer: {// development server port 8000port: 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如图,将echarts图表在移动端模拟,是这样一片惨状,请问该如何修改呢?以上为vue项目文件以下为vue.config.js文件const vueConfig = {lintOnSave: false,devServer: {// development server port 8000port: 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<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 id="totalChart" :style="{minWidth: '35vw',minHeight:'49vw'}">div>div><div class="echartsPart" :style="{marginTop:'0px'}"><div id="totalHealAndDeadChart" :style="{minWidth: '35vw',minHeight:'49vw'}">div>div>div></template>[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 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>0].children.length; i++) { const index = dataset.areaTree[0].children[i]for (let j = 0; j < index>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>0].children.length; i++) { const index1 = dataset.areaTree[0].children[i] temp1.push(index1) } this.provinceEpidemicData=temp1 console.log("国内疫情表:",this.provinceEpidemicData) }) } }}[removed]
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",
"^/proxy1": ""//以/proxy/为开头的改写为''
}
module.exports = vueConfig
<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 id="totalChart" :style="{minWidth: '35vw',minHeight:'49vw'}">div>
<div id="totalHealAndDeadChart" :style="{minWidth: '35vw',minHeight:'49vw'}">div>
</template>
[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: '地区',
title: '现有',
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', // 默认上到下为由大到小的顺序
return a.total.confirm > b.total.confirm? 1 : -1
title: '治愈',
key: 'total.heal',
dataIndex: 'total.heal',
return a.total.heal > b.total.heal? 1 : -1
title: '死亡',
key: 'total.dead',
dataIndex: 'total.dead',
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: {
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:{
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',
smooth : true,
name: '疑似', //系列名称
itemStyle: {
normal: {
color: 'rgb(255,214,103)'
]
});
totalChart.setOption({
data: ['累计确诊','现有确诊'],
name: '累计确诊', //系列名称
color: 'rgb(163,29,19)'
name: '现有确诊', //系列名称
color: 'rgb(228,74,61)'
totalHealAndDeadChart.setOption({
data: ['累计治愈','累计死亡'],
name: '累计治愈', //系列名称
color: 'rgb(88,169,122)'
name: '累计死亡', //系列名称
color: 'rgb(130,130,130)'
//显示加载动画
todayChart.showLoading();
totalChart.showLoading();
totalHealAndDeadChart.showLoading();
setTimeout(()=>{ //为了让加载动画效果明显,这里加入了setTimeout,实现300ms延时
todayChart.hideLoading(); //隐藏加载动画
totalChart.hideLoading();
totalHealAndDeadChart.hideLoading();
data: this.epidemicDataWithTime.date
data: this.epidemicDataWithTime.todayConfirm
data:this.epidemicDataWithTime.todaySuspect
})
data: this.epidemicDataWithTime.totalConfirm
data:this.epidemicDataWithTime.totalStoreConfirm
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
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
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>0].children.length; i++) {
const index = dataset.areaTree[0].children[i]
for (let j = 0; j < index>
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=[];
const index1 = dataset.areaTree[0].children[i]
temp1.push(index1)
this.provinceEpidemicData=temp1
console.log("国内疫情表:",this.provinceEpidemicData)
HTML5 + CSS + JavaScript 开发 跨平台重用代码
采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。
iView UI、ioni、SUI
jQTouch
如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app(对应vue语法)taro(对应react) 或者纯原生 这个没有限制的,自己怎么舒服怎么来
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
1. 原生。直接告诉你,开发太慢,不能跨平台,先不要学。2. 使用WebView的hybrid app,Cordova/ionic 这些。就是用浏览器运行html,js,css仿app,我用了好几年,学习快,开发块,跨平台。问题是每个安卓版本/苹果版本/浏览器版本运行效果不一致,有些版本还运...
常用的移动APP开发框架:1、框架:PhoneGapPhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。优点:可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。 提供硬件访问控...
1. LungoJS 这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需...
手机移动端响应式动画弹窗提示框插件xwPop,原生JS实现,带CSS3动画效果,丰富的JS弹出框提示信息插件,支持基本信息提示、带图标loading信息提示、confirm提示、自定义信息提示图标,仿Ios信息提示,支持较现代的浏览器。在没有压缩的情况下,代码大小只有6K...
快速搭建自适应网站:http://www.iisp.com/design/?s=yuqiuping
最多设置5个标签!
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。
如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
echars或者heightchars都是生成图片插件的一种方式,你只需要将装插件的位置移动
可以通过调整div的属性来设置
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以了
如果是想调整图表与div间上下左右留白,则设置grid属性就可以了
如图,将echarts图表在移动端模拟,是这样一片惨状,请问该如何修改呢?
以上为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
如图,将echarts图表在移动端模拟,是这样一片惨状,请问该如何修改呢?
以上为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
<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 id="totalChart" :style="{minWidth: '35vw',minHeight:'49vw'}">div>
div>
<div class="echartsPart" :style="{marginTop:'0px'}">
<div id="totalHealAndDeadChart" :style="{minWidth: '35vw',minHeight:'49vw'}">div>
div>
div>
</template>
[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
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>0].children.length; i++) {
const index = dataset.areaTree[0].children[i]
for (let j = 0; j < index>
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>0].children.length; i++) {
const index1 = dataset.areaTree[0].children[i]
temp1.push(index1)
}
this.provinceEpidemicData=temp1
console.log("国内疫情表:",this.provinceEpidemicData)
})
}
}
}
[removed]
相关问题推荐
HTML5 + CSS + JavaScript 开发 跨平台重用代码
采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。
iView UI、ioni、SUI
jQTouch
如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app(对应vue语法)taro(对应react) 或者纯原生 这个没有限制的,自己怎么舒服怎么来
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
1. 原生。直接告诉你,开发太慢,不能跨平台,先不要学。2. 使用WebView的hybrid app,Cordova/ionic 这些。就是用浏览器运行html,js,css仿app,我用了好几年,学习快,开发块,跨平台。问题是每个安卓版本/苹果版本/浏览器版本运行效果不一致,有些版本还运...
常用的移动APP开发框架:1、框架:PhoneGapPhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。优点:可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。 提供硬件访问控...
1. LungoJS 这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需...
手机移动端响应式动画弹窗提示框插件xwPop,原生JS实现,带CSS3动画效果,丰富的JS弹出框提示信息插件,支持基本信息提示、带图标loading信息提示、confirm提示、自定义信息提示图标,仿Ios信息提示,支持较现代的浏览器。在没有压缩的情况下,代码大小只有6K...
快速搭建自适应网站:http://www.iisp.com/design/?s=yuqiuping