[Vue/HTML]ECharts 使用指南：从入门到绘制各种常用图表

————数据可视化必备一篇搞定折线图、柱状图、饼图、散点图什么是 EChartsECharts 是一款由百度开源、Apache 基金会孵化的纯 JavaScript 图表库。它底层依赖轻量级的 Canvas 库 ZRender提供直观、交互丰富、可高度个性化定制的数据可视化图表。支持折线图、柱状图、饼图、散点图、地图、雷达图、K线图等几十种图表类型且兼容绝大多数现代浏览器包括移动端。**核心优势**- 丰富的图表类型和交互效果缩放、拖拽、tooltip- 大数据量下高性能渲染- 支持 Canvas 和 SVG 双引擎- 配置文件完全基于 JSON上手简单快速上手引入 ECharts**方法一直接下载或 CDN**html!DOCTYPE htmlhtmlheadmeta charsetutf-8titleECharts 示例/title!-- 引入 ECharts 主库 --script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script/headbody!-- 准备一个容器 --div idmain stylewidth: 800px; height: 500px;/divscript// 此处写初始化代码/script/body/html**方法二npm 安装用于 Vue/React 项目**bashnpm install echarts --savejavascriptimport * as echarts from echarts;// 或按需引入import { init, use } from echarts/core;ECharts绘图折线图**效果**一条带平滑曲线和填充区域的折线图鼠标悬停显示数据点。option { title: { text: 2025年某商品销量趋势 }, tooltip: { trigger: axis }, xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: { type: value, name: 销量件 }, series: [ { name: 销量, type: line, data: [120, 200, 150, 80, 70, 110], smooth: true, lineStyle: { width: 3, color: #5470c6 }, areaStyle: { opacity: 0.2 } } ] };柱状图多系列柱状图分组或堆叠只需在 series 数组中添加更多对象并配置var option { tooltip: { trigger: axis, axisPointer: { type: shadow } }, xAxis: { type: category, data: [苹果, 华为, 小米, OPPO, vivo] }, yAxis: { type: value, name: 市场份额 (%) }, series: [{ name: 2024年Q4, type: bar, data: [28, 22, 18, 15, 12], itemStyle: { borderRadius: [5, 5, 0, 0], color: #ee6666 }, label: { show: true, position: top } // 显示数值标签 }] };饼图Pie Chart:展示各部分占总体的比例。var option { title: { text: 某网站用户来源, left: center }, tooltip: { trigger: item, formatter: {b}: {d}% }, series: [{ name: 来源, type: pie, radius: 55%, // 饼图半径可设为 [40%, 70%] 变成环形图 data: [ { value: 1048, name: 搜索引擎, itemStyle: { color: #5470c6 } }, { value: 735, name: 直接访问 }, { value: 580, name: 社交媒体 }, { value: 484, name: 邮件营销 } ], emphasis: { scale: true, label: { show: true } }, label: { show: true, position: outside, formatter: {b}: {d}% } }] };散点图Scatter Plot观察两个变量间的相关性如身高与体重。var option { xAxis: { name: 身高 (cm), min: 140, max: 200 }, yAxis: { name: 体重 (kg), min: 40, max: 100 }, series: [{ type: scatter, data: [ [160, 55], [170, 65], [180, 75], [155, 50], [175, 70], [185, 80], [165, 60], [190, 85] ], symbolSize: 12, itemStyle: { color: #fac858 } }] };南丁格尔玫瑰图在饼图基础上突出量级差异适合周期性数据。var option { series: [{ type: pie, radius: [20%, 80%], roseType: radius, // 关键半径模式 data: [ { value: 30, name: 玫瑰1 }, { value: 45, name: 玫瑰2 }, { value: 28, name: 玫瑰3 }, { value: 60, name: 玫瑰4 } ] }] };仪表盘展示完成率、KPI指标。var option { series: [{ type: gauge, center: [50%, 50%], radius: 70%, min: 0, max: 100, progress: { show: true, width: 18 }, axisLine: { lineStyle: { width: 18, color: [[0.8, #91cc75]] } }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, pointer: { show: true, length: 60%, width: 8 }, detail: { valueAnimation: true, fontSize: 24, offsetCenter: [0, 20] }, title: { show: false }, data: [{ value: 78, name: 完成率 }] }] };大模型微调代码评论区回复获取**学习资源**- 官方网站https://echarts.apache.org/zh/index.html希望这篇指南能帮你快速产出漂亮的图表。如果你有更好的实践或疑问欢迎评论区交流。