Incubator-echarts: Unable to add text for the shapes used in the scattered graph

[srivignes]

I've created a scattered chart in my html page, I've created a legend for all data in the chart, still there are various shapes used for the categorization of data in my chart, for which I was unable to add any text to it.

One-line summary [问题简述]

So help me adding text for the shapes under Event Result marked in the screenshot of the chart added below

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.0
• Browser version [浏览器类型和版本]: Google Chrome Version 55.0.2883.87 m
• OS Version [操作系统类型和版本]: Windows 7 Professional Service Pack 1

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {
backgroundColor: '#fff',
        legend: {
            y: 'top',
            data: project_list,
            textStyle: {
                color: '#404a59',
                fontSize: 16
            }
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 1,
                end: 100
            },
            {
                type: 'inside',
                realtime: true,                     
                start: 65,
                end: 85,

            },
            {
                textStyle: {
                    color: '#404a59',
                    fontSize: 10
                }
            }
        ],
        grid: {
            x: '10%',
            x2: 150,
            y: '18%',
            y2: '10%'
        },
        tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderColor: '#777',
            borderWidth: 1,
            formatter: function (obj) {
                var value = obj.value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                    + obj.seriesName + '：'
                    + value[4]
                    + '</div>'
                    + schema[1].text + '：' + value[1] + '<br>'
                    + schema[2].text + '：' + value[2] + '<br>'
                    + schema[3].text + '：' + value[3] + '<br>'
                    + schema[4].text + '：' + value[4] + '<br>';
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date_x_axis,
            axisLine: {
                lineStyle: {
                    color: '#404a59'
                }
            }
        },
        yAxis: {
            type: 'category',
            boundaryGap: false,
            data: date_y_axis,
            axisLine: {
                lineStyle: {
                    color: '#404a59'
                }
            }
        },
        visualMap: [
            {
                left: 'right',
                top: '10%',
                dimension: 2,
                min: 0,
                max: 60,
                itemWidth: 30,
                itemHeight: 120,
                calculable: true,
                precision: 0.1,
                text: ['Execution time'],
                textGap: 30,
                textStyle: {
                    color: '#404a59'
                },
                inRange: {
                    symbolSize: [10, 70]
                },
                outOfRange: {
                    symbolSize: [10, 70],
                    color: ['#26B99A']
                },
                controller: {
                    inRange: {
                        color: ['#34495E']
                    },
                    outOfRange: {
                        color: ['#BDC3C7']
                    }
                }
            },                  
            {
                left: 'right',
                bottom: '5%',
                dimension: 4,
                text: ['Event Result'],
                value: ['Pass','Fail','Undefined'], 
                textStyle: {
                    color: '0E0E0F'
                },
                selected: {
                    'PASS': true,
                    'FAIL': true,
                    'UNDEFINED': true
                },
                categories: ['PASS','FAIL','UNDEFINED'],
                inRange: {
                    color: '#008462',
                    symbol: {
                        'PASS': 'diamond',
                        'FAIL': 'circle',
                        'UNDEFINED': 'square'
                    },
                    value: ['Pass','Fail','Undefined'],                 
                },
                outOfRange: {
                    color: '#BDC3C7',
                    symbol: {
                        'PASS': 'diamond',
                        'FAIL': 'circle',
                        'UNDEFINED': 'square'
                    },                  
                },
            }
        ],
        series: series_data
    };

}

Other comments [其他信息]

Also please clarify: Is there any option available for using the time-line for the y-axis like the one I'm using for x-axis in this graph ?

[100pah]

(1) For some reasons (for compatibility), currently the logic is: if visualMap.text is set, label text will not shown. I will try to upgrade that to meet your requirement.

(2) I have not understood the exact meaning of the word time-line you mentioned. Do you mean dataZoom component? If so, please try to set dataZoom.orient as 'vertical', which will auto make a dataZoom component control yAxis.

[srivignes]

Thanks a lot, @100pah . It works now :) I'm able to add text to the labels now