常用Echarts圖指示線文字換行設置

 

項目中Echarts數據和單位過長 會導致顯示不全，如下圖所示

想讓它換行顯示，怎么解決呢？其實很簡單，一兩個屬性就搞定啦

 

以餅圖為例  其他Echarts圖形的換行顯示都是換湯不換葯，寫法類似

 

修改前的效果:

 

 

 想要的效果：

 

 

 

 

需要修改formatter屬性（兩個方法 選擇其一即可）

注意：在tooltip中使用</br>生效  在series  label里面 \n 生效

 

 

直接貼代碼

注意：高亮代碼

option = {
    tooltip: {
        trigger: 'item',
        // formatter: '{a} {b}: {c}({d}%)'
        formatter: '{a} <br/>{b}: {c}<br/> ({d}%)'
        
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: ['10%', '20%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center',
                // formatter: '{a} \n{b}: {c}\n ({d}%)'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

 

 

作者：微微一笑絕絕子
出處：https://www.cnblogs.com/wwyxjjz/p/15243777.html
本博客文章均為作者原創，轉載請注明作者和原文鏈接。