解决easyUI和echarts集成echarts图表不能自适应高宽的问题

最新推荐文章于 2024-07-16 22:31:12 发布

Capture-Moment

最新推荐文章于 2024-07-16 22:31:12 发布

阅读量5.5k

点赞数 2

分类专栏： web前端文章标签： easyui echarts

本文链接：https://blog.csdn.net/jianluchen/article/details/53360044

版权

解决easyUI和echarts集成echarts图表不能自适应高宽的问题

easyui版本：1.5，echarts无特殊要求

以jquery.panel.js文件（即panel）为基础，复制一份修改名称为jquery.echarts.js，将所有 $.fn.panel修改为$ .fn.echarts，主要是为了不影响panel本身的架构。
在jquery.echarts.js第function _3(_4, _5)方法的最后一行加入

if(_7.echartsOption){
    if(_7.theme){
        _4.echarts = echarts.init(_4,_7.theme).setOption(_7.echartsOption, true);
    }else{
        _4.echarts = echarts.init(_4).setOption(_7.echartsOption, true);
    }
}

注意这里的_7.theme和_7.echartsOption分别接收echarts的主题和常规配置项，下面会用到，保存此文件即可。
3. 测试
jsp文件：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="scripts/jquery-easyui-1.5/themes/ui-dark-hive/easyui.css">
<link rel="stylesheet" type="text/css" href="scripts/jquery-easyui-1.5/themes/icon.css">
<script type="text/javascript" src="scripts/jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="scripts/jquery.echarts.js"></script>
<script type="text/javascript" src="scripts/echarts/echarts-all.js"></script>
<script type="text/javascript" src="scripts/echarts/esl.js"></script>
<script type="text/javascript" src="scripts/echarts/theme/dark.js"></script>

<style type="text/css">
    html,body{
    width:100%;height: 100%}
    *{
    margin:0;padding:0}
</style>
</head>
<body class="easyui-layout">
    <div data-options="region:'north'" style="height:50px"></div>
     <div data-options="region:'south',split:true" style="height:50px;"></div>
     <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
     <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
     <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="padding:0;margin:0;overflow: hidden;">
         <div id="main" style="width:100%;height:100%;margin:0;padding:0;overflow: hidden;"></div>
     </div>
     <script>
        $(function(){
    
            $('#main').echarts({
                theme:theme,
                echartsOption:{
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['邮件营销','联盟广告','直接访问','搜索引擎']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            splitArea : {show : true}
                        }
                    ],
                    series : [
                        {
                            name:'邮件营销',
                            type:'line',
                            stack: '总量',
                            symbol: 'none',
                            itemStyle: {
                                normal: {
                                    areaStyle: {

                                    }
                                }
                            },
                            data:[
                                120, 132, 301, 134, 
                                {value:90, symbol:'droplet',symbolSize:5},
                                230, 210
                            ]
                        },
                        {
                            name:'联盟广告',
                            type:'line',
                            stack: '总量',
                            smooth: true,
                            symbolSize: 8,
                            data:[
                                120, 82,
                                {
                                    value:201,
                                    symbol: 'star',  // 数据级个性化拐点图形
                                    symbolSize : 15,
                                    itemStyle : { normal: {label : {
                                        show: true,
                                        textStyle : {
                                            fontSize : '20',
                                            fontFamily : '微软雅黑',
                                            fontWeight : 'bold'
                                        }
                                    }}}
                                },
                                {
                                    value:134,
                                    symbol: 'none'
                                },
                                190, 
                                {
                                    value : 230,
                                    symbol: 'emptypin',
                                    symbolSize: 8
                                },
                                110
                            ]
                        },
                        {
                            name:'直接访问',
                            type:'line',
                            stack: '总量',
                            symbol: 'arrow',
                            symbolSize: 6,
                            symbolRotate: -45,
                            itemStyle: {
                                normal: {
                                    color: 'red',
                                    lineStyle: {        // 系列级个性化折线样式
                                        width: 2,
                                        type: 'dashed'
                                    }
                                },
                                emphasis: {
                                    color: 'blue'
                                }
                            },
                            data:[
                                320, 332, '-', 334,
                                {
                                    value: 390,
                                    symbol: 'star6',
                                    symbolSize : 20,
                                    symbolRotate : 10,
                                    itemStyle: {        // 数据级个性化折线样式
                                        normal: {
                                            color: 'yellowgreen'
                                        },
                                        emphasis: {
                                            color: