使用echarts绘制折线图

最新推荐文章于 2023-04-18 15:28:29 发布

junhua10

最新推荐文章于 2023-04-18 15:28:29 发布

阅读量239

点赞数 1

本文链接：https://blog.csdn.net/junhua10/article/details/104750549

版权

这篇博客介绍了如何使用Echarts库来绘制折线图，涵盖了关键配置如X轴（xAxis）、Y轴（yAxis）和数据系列（series）。内容包括样式设计，如去除网格线、显示坐标信息、自定义轴颜色和线条颜色。数据通过ajax从后台获取并存储到Array中，然后应用到series。最后，通过echarts初始化和渲染函数完成图表展示。

摘要由CSDN通过智能技术生成

用到的关键字
xAxis:X轴
yAxis:Y轴
series:数据

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

样式设计
（1）去除网格线：

  xAxis: {
			    	splitLine:{show: false},//去除网格线
			        type: 'category',
			      data:    ["星期一", "星期二",  "星期三", "星期四", "星期五" , "星期六", "星期日"
							       ]  ,
							       axisLine:{
				                         lineStyle:{
				                             color:'#FFFFFF',
				                         }
				                     },
			    },

（2）鼠标停留在折点显示横纵坐