阅读 1245

echarts图表自适应屏幕大小

最近用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)',
						},
					},
				},
			],
		},
}
复制代码
文章分类
前端
文章标签