zoukankan      html  css  js  c++  java
  • 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();
        }
    };
  • 相关阅读:
    Linux:闪光的宝石,智慧 (在)
    采用jqueryUI创建日期选择器
    C++学习笔记9-运算符重载
    spring mvc综合easyui点击上面菜单栏中的菜单项问题
    TCP拥塞控制 (1)
    牛顿迭代法
    【6】和作为连续序列s
    动态规划-简介
    约瑟夫环问题
    j简单的递归
  • 原文地址:https://www.cnblogs.com/chuanqi1995/p/11392699.html
Copyright © 2011-2022 走看看