Echarts中窗口自适应

Posted 2022-08-13 chuanqi1995

在js中加入：

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

 

1.html

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

2.js

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();
    
;