Question

我只是使用树形图类型的EChart来显示数据。但我遇到了一个问题。标签选项显示如下： itemStyle：{ 正常：{ label：{show：true， formtter：＆＃34; {B}＆＃34;}

如果我的数据名称长度太长（可能超过60个字符），则标签不会显示在树形图上。名称将显示在工具提示上。为什么？我怎么解决这个问题？谢谢！

Answer 1

尝试如下设置网格，

grid: { containLabel: true },

这将调整您的图表标签。

Answer 2

使用extraCssText属性设置宽度并强制换行。仅当您的name中有空格时，此方法才有效。

tooltip: { extraCssText: "width:200px; white-space:pre-wrap;" }

Answer 3

尝试在文字标签中使用f_id|c_file|e.name|operation|rate|c_no | qty| 1 015 A coping 0.30 1 1300 2 015 A coping 0.30 2 4567 3 015 A coping 0.30 3 1300 4 015 A coping 0.30 4 789 5 015 A coping 0.30 5 47 6 015 B cutting 0.30 1 568 7 015 B cutting 0.30 2 123 8 015 B cutting 0.30 3 8952 9 015 B cutting 0.30 1 456 10 015 B cutting 0.30 2 89 11 015 B cutting 0.30 3 78。

示例：

f_id|c_file|e.name|operation|c_no1|c_no2 |c_no3|c_no4|c_no5|total|rate|total*rate
 2     015  B       cutting 568     123   8952              9643  0.30 2892.9
 2     015  B       cutting 456     89    78                9643  0.30 2892.9
 total                      1024    212   9030

Answer 4

关注网格选项，只需设置此选项

var echartLine = echarts.init(document.getElementById('lineD'), theme);
        function graficarEchart(data){
            echartLine.setOption({
                title: {
                    text: data.title,
                },
                grid: {
                    x: 150,
                    x2: 35,
                    y: 35,
                    y2: 250
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 220,
                    y: 40,
                    data: ['Ventas']
                },
                toolbox: {
                    show: true,
                    feature: {
                        magicType: {
                            show: true,
                            title: {
                                line: 'Line',
                                bar: 'Bar',
                            },
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: true,
                            title: "Restore"
                        },
                        saveAsImage: {
                            show: true,
                            title: "Save Image"
                        }
                    }
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: data.label,
                    splitLine: {
                        show: true
                    },
                    axisTick : {   
                        show:true,
                        length: 10,
                        lineStyle: {
                            color: 'red',
                            type: 'solid',
                            width: 2
                        }
                    },
                    axisLabel : {
                        show:true,
                        interval: 0,    
                        rotate: 45,
                        margin: 20             
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: 'Deal',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default'
                            }
                        }
                    },
                    data: data.ventas
                }]
            });
        }

  <div id="lineD" style="height:750px;"></div>

This image is a example

The answer it's in this link

Answer 5

在网格的一侧或两侧设置所需的空间：

grid: {left:"450px", right:"200px"}

当ECharts标签的长度太长时，标签无法显示

5 个答案: