echarts属性简介

最新推荐文章于 2025-03-01 11:19:58 发布

原创最新推荐文章于 2025-03-01 11:19:58 发布 · 594 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

前端开发专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用ECharts库配置一个折线图，包括设置数据展示、颜色、图例、坐标轴等关键元素，并展示了如何通过具体配置项实现美观且功能完整的图表效果。

var mock = echarts.init(document.getElementById('mock '));  //重置节点

option  //canvas要展示的数据


	color         //柱状图柱子的颜色，折线图折线的颜色....
	legend        //图形的注释
	xAxis，yAxis   //表示X轴，Y轴
	
	xAxis: {
        	type: 'category',        //坐标轴类型
        	boundaryGap: false,	//分界线
        	data: ['周一','周二','周三','周四','周五','周六','周日'],  //坐标轴数据
        	axisLabel: {		//坐标轴数据属性
            		show: true,	//显示或隐藏坐标轴数据
            		textStyle: {
                		color: '#bbb'	//坐标轴数据颜色
            		}
        	},
        	axisLine:{	//坐标轴线条属性
            		lineStyle:{
                		color:'#fff',	//颜色	
                		width:1,	//粗细   这里是为了突出显示加上的，可以去掉
            		}
		}
        	
    	}	

series : [   
        {
            name:'注册增量',	//数据名称
            type:'line',	//图形类别
            stack: '总量',	//堆栈***
            areaStyle: {normal: {}},   	//区域样式
            data:[120, 132, 101, 134, 90, 230, 210],	//数据
            itemStyle: {	//项目样式
                normal: {
                    color: new echarts.graphic.LinearGradient(    //曲线围成的面积的颜色
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: 'rgba(70,85,158,1)'},
                            {offset: 0.5, color: 'rgba(70,85,158,0.5)'},
                            {offset: 1, color: 'rgba(70,85,158,0)'}
                        ]
                    )
                }
            },
            lineStyle: {	//线条样式
                normal: {
                    color: "rgba(70,85,158,1)"   // 线条颜色
                }
            },
        }
    ]

mock .setOption(option);    //绘图