老季博客

标签： ECharts

  • ECharts图表中的XY轴长度过大如何截取？

    ECharts图表中的XY轴长度过大如何截取？

    前面我们记录了ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程，下面我们记录一下如果XY轴长度过大如何截取只显示一部分内容。

                axisLabel : { 
                formatter: function (params){ //标签输出形式 ---请开始你的表演 
                    var my_length = 36;
                    if( params.length > my_length) return params.substring(0,my_length); 
                    else return params; 
                }, 
            },

    在xAxis或者yAxis中设定一下长度，如下图：

    这里我们限定的字符长度是36，可以根据需求自行决定长度。

  • ECharts图表点击柱状打开a链接

    ECharts图表点击柱状打开a链接

    昨天我们记录了 ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程 ，今天我们记录一下在Echarts图标中我们点击柱状图的时候打开链接的需求，当然这里需要我们在传送过来的数组中要求链接才行。

    JAVASCRIPT代码

    var myChart = echarts.init(document.getElementById('yday_runtime_slow_10'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click',function(e){
//    console.log(e);//调试的时候可以打开，根据实际情况来设定。
    window.open(e.name);
});
  • ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程

    ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程

    ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足百度公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。 现在这个项目也由百度在开发维护。

    之前我们介绍了【PHP Mysql 动态数据结合 highcharts 图表统计】，最近我们在日常的开发中使用到ECharts插件来制表，但是如果遇到XY轴内容过长显示不全怎么办？下面我们记录一下解决办法。

    PHP代码部分

    
    $res = db_select('online_action_log','1=1 group by url order by nums desc','url,count(url) as nums','','10');  
    $res = array_reverse($res);
    $tmp = array();
    foreach($res as $key => $val ){
        $tmp['x'][] = $val['nums']; 
        $tmp['y'][] = $val['url']; 
    }
    $yday_url_top10['xAxis'] = json_encode(array_values($tmp['x']));
    $yday_url_top10['yAxis'] = json_encode(array_values($tmp['y']));

    HTML代码

    <div id="yday_url_top10"></div>

    JAVASCRIPT代码

    <script type="text/javascript">
/* URL TOP 10 开始*/               
yday_url_top10_option = {
    title : {
        text: '昨日URL访问前十',
//        subtext: '数据来自网络'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['昨日URL访问前十', '']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'value',
            boundaryGap : [0, 0.01]
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : <?php echo $yday_url_top10['yAxis']?>,
            axisLabel:{ interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象） 
                        rotate:0,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转 
            }
        }
    ],
    grid: [{
         left: '30%',//因旋转导致名字太长的类目造成遮蔽，可以配合这两个属性
         bottom:'10%'// 分别表示：距离左边距和底部的距离，具体数值按实际情况调整
    }],
    series : [
        {
            name:'访问次数',
            type:'bar',
            itemStyle : {  
                    normal : {  
                        color:'#ff69b4',  //圈圈的颜色
                        lineStyle:{  
                            color:'#ff69b4'  //线的颜色
                        }  
                }  
            },  
            data:<?php echo $yday_url_top10['xAxis']?>
        },
    ]
};
var yday_url_top10_Chart = echarts.init(document.getElementById('yday_url_top10'));
// 使用刚指定的配置项和数据显示图表。
yday_url_top10_Chart.setOption(yday_url_top10_option);
/*  URL TOP 10 IP 结束*/       
</script>

    整理代码执行后，数据HTML结果如下：

    这里是Y轴的内容比较长，所以我们这里将grid的配置中加入了left:30%的属性，这里需要根据自己的需求来写。

    整体运行效果：

WeChat
↑