ECharts入门教程：从基础到动态图表-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61255374/article/details/122975385

本文介绍了ECharts的基本使用，包括从官网选择下载版本，引入ECharts库，绘制简单图表，创建雷达图以及实现动态柱状图。ECharts是一个基于JavaScript的优秀可视化框架，适合前端开发人员使用。

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

前面做项目时用到ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。

首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

官网地址：http://echarts.baidu.com/

1.首先在官网选择合适的下载版本

   http://echarts.baidu.com/download.html

2.引入Echarts

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

3.绘制一个简单的图表

  准备一个DOM容器

 <div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>

4.创建一个简单的雷达图

<script type="text/javascript">
window.onload = function (){
   
		//指定图表的配置项和数据
		option = {
   
				//标题	
			    title: {
   
			        text: '基础雷达图'
			    },
			    tooltip: {
   },
			    legend: {
   
			        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
			    },
			    radar: {
   
			        // shape: 'circle',
			        name: {
   
			            textStyle: {
   
			                color: '#fff',
			                backgroundColor: '#999',
			                borderRadius: 3,
			                padding: [3, 5]
			           }
			        },
			        indicator: [
			           {
    name