ECharts柱状和线性的option配置

最新推荐文章于 2024-02-10 19:14:04 发布

爱吃橘子的猫猫

最新推荐文章于 2024-02-10 19:14:04 发布

阅读量497

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/weixin_38483524/article/details/83831618

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了ECharts中用于配置柱状图和线性图的关键选项，包括tooltip的显示模式（连续或点击），legend的位置与变量值设定，grid的边距控制，dataZoom的数据缩放功能，以及series中数据与样式设置，如bar和line的使用。

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

option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {trigger: 'axis'},
    legend: {
        data:['销量']
    },
     grid: {
			    x: 40,
				x2: 100,
				y: 30,
			    y2: 100
			},
	dataZoom: [
						    {
							    show: true,
							    start: 0,
							    end: 100
						    },
						    {
							    type: 'inside',
							    start: 94,
							    end: 100
						    },
						    {
							    show: false,
							    yAxisIndex: 0,
							    filterMode: 'empty',
							    width: 30,
							    height: '80%',
							    showDataShadow: true,
							    left: '93%'
						    }
						],
    xAxis: {
        type: 'category',
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: { type: 'value',
						    axisLabel: {
							    formatter: '{value}' + yFmt
						    }},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

1、 tooltip定义明细的显示方式，连续显示或点击显示
2、 legend定义可视化表格的变量值，并显示在表头或表尾。位置可通过y:100,x:100来控制
在这里插入图片描述
3、grid控制视图表的上下左右边距
4、dataZoom定义数据的缩略放大栏
5、series定义视图表的数据及展示样式。可以有多组数据。展示样式有bar（柱状）、line（线性）等