【echarts】echarts中x轴的溢出

最新推荐文章于 2024-07-23 15:58:22 发布

简单Janeee

最新推荐文章于 2024-07-23 15:58:22 发布

阅读量927

点赞数

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.youkuaiyun.com/liqiannan8023/article/details/130111486

版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

这篇文章展示了如何在echarts图表中处理x轴数据溢出的问题，通过使用dataZoom组件的slider类型来创建滑动条，并设置startValue和endValue来限制显示的范围。同时，配置了x轴的标签旋转、颜色和字体大小，以及图表的背景色、提示框样式等细节，包括柱状图和线图的数据系列和样式设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts中x轴的溢出

var option = {
    backgroundColor: '#051c71',
    //重点 dataZoom导航条
    dataZoom: [{
        type: 'slider',
        show: true,
        startValue: 0,
        endValue: 5,
        height: '15',
        bottom: '3%',
        zoomLock: true
    }],
    tooltip: {
        trigger: "axis",
        backgroundColor: 'rgb(11,11,81)',
        padding: [15,30],
        extraCssText: 'box-shadow: 0px 0px 25px 5px rgb(41, 95, 159) inset;border-radius:10px'
    },
    legend: {
        show: true,
        top: '5%',
        textStyle: {
            color: "#fff"
        },
        data: ["数量", "金额"]
    },
    grid: {
        top: '20%',
        left: "3%",
        right: "4%",
        bottom: "13%",
        containLabel: true
    },
    xAxis: {
  	    type: "category",
      	axisTick: {
      		show: false
      	},
      	axisLabel: {
      		//"rotate": 30, 设置角度旋转
      		interval: 0,
      		color: '#ddd',
      		fontSize: 14
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	},
      	data: ["1月", "2月", "3月", "4月", 
      	"5月", "6月", "7月", "8月", 
      	"9月", "10月", "11月", 
      	"12月", "1月", "2月", 
      	"3月", "4月"]
    },
    yAxis: [],
    series: [{
      	name: "数量",
      	type: "bar",
      	barWidth: 15,
      	label: {
      		normal: {
      			show: false,
      			position: "insideRight"
      		}
      	},
      	itemStyle: {
      		normal: {
      			color:  new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgb(61, 207, 255)'},
                    {offset: 0.5, color: 'rgb(61, 207, 255)'},
                    {offset: 1, color: 'rgba(61, 207, 255, 0.1)'}
                ]
            ),
      		}
      	},
      	data: [10, 7, 15, 8, 6, 2, 1, 3]
    }, {
      	name: "金额",
      	type: "line",
      	yAxisIndex: 1,
      	smooth: false,
      	showAllSymbol: true,
      	symbol: "circle",
      	symbolSize: 10,
      	itemStyle: {
      		color: "rgb(253,146,166)"
      	},
      	lineStyle: {
      		color: "rgb(253,146,166)"
      	},
      	data: [3300, 1000, 1600, 3000, 4000, 2000, 1020, 1500]
    }]
};