Echarts中窗口自适应

在JavaScript中加入：

/*窗口自适应，关键代码*/
window.onresize = function() {
    if ($('#echarts14').length > 0) {
        myChart14.resize();
    }
};

 

1.Html

<div>
    <div id="echarts14"></div>
</div>

2.JavaScript

var myChart14;
if ($('#echarts14').length > 0) {
    myChart14 = echarts.init(document.getElementById('echarts14'));
}
/* 第14个图表的配置--销售额同比图 --柱状图*/
var option14 = {
    title: [{
        text: '销售额同比图',
        left: 'left',
        textStyle: {
            color: '#4c4c4c',
            fontWeight: "bold",
            fontSize: 14,
        },
    }, {
        text: '单位：(元)',
        left: 'right',
        textStyle: {
            color: '#929292',
            fontWeight: "normal",
            fontSize: 12,
        },
    }],
    color: ['#01b8aa', '#FFB581'],
    legend: {
        data: ['2018年05月_同期', '2019年05月_本期'],
        bottom: 0
    },
    toolbox: {
        show: true, //是否显示工具箱
        right: 70,
        top: -8,
        //要显示的工具箱内容
        feature: {
            saveAsImage: { //保存为图片
                show: true
            },
        }
    },
    grid: {
        top: '30',
        left: '1%',
        right: '1%',
        bottom: '40',
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        data: ['总额', '汽油', '柴油'],
        axisTick: {
            show: false,
        },
        axisLabel: {
            interval: 0
        },
    },
    yAxis: {
        axisTick: {
            show: false,
        }
    },
    series: [{
            type: 'bar',
            barWidth: '10%',
            barGap: '80%',
            /*多个并排柱子设置柱子之间的间距*/
            name: '2018年05月_同期',
            data: [1203.29, 2489.34, 2904.7],
        },
        {
            type: 'bar',
            barWidth: '10%',
            name: '2019年05月_本期',
            data: [1303.29, 2489.33, 3904.7],
        }
    ]
};
myChart14 && myChart14.setOption(option14, true);
/*窗口自适应，关键代码*/
window.onresize = function() {
    if ($('#echarts14').length > 0) {
        myChart14.resize();
    }
};