Echarts开发过程中遇到的问题

最新推荐文章于 2024-03-05 10:47:00 发布

原创最新推荐文章于 2024-03-05 10:47:00 发布 · 491 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts

Echarts 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在ECharts中定制图表样式，包括设置元素样式、调整图表留白、设置横竖刻度线、使y轴标签颜色随数值变化、控制X轴显示特定值等实用技巧。

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

	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
                            }
                        } 
                    }
                },
               
            },