Echarts图表快速上手指南
2026/7/23 17:53:04 网站建设 项目流程

echarts的快速上手指南

前言
数据可视化已经成为了前端工程师必备的一项技能,数据可视化的工具有好多,今天我们来聊聊echarts。话不多少,我们先分析她的结构
我的图表收藏网址:

  • https://www.isqqw.com/,
  • https://madeapie.com/#/,
  • http://ppchart.com/,
  • https://echarts.apache.org/zh/index.html
  • Echart社区:https://www.makeapie.cn/echarts

文章目录

  • echarts的快速上手指南
    • 一、安装
    • 二、引入
      • 1、js文件引入
      • 2、CDN引入
    • 三、使用
    • 四、`option`结构如下
    • 五、配置项
      • 1、柱状图
        • 1. 调整Echarts的柱子宽度
      • 2、饼状图
        • 2.1、标题设置
        • 2.2、图例设置
        • 2.3、值域设置
        • 2.4、提示框设置
        • 2.5、字体设置
      • 3、阶梯折线图
        • 3.1、线宽
    • 六、自适应
    • 七、方法改写
    • 八、X轴Y轴设置
      • 1、X 轴
        • 1. 控制 X 轴刻度朝内朝外展示
      • 2、Y 轴
      • 3、配置项说明
    • 九、series 线段设置
    • 常用配置
      • 1. 鼠标滚动放大缩小
      • 2. X 轴坐标轴设置,添加背景颜色
      • 3. 数据动态接入

一、安装

官网:https://echarts.apache.org/examples/zh/index.html

npminstallecharts--save

二、引入

1、js文件引入

echarts.js文件已经放到资源中了,大家自取,附链接:点击自取

<script src="echarts.js"charset

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询