ECharts快速入门（一）基本使用_第1关:echarts 的下载与使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44999663/article/details/120239180

本文是ECharts的基础学习教程，通过五个步骤介绍如何使用ECharts创建柱状图和折线图。首先，下载并引入echarts.js，然后准备容器，接着初始化echarts实例，指定配置项和数据，最后将配置项赋值给实例。文章提供了一个简单的柱形图和折线图的示例代码，并详细解释了配置项中的series参数，帮助读者快速上手ECharts。

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

公司有个项目需要用到echarts，最近刚接触，顺便总结些简单的学习成果。
echarts是一个基于 JavaScript 的开源可视化图表库，是个比较优秀的前端框架。其他的就不多讲了，开始吧！！（如有错误，望各位多多指正）

看到这篇文章的小伙伴如何想快速上手可以到b站看下这位up主（不是本人，我只是搬运工，哈哈哈）的视频：直通车https://www.bilibili.com/video/BV16L4y1h7C9?p=1

官网直通车：https://echarts.apache.org/zh/index.html

目录预览

ECharts使用五步曲

创建一个图表只需要五步：

第一步：下载并引入echarts.js文件

下载：下载的方式有多种，看你自己的需求，获取的各种方法详情请移步官网：下载（从 GitHub 获取、从 npm 获取、从 CDN 获取、在线定制）

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

第二步：准备一个具备大小的容器

 <div id="main" style="width: 600px;height:400px;"></div>

第三步：初始化echarts实例对象

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

第四步：指定配置项和数据

var option = {
   
            title: {
   
                text: '第一个 ECharts 实例'
            },
            tooltip: {
   },
            legend: {
   
                data:['销量']
            },
            xAxis: {
   
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
   },
            series: [{
   
                name: '销量',
                type: 'bar',
                data: [5, 20, 36