echarts图表变形解决方案

首页 > 代码库 > echarts图表变形解决方案

2024-10-02 03:31:40 219人阅读

在同一页面的多个echarts图在查询或切换图片时可能会变形，如图

技术分享

解决方案是添加以下几行代码

/*在查询或切换统计图时图片有可能会变形，于是每次调getEchartsData()都给每个chart的宽度定义成初始值*/
    $("#myChart2").css( ‘width‘, $("#myChart2").width());
    $("#myChart3").css( ‘width‘, $("#myChart3").width());
    $("#myChart4").css( ‘width‘, $("#myChart4").width());

解决后的图片

技术分享

代码

<head>
<title>学习时间记录统计</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script    src="http://www.mamicode.com/echarts/echarts.js" type="text/javascript"></script>
<script    src="http://www.mamicode.com/jquery/jquery-2.1.3.min.js" type="text/javascript"></script>
<style type="text/css">
h2 {
    width: 100%;
    height: 18px;
}
    
h2 span {
    width: 220px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    float: left;
    font-size: 0.7em;
    font-family:楷体;
    font-weight: normal;
    cursor: pointer;
    background-color: #dddddd;
    border:2px solid green;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

#tab .tab {
    color: white;
    background-color: brown;
    font-weight: bold;
    cursor: auto;
}
</style>
</head>
<body>
     <div id="this_page">
         <h2 id="tab">
            <span id="s1" class="tab">饼图</span> 
            <span id="s2">折线图or柱状图</span>
            <span id="s3">地图</span>
            <span id="s4">仪表图</span>
        </h2><br>
        <div id="ct1">
             <div id="myChart1" style="height:300px;width:100%;"></div><br><br>
        </div>
        <div id="ct2">
            <div id="myChart2" style="height:300px;width:100%;"></div><br><br>
        </div>
        <div id="ct3">
            <div id="myChart3" style="height:500px;width:100%;"></div><br><br>
        </div>
        <div id="ct4">
            <div id="myChart4" style="height:300px;width:100%;"></div>    
        </div>
     </div>
</body>

<script type="text/javascript">
 window.onload=function(){
    getEchartsData();
    changetab();
    $("#ct1").show();
    $("#ct2").hide();
    $("#ct3").hide();
    $("#ct4").hide();
 }

 function changetab() {
        //选中要显示的页面数据 
        var tabs = document.getElementById("tab").getElementsByTagName("span");
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].onclick = tab;
        }
    }

    function tab() {
        if("s1" == this.id) {
            $("#ct1").show();
            $("#ct2").hide();
            $("#ct3").hide();
            $("#ct4").hide();
        }else if("s2" == this.id) {
            $("#ct2").show();
            $("#ct1").hide();
            $("#ct3").hide();
            $("#ct4").hide();
        }else if("s3" == this.id){
            $("#ct3").show();
            $("#ct1").hide();
            $("#ct2").hide();
            $("#ct4").hide();
        }else if("s4" == this.id){
            $("#ct4").show();
            $("#ct1").hide();
            $("#ct2").hide();
            $("#ct3").hide();
        }
        
        var $tabs = $("#tab span");
        for (var i = 0; i < $tabs.length; i++) {
            $($tabs.get(i)).removeClass("tab");
            if ($tabs.get(i) == this) {
                $(this).addClass("tab");
            }
        }

    }
    
function getEchartsData(){
    /*在查询或切换统计图时图片有可能会变形，于是每次调getEchartsData()都给每个chart的宽度定义成初始值*/
    $("#myChart2").css( ‘width‘, $("#myChart2").width());
    $("#myChart3").css( ‘width‘, $("#myChart3").width());
    $("#myChart4").css( ‘width‘, $("#myChart4").width());
    //配置echarts的路径
    require.config({
          paths: {
            echarts: ‘echarts‘
          }
    });
    //初始化echarts插件
    require(
              [
                ‘echarts‘, 
                ‘echarts/chart/pie‘,//饼图
                ‘echarts/chart/line‘,//折线图
                ‘echarts/chart/bar‘,//柱状图
                ‘echarts/chart/map‘,//地图
                ‘echarts/chart/gauge‘//仪表图
              ],
              drawEcharts//调定义的函数获取参数
    );
    //学习时间样例数据，也可以是json数据
    var arr1 = new Array(100,130,76,150);
    //平均学习时间样例数据，也可以是json数据
    var arr2 = new Array(150,70,100,130);
    //省份样例数据，也可以是json数据
    var provic = new Array(‘北京‘,‘上海‘,‘天津‘,‘重庆‘,"河北","山西","内蒙古","辽宁","吉林","黑龙江","江苏","浙江","安徽","福建","江西","山东","河南","湖北","湖南","广东","广西","海南","四川","贵州","云南","西藏","陕西","甘肃","青海","宁夏","新疆","香港","澳门","台湾");
    //销售额样例数据，也可以是json数据
    var toCash = new Array(500,400,30,200,200,40,10,160,50,280,300,180,100,20,270,100,330,350,10,160,50,280,300,180,100,20,3,180,169,150,180,55,66,38);
    
    function drawEcharts(ec){
        drawPie(ec);//饼图
        drawLineOrBar(ec);//折线图或柱状图，可以相互转换
        drawMap(ec);//地图
        drawGauge(ec);//仪表图
    }
    
    function drawPie(ec){
        //初始化chart
        myChart1 = ec.init(document.getElementById(‘myChart1‘));
        //option1为类似于json的一个对象，data可以写一个while循环赋值（见地图的数据）
        var option1 = {
            title : {
                 text: ‘上个月每周的学习时间分布‘,
                  //subtext: ‘饼图（Pie Chart）‘,
                  x:‘center‘
            },
            tooltip : {
              trigger: ‘item‘,
              //trigger: ‘axis‘,
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient : ‘vertical‘,
              x : ‘left‘,
              y : ‘center‘,
              data:[‘第一周‘+arr1[0]+‘学时‘,
                    ‘第二周‘+arr1[1]+‘学时‘,
                    ‘第三周‘+arr1[2]+‘学时‘,
                    ‘第四周‘+arr1[3]+‘学时‘
                    ]
            },
            toolbox: {
              show : true,
              feature : {
                //mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
              }
            }, 
            calculable : true,
            series : [
              {
                  //name:‘饼图实例-------------------------------‘,-------------‘,
                type:‘pie‘,
                radius : ‘75%‘,
                center: [‘50%‘, ‘60%‘],
                data:[
                    {value:arr1[0], name:‘第一周‘+arr1[0]+‘学时‘},
                    {value:arr1[1], name:‘第二周‘+arr1[1]+‘学时‘},
                    {value:arr1[2], name:‘第三周‘+arr1[2]+‘学时‘},
                    {value:arr1[3], name:‘第四周‘+arr1[3]+‘学时‘}
                      ]
              }
            ]
          };
        
        // 为echarts对象加载数据 
        myChart1.setOption(option1);
    }
    
    function drawLineOrBar(ec){
        var myChart2 = ec.init(document.getElementById("myChart2"));  
        var option2 = { 
            //图表标题  
           title: {  
                 text: ‘学习时间折线统计‘, //正标题  
                //link: "https:www.baidu.com", /* 正标题链接 点击可在新窗口中打开 */  
                x: "center" //标题水平方向位置  
                /* subtext: "From:http://www.xxx.com", */ //副标题  
                /* sublink: "http://www.xxx.com", //副标题链接 */  
                //正标题样式  
                //textStyle: {  
                   // fontSize:24  
                //},  
                //副标题样式  
                /* subtextStyle: {  
                    fontSize:12,  
                    color:"red"  
                }  */ 
            },  
            //数据提示框配置    
            tooltip: {  
                 trigger: ‘axis‘ //触发类型，默认数据触发，见下图，可选为：‘item‘ | ‘axis‘ 其实就是是否共享提示框  
            },  
            //图例配置    
            legend: {  
                data: [‘周学习时间趋势走向‘,‘平均学习时间趋势走向‘], //这里需要与series内的每一组数据的name值保持一致  
                y:"bottom"    
            },
          
          //工具箱配置 
            toolbox: {  
                show : true,  
                feature : {  
                    mark : {show: true}, // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部  
                    dataView : {show: true, readOnly: false},// 数据视图，上图icon左数8，打开数据视图  
                    magicType : {show: true, type: [‘line‘, ‘bar‘]},// 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图  
                    restore : {show: true}, // 还原，复位原始图表，上图icon左数9，还原  
                    saveAsImage : {show: true} // 保存为图片，上图icon左数10，保存  
                }  
            },   
            calculable: true,  
            //x轴配置   
            xAxis: [  
                    {  
                        type: ‘category‘,  
                        //boundaryGap: false,
                        data: [‘第一周‘, ‘第二周‘, ‘第三周‘, ‘第四周‘],  
                        name: "周"  
                    }  
                ],  
                //Y轴配置  
                yAxis: [  
                        {  
                            type: ‘value‘,  
                            splitArea: {show: false},  
                            name:"单位：小时"  
                        }  
                    ],  
                //图表Series数据序列配置  
                series: [  
                        {  
                            name: ‘平均学习时间趋势走向‘,  
                            type: ‘line‘,
                            smooth:true,
                            itemStyle: {normal:{
                                    label : {show:true,formatter:‘{c}‘},
                                    lineStyle : {color:‘#6666FF‘}
                                }
                            },
                            data:arr1
                        },
                        {  
                            name: ‘周学习时间趋势走向‘,  
                            type: ‘line‘,  
                            itemStyle: {normal:{
                                    label : {show:true,formatter:‘{c}‘},
                                    lineStyle : {color:‘#F09D65‘}
                                }
                            },
                            data:arr2 
                        }
                    ]  
                }
           myChart2.setOption(option2);
    }
    
    function drawMap(ec) {
        var myChart3 = ec.init(document.getElementById("myChart3"));
        var mapParams = {
            title : {
                text : ‘销售额‘,
                subtext : ‘单位(元)‘,
                left : ‘center‘
            },
            tooltip : {
                trigger : ‘item‘
            },
            legend : {
                orient : ‘vertical‘,
                left : ‘left‘,
                data : [ ‘销售额‘ ]
            },
            toolbox : {
                show : true,
                orient : ‘vertical‘,
                left : ‘right‘,
                top : ‘center‘,
                feature : {
                    dataView : {
                        readOnly : true
                    },
                    restore : {},
                    saveAsImage : {}
                }
            },
            /**
             * @Parms:visualMap是echarts3中展示的格式
             * @Parms:dataRange是echarts2中展示的格式
             */
            visualMap : {
                min : 0,
                max : 500,
                text : [ ‘High‘, ‘Low‘ ],
                realtime : false,
                calculable : true,
                inRange : {
                    color : [ ‘brown‘, ‘yellow‘, ‘#71C671‘ ]
                }
            },
            dataRange : {
                min : 0,
                max : 200,
                x : ‘left‘,
                selectedMode : false,
                y : ‘bottom‘,
                text : [ ‘High‘, ‘Low‘ ], // 文本，默认为数值文本
                calculable : true,
                color : [ ‘brown‘, ‘yellow‘, ‘#71C671‘]
            },
            series : [ {
                name : ‘销售额‘,
                type : ‘map‘,
                mapType : ‘china‘,
                roam : false,
                itemStyle : {
                    normal : {
                        label : {
                            show : true
                        }
                    },
                    emphasis : {
                        label : {
                            show : true
                        }
                    }
                },
                data : (function() {
                    var res = [];
                    var len = provic.length;
                    while (len--) {
                        res.push({
                            name : provic[len],
                            value : toCash[len]
                        });
                    }
                    return res;
                })(),
                itemStyle : {
                    normal : {
                        color : ‘#BF3EFF‘,
                        borderWidth : 0.5,
                        borderColor : ‘black‘,
                        label : {
                            show : true
                        }
                    }
                }
            }]
        };
        myChart3.setOption(mapParams);
    }
    
    function drawGauge(ec) {
        var myChart4 = ec.init(document.getElementById(‘myChart4‘));
        var option4 = {
                 tooltip : {
                       formatter: "{a} : {c}%"
                 },
                 toolbox: {
                       show : true,
                       feature : {
                           saveAsImage : {show: true}
                       }
                   },
               series : [
                        {
                        name:‘销售额‘,
                        type:‘gauge‘,
                           center : [‘15%‘, ‘50%‘],    // 默认全局居中
                        axisLine: {  // 坐标轴线
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: [[0.2, ‘#ff4500‘],[0.8, ‘#48b‘],[1, ‘#228b22‘]], 
                                            width: 3
                                        }
                                    },
                                    axisTick: {            // 坐标轴小标记
                                        splitNumber: 10,   // 每份split细分多少段
                                        length :8,        // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: ‘auto‘
                                        }
                                    },
                                    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                            color: ‘auto‘
                                        }
                                    },
                                    splitLine: {           // 分隔线
                                        show: true,        // 默认显示，属性show控制显示与否
                                        length :15,         // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: ‘auto‘
                                        }
                                    },
                                    pointer : {
                                        width : 3
                                    },
                                    title : {
                                        show : true,
                                        offsetCenter: [0, ‘90%‘]
                                    },
                                    detail : {
                                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                            color: ‘auto‘,
                                            fontWeight: ‘bolder‘
                                        }
                                    },
                                detail : {formatter:‘{value}%‘},
                                data:[{value: 45, name: ‘目标净销售额‘+100+‘万元,\n累计完成‘+45+‘万元‘}]
                    },
                    {
                        name:‘回款情况‘,
                        type:‘gauge‘,
                        center : [‘50%‘, ‘50%‘],    // 默认全局居中
                          axisLine: {  // 坐标轴线
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: [[0.2, ‘#ff4500‘],[0.8, ‘#48b‘],[1, ‘#228b22‘]], 
                                            width: 3
                                        }
                                    },
                                    axisTick: {            // 坐标轴小标记
                                        splitNumber: 10,   // 每份split细分多少段
                                        length :8,        // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: ‘auto‘
                                        }
                                    },
                                    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                            color: ‘auto‘
                                        }
                                    },
                                    splitLine: {           // 分隔线
                                        show: true,        // 默认显示，属性show控制显示与否
                                        length :15,         // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: ‘auto‘
                                        }
                                    },
                                    pointer : {
                                        width : 3
                                    },
                                    title : {
                                        show : true,
                                        offsetCenter: [0, ‘90%‘]
                                    },
                                    detail : {
                                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                            color: ‘auto‘,
                                            fontWeight: ‘bolder‘
                                        }
                                    },
                                detail : {formatter:‘{value}%‘},
                                data:[{value: 79, name: ‘目标净回款‘+200+‘万元,\n累计净回款‘+158+‘万元‘}]
                    },
                    {
                        name:‘预算‘,
                        type:‘gauge‘,
                        detail : {formatter:‘50%‘},
                         center : [‘85%‘, ‘50%‘],    // 默认全局居中
                         axisLine: {  // 坐标轴线
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: [[0.2, ‘#228b22‘],[0.8, ‘#48b‘],[1, ‘#ff4500‘]], 
                                            width: 3
                                        }
                                    },
                                    axisTick: {            // 坐标轴小标记
                                        splitNumber: 10,   // 每份split细分多少段
                                        length :8,        // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: ‘auto‘
                                        }
                                    },
                                    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                            color: ‘auto‘
                                        }
                                    },
                                    splitLine: {           // 分隔线
                                        show: true,        // 默认显示，属性show控制显示与否
                                        length :15,         // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: ‘auto‘
                                        }
                                    },
                                    pointer : {
                                        width : 3
                                    },
                                    title : {
                                        show : true,
                                        offsetCenter: [0, ‘90%‘]
                                    },
                                    detail : {
                                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                            color: ‘auto‘,
                                            fontWeight: ‘bolder‘
                                        }
                                    },
                                detail : {formatter:‘{value}%‘},
                                data:[{value: 88, name: ‘预算‘+100+‘万元,\n累计发生‘+88+‘万元‘}]
                    }                                    
                ]
            };
        myChart4.setOption(option4);
    }
}
</script>

echarts图表变形解决方案

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > echarts图表变形解决方案

echarts图表变形解决方案

看完仍有疑问？有类似问题直接问程序猿