Echarts入门

最新推荐文章于 2024-03-25 10:15:00 发布

clisk

最新推荐文章于 2024-03-25 10:15:00 发布

阅读量391

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/clisks/article/details/116598935

版权

本文介绍了Echarts的入门步骤，包括下载echarts.js、准备DOM容器、初始化实例、指定配置项。详细讲解了配置项如title、tooltip、legend、grid、toolbox、xAxis、yAxis和series的使用，并提供了示例代码。最后分享了学习Echarts的心得，建议通过官网示例和配置手册逐步实践和积累。

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

一、Echarts入门

1.echarts的使用

（1）官网下载并引入echarts.js文件

官网下载地址：单击下载
从GitHub上下载zip压缩文件并解压
在这里插入图片描述选择其中的echarts.min.js复制到js文件下

在编写的页面中添加js路径

（2）准备一个dom容器来显示图表

<div class="box" id="b1">
</div>

必须给该容器设置大小

<style>
	.box{
			width: 500px;
			height: 500px;
			background: bisque;
		}
</style>

（3）初始化echarts实例对象

<script>
	var mychart = echarts.init(document.getElementById("b1"));
</script>

（4）指定配置

<script>
	var mychart = echarts.init(document.getElementById("b1"));
	// 指定图表的配置项和数据
			        var option = {
			            title: {
			                text: 'ECharts 入门示例'
			            },
			            tooltip: {},
			            legend: {
			                data:['销量']
			            },
			            xAxis: {
			                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			            },
			            yAxis: {},
			            series: [{
			                name: '销量',
			                type: 'bar',
			                data: [5, 20, 36, 10, 10, 20]
			            }]
			        };
</script>

（5）将配置项设置给echarts实例对象

mychart.setOption(option);

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 500px;
				height: 500px;
				background: bisque;
			}
		</style>
		<script src="../js/echarts.min.js"></script>
	</head>
	<body>
		<div class="box" id="b1">
			
		</div>
		<script>
			var mychart = echarts.init(document.getElementById("b1"));
			// 指定图表的配置项和数据
			        var option = {
			            title: {
			                text: 'ECharts 入门示例'
			            },
			            tooltip: {},
			            legend: {
			                data:['销量']
			            },
			            xAxis: {
			                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			            },
			            yAxis: {},
			            series: [{
			                name: '销量',
			                type: 'bar',
			                data: [5, 20, 36, 10, 10, 20]
			            }]
			        };
			mychart.setOption(option);
		</script>
	</body>
</html>

效果展示
在这里插入图片描述

2.echarts配置的理解

以折线图为例

（1）title

标题组件，用来设置图表的标题

(2)tooltip

提示框组件
在这里插入图片描述

tooltip: {
        trigger: 'axis'
    },

trigger表示触发类型，axis代表坐标轴触发

属性1

在这里插入图片描述

属性2

在这里插入图片描述

属性3：axisPointer

axisPointer{
//坐标轴指示器，坐标轴触发有效
    type:"shadow"//显示阴影
    //type:"line"//显示直线
}

更多属性请转至官方文档

展示效果：

可以让鼠标放在图表出现提示信息
在这里插入图片描述

(3)legend

图例组件，点击可以隐藏或显示对应的折线
提醒：如果在series中有name值，legend中的data可以不用写

legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },

展示效果：
在这里插入图片描述

(4)grid

直角坐标系内绘图网络

在这里插入图片描述大框为dom容器，小框为grid控制的大小

grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },

left：grid距离容器的左侧距离
right：grid距离容器的右侧距离
bottom：grid距离容器的底部距离
containLabel：是否显示刻度标签

(5)toolbox

工具箱组件，提供图表的下载，可以将图表下载为图片(下载按钮在图表右上角)

toolbox: {
        feature: {
            saveAsImage: {}
        }
    },

(6)xAxis和yAxis

直角坐标系grid中的x轴和y轴

xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },

type中属性的含义

’value’ 数值轴，适用于连续数据。（类似于显示数字）
’category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。（类似于显示汉字）
’time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
’log’ 对数轴。适用于对数数据。

boundaryGap

是否让线条和坐标轴有空隙

data

设置x或y坐标轴的值的显示

axisLabel

可以调整刻度的颜色，字体大小，字体风格等

axisLabel:{
    color:"red",
    fontStyle : 'normal',
    fontSize : 12
}

axisLine

让x轴或y轴的线不显示

axisLine:{
    show:false
}

设置线的格式

axisLine:{
    lineStyle:{
        color:"red",
        width:5
    }
}

splitLine

图表分割线设置

splitLine:{
    lineStyle:{
        color:"red",
    }
}

更多属性见：官方文档

(7)series

系列列表，每个系列通过type决定自己的图表类型
在这里插入图片描述
series是一个数组，其中包含这若干个对象，每个对象决定折线图的一条线

每个对象内的属性含义：

name：线条名称
type：线条类型，line为折线图，bar为柱状图，pie为饼图，scatter为散点图等
stack：数据堆叠，让数据不会出现交叉情况，同一个类轴上配置相同的stack后，后一个系列的值会在前一个系列的值的基础上相加，如：有两个值为110和220，都配了stack，后一个值显示时会显示330，一般情况不怎么用stack
data：折线的每个拐点的相关数据
barWidth：可以设置柱形图的胖瘦
itemStyle：可以将柱形图修改为圆角

(8)color

设置线条颜色，形式是一个数组

color:['red','blue','green'],

(9)让图表适配屏幕

window.addEventListener("resize",function(){
    myChart.resize();
});

3.学习心得

如果想写一个较为完美的ecahrts表格的话，首先可以在官网的示例中找到你认为较为符合的表格粘贴过来，然后在这个基础上根据自己的要求对图表进行修改，可以根据官方文档中的配置手册找到每一个细节的配置，然后对用到每个配置的功能进行一些简单的总结，方便以后的使用，这是一个不断积累的过程。