|
 如图，将echarts图表在移动端模拟，是这样一片惨状，请问该如何修改呢？
全国疫情新增趋势
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 {
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)
})
}
}
}
以上为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
|