最近用vue画echarts表图时,发现从笔记本拖到显示器时,表格的大小没有发生改变,不能自适应屏幕的分辨率,不符合需求,解决方法:
created() {
this.init()
this.$nextTick(() => {
//初始化echarts实例
this.myChart = echarts.init(document.getElementById('main'))
// 使用数据显示图表
this.myChart.setOption(this.option)
})
},
// 需要注意的是当浏览器窗口大小变化时候,执行window.onresize里面的代码
mounted(){
let _this=this;
window.onresize =() =>{
return (()=>{
_this.myChart.resize();
})()
}
},
data中图表的配置参数,根据自己的需求设置:
data() {
return {
myChart: null,
option: {
tooltip: {
trigger: 'axis',
},
legend: {
data: ['剩余库存', '库存使用率'],
},
xAxis: [
{
type: 'category',
// 日期
data: [],
},
],
yAxis: [
{
type: 'value',
name: '库存量',
interval: 10000,
axisLabel: {
formatter: '{value} CPM',
},
},
{
type: 'value',
name: '使用率',
interval: 25,
axisLabel: {
formatter: '{value} %',
},
},
],
series: [
{
name: '剩余库存',
type: 'bar',
data: [], //剩余库存
itemStyle: {
normal: {
color: '#ff9524',
},
},
},
{
name: '库存使用率',
type: 'line',
yAxisIndex: 1,
data: [], // 使用率
itemStyle: {
normal: {
color: 'rgba(249,18,8,0.98)',
},
},
},
],
},
}