Echart 改變X軸、Y軸、折線的顏色和數值


在操作E-chart時需要根據需求改變顏色和屬性

圖1:

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};

 

圖2:

解決方案:

 option = {
              //標題
            title: {
                text: title,
                //標題樣式
                textStyle: {
                    fontWeight: 'normal',
                    color: '#fff',
                },
                //top: 20,
            },
            xAxis: {
                type: 'category',
                //x軸字體顏色
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                data: ['0822','0823','0824','0826','0827','0828']
            },
            yAxis: {
                type: 'value',
                //y軸顏色
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                //y軸設置為百分比
                axisLabel: {
                    formatter: '{value}%',
                },
                //坐標軸內線的樣式
                splitLine: {
                    lineStyle: {
                        color: '#666',
                        //type:'dashed'虛線
                    }
                }
            },
            series: [{
                //折線上數字
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter:'{c}%'
                    }
                },
                // 折線顏色
                itemStyle: {
                    normal: {
                        color: '#33CCFF',
                        lineStyle: {
                            color: '#33CCFF'
                        }
                    }
                },
                data:['78.57','50','80','93.33','92.86','100'],
                type: 'line',
                smooth: true
            }]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }      
    }

E-chart 點擊事件

myChart.on('click', function (params) {
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM