• 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();
        }
    };
  • 相关阅读:
    p1373【奶牛的卧室】
    p1248【交错匹配】(DP)
    QBXT模拟赛T3
    NOIP冲刺班的考试总结
    欧拉回路的一些东西
    一道dp题目
    Blocks
    玩具取名
    Y的积木
    游荡的奶牛
  • 原文地址:https://www.cnblogs.com/chuanqi1995/p/11392699.html
Copyright © 2020-2023  润新知