常用echart图表(柱状图、折线图、饼图、环形进度条、雷达图等等)基础配置和用法、resize()响应、轮播tooltip

最新推荐文章于 2025-09-19 00:07:38 发布

置顶 swagLi

最新推荐文章于 2025-09-19 00:07:38 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： echart柱状图、折线图、饼图的基础用法 echart resize 自动轮播tooltip

本文链接：https://blog.csdn.net/qq_41149508/article/details/103136048

vue、elementUI、音视频通信、echarts实战专栏收录该内容

25 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了ECharts的基本使用，包括引入库、创建DOM容器，以及柱状图、折线图、饼图、环形进度条和雷达图的配置选项。同时，讨论了如何实现图表的resize响应以适应页面变化，并提供了一个自动轮播tooltip的封装函数。详细展示了各种图表的示例效果。

一、最简单的使用方式引入官方echart.js即可

<script  src="js/echarts.js"></script>

二、页面准备一个DOM容器

 <div style="width:49%;height:450px;" id=“main”></div>

三、基础用法三步骤

  //1、 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))；
  //2、 指定图表的配置项和数据
  var option = {...}//这里先省略，下面一一介绍不同图表的相关配置
  //3、使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);

四、不同图表的相关option数据配置
（1）折线图的option配置如下

option:{
	   xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['09-15','09-17','09-21','09-23','09-25','09-27','09-29'],
	        axisLabel: {

了解本专栏