码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts中窗口自适应

时间:2019-08-22 11:22:41      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:echarts   category   lse   contain   val   销售   orm   char   tooltip   

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

 

Echarts中窗口自适应

标签:echarts   category   lse   contain   val   销售   orm   char   tooltip   

原文地址:https://www.cnblogs.com/chuanqi1995/p/11392699.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!