echarts 遇到的问题和使用

 echarts 饼图标签文字过多重叠

series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '45%',
                label: {
                    normal: {
//                        formatter: ' {b|{b}:} {per|{c}%}    ',
                        formatter:get,
                        textStyle:{       //这只是为了让文字居中而已
                            align:"left",            //水平对齐方式可选left,right,center
//                            baseline:"top",    //垂直对齐方式可选top,bottom,middle
                            fontSize : 8,

                        },
var get=function(e){
        var newStr=" ";
        var start,end;
        var name_len=e.name.length;
//        alert(e.value);               //每个内容名称的长度
        var max_name=4;                      //每行最多显示的字数
        var new_row = Math.ceil(name_len / max_name);     // 最多能显示几行,向上取整比如2.1就是3行
        if(name_len>max_name){                 //如果长度大于每行最多显示的字数
            for(var i=0;i<new_row;i++){               //循环次数就是行数
                var old='';                        //每次截取的字符
                start=i*max_name;                   //截取的起点
                end=start+max_name;               //截取的终点
                if(i==new_row-1){                   //最后一行就不换行了
                    old=e.name.substring(start);
                }else{
                    old=e.name.substring(start,end)+"\n";
                }
                newStr+=old; //拼接字符串
            }
        }else{                                          //如果小于每行最多显示的字数就返回原来的字符串
            newStr=e.name;
        }
        return newStr+':\n'+e.value+'%\n'; //不想重叠就是在返回字符串的最后加“\n”

    }


相关文章链接:点击打开链接,点击打开链接

echarts x轴显示不完:相关文章1相关文章2


<div class="pieBoxHalf" style="width:60%;">
    <div class="pieTitle">各用水合作组织交易概览</div>
    <div class="pieIdBox" id="rightBar"></div>
 </div>

var myChart4 = echarts.init(document.getElementById('rightBar'));
function option4(x,title,buySumDealNumber,initWaterTotal,sellSumDealNumber) {
var option4 = {
        title: {
            /* text: "知识分类统计",*/
            textStyle: {
                color: "#436EEE",
                fontSize: 17
            }
        },
        //鼠标触发提示数量
        tooltip: {
            trigger: "axis",
            formatter: function(params) {
                var result = '';
                result += params[0].name+"<br/>";
                params.forEach(function (item) {
                    result +=  item.marker + " " + item.seriesName + " : " + ((item.value < 0)?(item.value * -1):(item.value))  +"万m³</br>";
                });
                return result;
            }
        },
        legend: {
            data:title,
            formatter:function (params) {
                console.info(JSON.stringify(params));
                var result = params.substring(0,2);
                if(result == "初始"){
                    result = "水权";
                }
                return result;
            }
        },
        //grid:{y2:240},//图形高度
        //x轴显示
        xAxis: {
            data: x,
            splitLine:{
                show:false
            },
            axisLabel:{
                interval:0,//横轴信息全部显示
                rotate:-30,//-30度角倾斜显示
                textStyle:{
                    fontSize:10 // 让字体变大
                }
                // ,
                // formatter:function (params) {
                //     var index = params.lastIndexOf("用水合作组织");
                //     console.info(index);
                //     var result = params.substring(0,index);
                //     return result;
                // }
            }
        },
        //y轴显示
        yAxis: {
            splitLine:{
                show:false
            }
        },
        series: [
            {
                name: "初始水权",
                type: "bar",
                stack: "业务",
                data: initWaterTotal,
                barWidth : 14,
                itemStyle:{
                    normal:{color:"#42A7DD"}
                }
            },
            {
                name: "买入水权",
                type: "bar",
                stack: "业务",
                data: buySumDealNumber,
                barWidth : 14,
                itemStyle:{
                    normal:{color:"#19BEC3"}//柱状图颜色
                }
            },
            {
                name: "卖出水权",
                type: "bar",
                stack: "业务",
                data: sellSumDealNumber,
                barWidth : 14,
                itemStyle:{color:'#FE6988'}
            },

        ]
    };
    myChart4.setOption(option4);
}

猜你喜欢

转载自blog.csdn.net/voidL123/article/details/80969143