ECharts 知識筆記

 涓滴之水終可磨損大石,不是因爲它的力量強大,而是因爲晝夜不捨的滴墜

 

 定製label樣式(圖標上顯示的對應文字 對文字一些樣式的修改)

(1)經過「formatter」實現內容自定義;html

(2)經過「rich」項控制內容樣式;
   '{c1|' + val1 + '}/{c2|' + val2 + '}' 用「c1」的樣式顯示「val1」,用「c2」的樣式顯示val2;
(3)下方有對「color1」和「color2」樣式的具體定義;
官方文檔
官方文檔有更加詳細的描述:
http://echarts.baidu.com/option.html#xAxis.axisLabel.rich

echarts

itemStyle: {
    normal: {
        color: '#f7ba0e',
        label: {
            show: true,
            position: 'top',
            formatter: function(params) {
                for (var i = 0,
                l = option.xAxis[0].data.length; i < l; i++) {
                    if (option.xAxis[0].data[i] == params.name) {
                        var val1 = params.value || 0;
                        var val2 = option.series[0].data[i] || 0;
                        return '{c1|' + val1 + '}/{c2|' + val2 + '}';
                    }
                }
            },
            rich: {
                c1: {
                    color: '#f7ba0e'
                },
                c2: {
                    color: '#42a1fe'
                }
            },
            textStyle: {
                color: '#333'
            }
        }
    }
}
相關文章
相關標籤/搜索