vue框架，多个echart图表同时resize()
<script>
var app = new Vue({
el: '#app',
data: {
charts: [],//直接定义一个数组，存放初始化后的图标
},
computed: {},
watch: {},
beforeCreate () { },
created () { },
mounted () {
this.getUrlData()
this.setChart()
window.addEventListener('resize', function () {//监听页面变化，循环resize（），data下charts里的图表实例
for (let item of this.app.charts) {
item.resize()
}
})
},
destroyed () {
window.removeEventListener('resize', function () { //移除监听
for (let item of this.app.charts) {
item.resize()
}
})
},
methods: {
getUrlData () {
var mySwiper = new Swiper('#app', {
// speed: 300,
// autoplay: {
// delay: 2000
// },
// loop: true, // 循环模式选项
})
//获取后台重定向过来的url的参数
// this.agentcode = this.getQueryVariable('agentcode')
},
//获取后台通过url传过来的参数，要那个参数就在getQueryVariable("这里填上参数键");
getQueryVariable (variable) {
var query = window.location.search.substring(1)
var vars = query.split('&')
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=')
if (pair[0] == variable) {
return pair[1]
}
}
return false
},
setChart () {
const chart2Option = {
color: [{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#070250' // 0% 处的颜色
}, {
offset: 1, color: '#1FD7FA' // 100% 处的颜色
}],
}, {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#070250' // 0% 处的颜色 070250
}, {
offset: 1, color: '#444FDE' // 100% 处的颜色 444FDE
}],
}],
textStyle: {
color: '#fff',
fontWeight: 'bold',
},
legend: {
show: false,
},
grid: {
show: false,
left: '0',
top: '0',
right: '0',
bottom: '45',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
return params[0].name + ': ' + params[0].value;
}
},
xAxis: {
data: ['山东', '内蒙古', '四川', '江苏', '陕西', '河南', '安徽', '云南', '北京', '广东', '河北', '青岛', '深圳'],
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: '#fff',
interval: 0,
fontWeight: 'lighter',
// fontSize: 10,
formatter: function (val) {
return val.split('').join('\n')
},
}
},
yAxis: {
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false }
},
series: [
{
name: '标保',
type: 'bar',
data: [158, 203, 172, 158, 203, 172, 158, 203, 172, 158, 203, 172, 333],
barGap: '0',
label: {
show: true,
position: "top",
fontWeight: "bold",
color: '#fff',
formatter: '{c}',
},
colorBy: 'data',
barWidth: '10',
},
]
};
this.initChart('chart2', chart2Option)
const chart3Option = {
textStyle: {
color: '#fff',
fontWeight: 'bold',
},
legend: {
show: false
},
grid: {
show: false,
left: '25',
top: '0',
right: '20',
bottom: '20',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
return params[0].name + ': ' + params[0].value;
}
},
xAxis: {
data: ['2018年', '2019年', '2020年', '2021年', '2022年',],
axisTick: { show: true },
axisLine: { show: true },
axisLabel: {
color: '#fff'
}
},
yAxis: {
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false }
},
color: ['#6911CC', '#7C34AD', '#90588D', '#A37B6F', '#BAA462'],
series: [
{
name: '山峰柱状图',
type: 'pictorialBar',
barCategoryGap: '-130%',
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
opacity: 0.8,
},
data: [158, 203, 172, 159, 40],
colorBy: 'data',
label: {
show: true,
position: "top",
fontWeight: "bold",
color: '#fff',
formatter: '{c}亿',
}
},
]
};
this.initChart('chart3', chart3Option)
},
initChart (id, option) {
let chartDom = document.getElementById(id);
let initChartDom = echarts.init(chartDom)
option && initChartDom.setOption(option)
this.charts.push(initChartDom)//把初始化后的图表存进data的charts里
},
getAgentInfoByCode () {
const url = 'http://gddatainfo.hualife.cc/gdAdmin/operVisit/getAgentInfoByCode'
const params = {
agentcode: this.agentcode,
}
const self = this
const success = function (response) {
console.log(response)
if (response.status == 200) {
const agentDesc = response.data.data.agentDesc //用热情服务每一位客户,用真诚守护每一位客户
} else {
console.log('出错了，状态码：' + response.status)
}
}
this.Http(url, params, success)
},
//axios请求数据封装
Http (url, param, success) {
vant.Toast.loading({
duration: 0, // 持续展示 toast
overlay: true,
forbidClick: true,
message: '正在加载...',
loadingType: 'spinner',
})
const paramdata = Qs.stringify(param)
axios({
url: url,
method: 'post',
data: paramdata,
})
.then(function (response) {
if (response.data.status == 200) {
success(response)
console.log('请求成功')
} else {
vant.Toast.fail('服务器出错')
console.log('服务器出错')
}
})
.catch(function (error) {
vant.Toast.fail('请检查网络')
console.log(error)
})
},
},
})
</script>
