Echarts开发过程中遇到的问题

设置某一块元素自己的样式

	itemStyle: {
    	color: '#F15348',
    },

如何设置图表留白

在option中加入：

	grid: {
    	x: '60px',   
    	...         
    }

设置横竖刻度线

在xAis和yAis中设置splitLine：

xAxis: {
                type: 'category',
                data:['9:30', '9:50', '10:10', '10:30', '10:50', '11:10', '11:30/13:00','13:20', '13:40', '14:00', '14:20', '14: 40', '15:00'],
                boundaryGap : false,
                splitLine: {
                    show: true
                }
            },

设置X轴第一个刻度贴边

在xAis中设置boundaryGap：

xAxis: {
                type: 'category',
                data:['9:30', '9:50', '10:10', '10:30', '10:50', '11:10', '11:30/13:00','13:20', '13:40', '14:00', '14:20', '14: 40', '15:00'],
                boundaryGap : false,
                splitLine: {
                    show: true
                }
            }

设置y轴标签字体颜色受数值影响

在yAxis中设置axisLabel的textStyle属性，color可以使用回调函数

yAxis: {
                type: 'value',
                splitLine: {
                    show: true
                },
                min: 'dataMin',
                axisLabel: {
                    textStyle: {
                        color: (value, index) => {
                            return value > 700 ? '#FF0A0A' : '#22A01E'
                        }
                    }
                }
            }

设置y轴步长以及相应的样式

设置interval为步长的值，即可分段，在判断数值大小改变样式的时候需要先转变类型为int，在进行大小判断

yAxis: {
                type: 'value',
                splitLine: {
                    show: true
                },
                interval: 333,
                min: 'dataMin',
                max: 'dataMax',
                axisLabel: {
                    textStyle: {
                        color: (value, index) => {
                            return parseInt(value) === 656 ? '#333333' : (parseInt(value) > 656 ? '#22A01E' : '#FF0A0A')
                        }
                    },
                    align: 'right',
                },
            }

设置X轴固定显示某些值

xAxis: {
              
                axisLabel: {
                    showMaxLabel: true,
                    interval: (index, value) => {
                        if(this.state.key === '上证综指' || this.state.key === '深圳成指'){
                            if(value==='11:30/13:00' || value==='15:00' || value==='09:30'){
                                return true
                            }
                        } 
                    }
                },
               
            },

根据文档中对axisLabel.interval的描述，该属性可以返回一个方法，方法内部的参数是index和value，根据value是否等于想要的值，返回true/false即可控制X轴上的点显示与否