echarts图表制作

最新推荐文章于 2024-07-31 00:24:58 发布

薛洋不吃糖

最新推荐文章于 2024-07-31 00:24:58 发布

阅读量385

点赞数

分类专栏：图表前端文章标签： echarts

本文链接：https://blog.csdn.net/csdn_zy_/article/details/84556850

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

图表

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述
送上这个echarts文档
http://www.echartsjs.com/option.html#xAxis.splitNumber
坐标轴的样式控制

 yAxis: [
        {
        	//y轴配置
//          name: '流量(m^3/s)',
            type: 'value',
            max: 80,
            splitNumber: 5,//分割为几段
            "axisLine":{
            	"show":false
            },"splitLine":{
            	"show":false
            },
            "axisTick":{//不显示y轴的刻度线
            	"show":false
            },
            "show":false//不显示y轴的刻度线和数字
        }
       
    ],

接下来是x轴

 xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: false},
            "axisTick":{
            	"show":false
            },
            axisLabel:{//x轴的字体的颜色
            	textStyle:{
            		color:'#999999'
            	}
            },
//          'axisText':{'#999999'},
        data : ['09.01','09.02','09.03','09.04','09.05','09.06','09.07','09.08','09.09','09.10',
            '09.11','09.12','09.13','09.14','09.15','09.16','09.17','09.18','09.19','09.20',
            '09.21','09.22','09.23','09.24','09.25','09.26','09.27','09.28','09.29','09.30'
                  ].map(function (str) {
                return str.replace(' ', '\n')
            })
        }
    ],

接下来是折点部分

  series: [
        {
        	//折线数据配置
            //name:'流量',对应的y轴名称
            type:'line',//图表类型  line是折线图，bar是柱形图
            animation: false,//是否开启动画
            areaStyle: {
//          	color:'-webkit-linear-gradient(#1C8DEB, #ffffff)'
color:new echarts.graphic.LinearGradient(
	0,0,0,1,
	[
	{offset:0,color:'#1C8DEB'},
	{offset:1,color:'#ffffff'}
	]
)
            },
            itemStyle:{//设置折点的数值和字
            	normal:{
            		color:"#1C8DEB",
            		label:{
            			show:true,
            			 formatter:'{c}分'
            		}
            	}
            		
            		
            	
            },
            symbol:'circle',
            lineStyle: {
            	//线的样式
                width: 1,
                color:'#1C8DEB'
            },

            data:[
40,20,30,20,60,  40,20,30,20,60,  40,20,30,20,60, 
40,20,30,20,60, 40,20,30,20,60,  40,20,30,20,60,       ]
        },
       
    ]
};