[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"chapter-book:lMK9dX2w":3,"chapter:1l63xN8g":230},{"id":4,"created_at":5,"updated_at":5,"code":6,"author_id":7,"title":8,"slug":9,"cover_theme_key":10,"visibility":11,"status":12,"sort_order":4,"favorite_count":13,"view_count":14,"author":15,"chapter_count":27,"word_count":28,"free_count":13,"is_favorite":24,"book_status":12,"unparted":29},13,"2024-10-08T15:32:29.303+08:00","lMK9dX2w",3,"从零开始学习ECharts","从零开始学习echarts-13","default","public","published",0,4,{"id":7,"created_at":16,"updated_at":17,"code":18,"username":19,"display_name":20,"role":21,"avatar_url":22,"is_active":23,"is_banned":24,"follower_count":25,"following_count":13,"last_login_at":26},"2023-12-05T17:38:27.845+08:00","2026-10-21T00:01:41.406+08:00","r2Xr2XOR","1701769107783","小卒子","user","\u002Fcuts\u002F17021221850442010-06-29_233540.jpg",true,false,1,"2026-10-21T00:01:41+08:00",25,217806,[30,38,46,54,62,70,78,86,94,102,110,118,126,134,142,150,158,166,174,182,190,198,206,214,222],{"id":31,"created_at":32,"updated_at":32,"code":33,"author_id":7,"book_id":4,"slug":34,"article_id":35,"title":36,"sort_order":31,"content":37,"status":12},146,"2024-10-08T15:33:01.362+08:00","yj6yjQ89","echarts学习大纲-146",559,"ECharts学习大纲","下面是一个详细的学习路线图，帮助你从零开始掌握 ECharts 并了解其所有图表类型和功能。\n\n### **第一阶段：基础知识入门**\n\n1. **ECharts 简介与安装**\n\n - 学习 ECharts 是什么，以及它的用途。\n - 安装 ECharts：了解如何在本地环境中使用 CDN 或 npm 安装 ECharts。\n - 官方文档：https:\u002F\u002Fecharts.apache.org\u002F\n2. **理解 ECharts 的核心概念**\n\n - 了解 ECharts 的数据结构（`option`）。\n - 学习如何定义和配置图表（`title`、`tooltip`、`legend`、`xAxis`、`yAxis`、`series` 等基本属性）。\n - 熟悉使用不同类型的坐标系（笛卡尔坐标系、极坐标系、地理坐标系等）。\n3. **绘制第一个简单图表**\n\n - 创建基本的折线图和柱状图，了解如何渲染 ECharts 图表。\n - 配置图表的基本样式，如颜色、字体、大小等。\n\n### **第二阶段：掌握常见图表类型**\n\n1. **折线图 (Line Chart)**\n\n - 掌握如何绘制基本折线图。\n - 处理多条折线、多轴、数据标记等。\n2. **柱状图 (Bar Chart)**\n\n - 学习垂直和水平柱状图的配置方法。\n - 了解如何处理堆叠柱状图和分组柱状图。\n3. **饼图 (Pie Chart)**\n\n - 掌握绘制基础饼图的方法。\n - 了解如何配置环形图、南丁格尔玫瑰图等变种。\n4. **散点图 (Scatter Chart)**\n\n - 学习如何绘制基本散点图。\n - 配置散点图的尺寸、颜色、数据点形状。\n5. **K线图 (Candlestick Chart)**\n\n - 了解金融数据的展示方式，学习绘制 K 线图。\n - 理解开盘价、收盘价、最高价、最低价的数据结构。\n\n### **第三阶段：进阶图表类型**\n\n1. **雷达图 (Radar Chart)**\n\n - 学习如何绘制雷达图，适用于对比多个数据项。\n - 配置雷达图的轴线、指示器和数据范围。\n2. **地图 (Map)**\n\n - 掌握如何使用地理坐标系绘制地图。\n - 结合第三方地图库（如高德地图、百度地图）进行定制化地图开发。\n3. **桑基图 (Sankey Diagram)**\n\n - 了解如何绘制桑基图，展示数据流动关系。\n - 学习配置节点和流向的样式。\n4. **漏斗图 (Funnel Chart)**\n\n - 学习漏斗图的用法，适合展示转化率数据。\n - 掌握配置漏斗图的层次关系和样式调整。\n5. **热力图 (Heatmap)**\n\n - 学习热力图的绘制，展示数据密度和趋势。\n - 理解色阶、渐变和数据映射。\n6. **关系图 (Graph)**\n\n - 掌握如何绘制网络关系图，展示节点和连线的关系。\n - 配置节点大小、连线颜色、力导向布局等。\n\n### **第四阶段：高级应用**\n\n1. **时间序列图表**\n\n - 学习如何使用时间轴，展示动态数据变化。\n - 结合实时数据更新技术，实现实时图表更新。\n2. **动态与交互**\n\n - 学习如何实现图表的动态效果，如图表刷新、自动播放等。\n - 掌握鼠标悬停、点击、缩放、拖拽等交互功能的实现。\n3. **数据处理与数据集**\n\n - 使用 `dataset` 组织和处理大规模数据。\n - 学习如何动态加载和切换图表数据。\n4. **ECharts 与 Vue 集成**\n\n - 了解如何将 ECharts 与前端框架 Vue.js 集成。\n - 使用 `vue-echarts` 组件实现更复杂的图表交互和响应式设计。\n\n### **第五阶段：自定义与优化**\n\n1. **自定义主题**\n\n - 学习如何定制 ECharts 主题，配置全局颜色、字体、背景等。\n - 创建并使用自定义图表主题。\n2. **性能优化**\n\n - 学习处理大规模数据的优化技巧。\n - 使用懒加载、虚拟化、图表简化等技术提高渲染性能。\n3. **图表导出与分享**\n\n - 学习如何将 ECharts 图表导出为图片、PDF 等。\n - 了解如何在社交媒体或网页中分享图表。\n\n### **第六阶段：实战项目与高级案例**\n\n1. **数据仪表盘开发**\n\n - 综合运用多种图表类型，开发完整的数据仪表盘。\n - 处理图表的布局、交互和响应式设计。\n2. **案例学习**\n\n - 学习 ECharts 官方提供的复杂图表案例，如迁徙图、气象图、流向图等。\n - 尝试自己实现一些高级图表应用。\n\n### **辅助学习资源**\n\n1. **官方文档**：ECharts 官方文档是学习的最佳资源，可以查阅 API、图表配置以及各种案例。\n2. **社区和博客**：可以参考 ECharts 的 GitHub 讨论区、论坛和开发者的博客，获取更多实践经验和解决方案。\n3. **视频教程**：可以通过 B 站、YouTube 等平台寻找 ECharts 的相关视频教程，加快学习进度。\n\n通过这条学习路线，你可以逐步从入门到精通，最终能够灵活运用 ECharts 创建各种类型的图表，并且在实际项目中熟练应用。\n",{"id":39,"created_at":40,"updated_at":40,"code":41,"author_id":7,"book_id":4,"slug":42,"article_id":43,"title":44,"sort_order":39,"content":45,"status":12},147,"2024-10-08T15:44:05.189+08:00","r2Xr2YXO","echarts-简介与安装-147",561,"ECharts 简介与安装","# ECharts 简介与安装\n\n## 什么是 ECharts？\n\nECharts（Enterprise Charts）是一个开源的图表库，由百度团队开发。它提供了丰富的图表类型和强大的交互功能，适合用于数据可视化。ECharts 是基于 JavaScript 的，支持各种复杂的可视化需求，如实时数据监控、统计分析、商业智能等。\n\n### ECharts 的主要特点\n\n1. **多种图表类型**：ECharts 支持多种图表类型，包括折线图、柱状图、饼图、散点图、K线图、热力图、地图等。能够满足不同场景下的数据可视化需求。\n2. **响应式设计**：ECharts 图表能够自适应不同的屏幕和设备，无论是手机、平板还是桌面，用户体验都能得到保障。\n3. **强大的交互功能**：ECharts 提供了丰富的交互功能，用户可以通过鼠标悬停、点击、缩放、拖拽等方式与图表进行交互，提高了数据的可读性和易用性。\n4. **高性能**：ECharts 采用了 Canvas 技术，能够高效地处理大规模数据的可视化渲染，性能卓越。\n5. **丰富的主题与样式**：ECharts 提供了多种主题样式，用户可以根据需求进行定制化设置，确保图表美观且符合品牌形象。\n\n## ECharts 的用途\n\nECharts 广泛应用于以下几个领域：\n\n- **商业智能**：通过数据分析与可视化，帮助企业洞察市场趋势、用户行为和运营效率。\n- **数据监控**：实时监控各种指标数据，如流量、性能、销售等。\n- **科学研究**：在科研领域，通过图表展示实验结果和数据分析，帮助研究人员更直观地理解数据。\n- **教育与培训**：通过图表辅助教学，提高学习效果。\n\n## 如何安装 ECharts\n\n### 1. 使用 CDN 安装\n\n使用 CDN 方式是最简单的安装方法。只需要在 HTML 文件中引入 ECharts 的 CDN 链接即可：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 示例\u003C\u002Ftitle>\n \u003C!-- 引入 ECharts -->\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003C!-- 图表容器 -->\n \u003Cdiv id=\"main\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \n \u003Cscript>\n \u002F\u002F 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n \u002F\u002F 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n \u002F\u002F 使用刚指定的配置项和数据显示图表\n myChart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 2. 使用 npm 安装\n\n如果你使用 npm 进行项目管理，可以通过 npm 安装 ECharts：\n\n```bash\nnpm install echarts --save\n```\n\n安装完成后，你可以在你的 JavaScript 文件中导入 ECharts：\n\n```javascript\nimport * as echarts from 'echarts';\n\n\u002F\u002F 创建一个图表实例\nconst myChart = echarts.init(document.getElementById('main'));\n\n\u002F\u002F 配置图表\nconst option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n\n\u002F\u002F 使用刚指定的配置项和数据显示图表\nmyChart.setOption(option);\n```\n\n### 3. ECharts 的基本使用\n\n在安装完成后，我们可以开始使用 ECharts 创建不同的图表。以下是一些常见图表类型的基本示例及其配置属性。\n\n#### 示例 1：折线图\n\n折线图用于展示数据的变化趋势。\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>折线图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"lineChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \n \u003Cscript>\n var lineChart = echarts.init(document.getElementById('lineChart'));\n\n var lineOption = {\n title: {\n text: '月销售额'\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {\n data: ['销量']\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月', '6月']\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n name: '销量',\n type: 'line',\n data: [120, 200, 150, 80, 70, 110],\n smooth: true \u002F\u002F 平滑曲线\n }]\n };\n\n lineChart.setOption(lineOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n#### 示例 2：饼图\n\n饼图用于展示各部分占整体的比例。\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>饼图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"pieChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \n \u003Cscript>\n var pieChart = echarts.init(document.getElementById('pieChart'));\n\n var pieOption = {\n title: {\n text: '水果消费比例',\n subtext: '虚构数据',\n left: 'center'\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['苹果', '香蕉', '橙子', '西瓜', '草莓']\n },\n series: [{\n name: '水果',\n type: 'pie',\n radius: '50%',\n data: [\n { value: 335, name: '苹果' },\n { value: 310, name: '香蕉' },\n { value: 234, name: '橙子' },\n { value: 135, name: '西瓜' },\n { value: 1548, name: '草莓' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }]\n };\n\n pieChart.setOption(pieOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n#### 示例 3：柱状图\n\n柱状图常用于对比不同类别的数据。\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>柱状图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"barChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \n \u003Cscript>\n var barChart = echarts.init(document.getElementById('barChart'));\n\n var barOption = {\n title: {\n text: '产品销量'\n },\n tooltip: {},\n xAxis: {\n data: [\"产品A\", \"产品B\", \"产品C\", \"产品D\", \"产品E\"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10],\n itemStyle: {\n color: '#73c0de' \u002F\u002F 自定义柱子颜色\n\n\n }\n }]\n };\n\n barChart.setOption(barOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### ECharts 配置项详解\n\nECharts 的配置项 `option` 是构建图表的核心。以下是一些常用的配置项及其属性：\n\n- **title**：设置图表标题，支持文本和副标题。\n\n - `text`: 标题文本。\n - `subtext`: 副标题文本。\n - `left`: 标题位置，可以是像素值或 'center'\u002F'left'\u002F'right'。\n- **tooltip**：图表的提示框，鼠标悬停时显示的信息。\n\n - `trigger`: 触发类型（如 'item'、'axis'）。\n - `formatter`: 提示框内容格式化。\n- **legend**：图例，用于标识不同系列的数据。\n\n - `data`: 图例项数组。\n - `orient`: 图例排列方向（'horizontal' 或 'vertical'）。\n - `left`: 图例位置。\n- **xAxis** 和 **yAxis**：坐标轴配置。\n\n - `type`: 坐标轴类型（如 'category'、'value'、'time'、'log'）。\n - `data`: 类目轴数据（仅在 type 为 'category' 时需要）。\n - `name`: 坐标轴名称。\n- **series**：数据系列，每个系列代表一个图表的数据集。\n\n - `type`: 图表类型（如 'line'、'bar'、'pie'、'scatter'、'k'）。\n - `data`: 数据数组，包含实际展示的数据。\n\n### 结合其他组件的使用\n\nECharts 还可以与其他组件（如 Vue.js、React、Angular）进行集成使用。下面是一个在 Vue 中使用 ECharts 的示例。\n\n#### Vue 示例\n\n```html\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>ECharts 示例\u003C\u002Fh1>\n \u003Cdiv ref=\"myChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport * as echarts from 'echarts';\n\nexport default {\n name: 'MyChart',\n mounted() {\n this.initChart();\n },\n methods: {\n initChart() {\n const chartDom = this.$refs.myChart;\n const myChart = echarts.init(chartDom);\n\n const option = {\n title: {\n text: 'Vue 中的 ECharts 示例'\n },\n tooltip: {},\n xAxis: {\n data: [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n myChart.setOption(option);\n }\n }\n};\n\u003C\u002Fscript>\n\n\u003Cstyle>\n\u002F* 样式可根据需要自定义 *\u002F\n\u003C\u002Fstyle>\n```\n\n## 总结\n\nECharts 是一个功能强大的数据可视化库，能够帮助用户快速创建丰富的图表。通过使用 CDN 或 npm 安装，开发者可以轻松集成到各种项目中。无论是简单的折线图、柱状图，还是复杂的散点图、K线图，ECharts 都提供了强大的支持。\n\n希望这篇博客能帮助你快速入门 ECharts，理解其基本用法和配置项。随着学习的深入，你可以逐渐掌握更复杂的用法和交互功能，充分发挥 ECharts 的强大能力。\n",{"id":47,"created_at":48,"updated_at":48,"code":49,"author_id":7,"book_id":4,"slug":50,"article_id":51,"title":52,"sort_order":47,"content":53,"status":12},148,"2024-10-09T12:47:02.455+08:00","zJXMvYKw","echarts-的核心概念-148",562,"ECharts 的核心概念","# 理解 ECharts 的核心概念\n\nECharts 是一个强大的图表库，能够帮助开发者轻松创建多种类型的可视化图表。在深入使用 ECharts 之前，了解其核心概念非常重要。本文将详细介绍 ECharts 的数据结构、图表配置项和不同类型的坐标系，并提供多个示例代码，帮助你更好地理解和应用。\n\n## ECharts 的数据结构 (`option`)\n\n在 ECharts 中，所有图表的配置都通过一个名为 `option` 的对象来实现。这个对象包含了定义图表的所有信息，包括标题、坐标轴、系列数据等。\n\n### `option` 对象的基本结构\n\n`option` 对象的基本结构如下：\n\n```javascript\nvar option = {\n title: {\n text: '图表标题',\n subtext: '副标题',\n left: 'center'\n },\n tooltip: {\n trigger: 'item' \u002F\u002F 'item' 或 'axis'\n },\n legend: {\n data: ['系列1', '系列2'],\n orient: 'vertical', \u002F\u002F 'horizontal' 或 'vertical'\n left: 'left'\n },\n xAxis: {\n type: 'category', \u002F\u002F 'category' 或 'value'\n data: ['类别1', '类别2', '类别3']\n },\n yAxis: {\n type: 'value' \u002F\u002F 'value'、'log'、'category' 或 'time'\n },\n series: [{\n name: '系列名称',\n type: 'bar', \u002F\u002F 'line', 'bar', 'pie', 'scatter', 'k' 等\n data: [10, 20, 30]\n }]\n};\n```\n\n## 定义和配置图表\n\n### 1. 标题（`title`）\n\n标题部分用于设置图表的主标题和副标题，通常包含以下属性：\n\n- `text`: 主标题文本。\n- `subtext`: 副标题文本。\n- `left`: 标题位置（如 `'center'`、`'left'`、`'right'`）。\n\n#### 示例\n\n```javascript\ntitle: {\n text: '月销售额',\n subtext: '2024年数据',\n left: 'center'\n}\n```\n\n### 2. 提示框（`tooltip`）\n\n提示框是用户与图表交互时显示的数据。可以通过 `trigger` 属性控制提示的触发方式。\n\n- `trigger`: 触发类型（`'item'` 表示鼠标悬停单个数据项时，`'axis'` 表示悬停整个坐标轴）。\n\n#### 示例\n\n```javascript\ntooltip: {\n trigger: 'axis'\n}\n```\n\n### 3. 图例（`legend`）\n\n图例用于标识不同系列的数据，主要属性有：\n\n- `data`: 图例项数组。\n- `orient`: 图例的排列方向（`'horizontal'` 或 `'vertical'`）。\n- `left`: 图例的位置（如 `'left'`、`'right'`、`'center'`、像素值等）。\n\n#### 示例\n\n```javascript\nlegend: {\n data: ['产品A', '产品B'],\n orient: 'horizontal',\n left: 'center'\n}\n```\n\n### 4. 坐标轴（`xAxis` 和 `yAxis`）\n\n坐标轴配置用于定义图表的 X 轴和 Y 轴，主要属性包括：\n\n- `type`: 坐标轴类型（`'category'`、`'value'`、`'log'`、`'time'`）。\n- `data`: 类目轴的类目数组（仅在类型为 `category` 时需要）。\n\n#### 示例\n\n```javascript\nxAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月']\n},\nyAxis: {\n type: 'value'\n}\n```\n\n### 5. 数据系列（`series`）\n\n数据系列是图表的核心，定义了要展示的数据内容和样式，主要属性包括：\n\n- `name`: 系列名称，用于图例。\n- `type`: 图表类型（如 `line`、`bar`、`pie` 等）。\n- `data`: 实际的数据数组。\n\n#### 示例\n\n```javascript\nseries: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10]\n}]\n```\n\n## 坐标系类型\n\nECharts 支持多种坐标系，适用于不同的可视化需求。以下是三种主要的坐标系类型：\n\n### 1. 笛卡尔坐标系\n\n这是 ECharts 中最常用的坐标系，适合展示大部分类型的图表，如折线图、柱状图、散点图等。\n\n#### 示例\n\n```javascript\nvar option = {\n title: {\n text: '销售数据',\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'category',\n data: ['产品A', '产品B', '产品C']\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n name: '销量',\n type: 'line',\n data: [10, 20, 30]\n }]\n};\n```\n\n### 2. 极坐标系\n\n极坐标系适合展示某些特定类型的图表，如雷达图和极坐标图。\n\n#### 示例\n\n```javascript\nvar option = {\n title: {\n text: '雷达图示例'\n },\n tooltip: {},\n legend: {\n data: ['某个产品']\n },\n radar: {\n indicator: [\n { name: '销售', max: 6500 },\n { name: '管理', max: 16000 },\n { name: '开发', max: 30000 },\n { name: '客户', max: 38000 },\n { name: '支持', max: 52000 }\n ]\n },\n series: [{\n name: '预算 vs 开销（Budget vs spending）',\n type: 'radar',\n data: [{\n value: [4300, 10000, 28000, 35000, 50000],\n name: '预算分配'\n }]\n }]\n};\n```\n\n### 3. 地理坐标系\n\n地理坐标系用于展示地图数据，适合处理地理相关的可视化需求。\n\n#### 示例\n\n```javascript\nvar option = {\n title: {\n text: '全国分布'\n },\n tooltip: {\n trigger: 'item'\n },\n visualMap: {\n min: 0,\n max: 500,\n left: 'left',\n top: 'bottom',\n text: ['高', '低'], \u002F\u002F 文本，默认为数值文本\n calculable: true\n },\n series: [{\n name: '随机数据',\n type: 'map',\n map: 'china', \u002F\u002F 使用中国地图\n roam: false,\n data: [\n { name: '广东', value: Math.round(Math.random() * 1000) },\n { name: '北京', value: Math.round(Math.random() * 1000) },\n { name: '上海', value: Math.round(Math.random() * 1000) },\n { name: '浙江', value: Math.round(Math.random() * 1000) }\n ]\n }]\n};\n```\n\n## 整合示例\n\n将上述所有内容结合在一起，我们可以构建一个包含多种图表类型的页面。下面的示例展示了如何在同一个页面中使用不同的图表类型。\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 核心概念示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"barChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \u003Cdiv id=\"lineChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \u003Cdiv id=\"radarChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \u003Cdiv id=\"mapChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n \u002F\u002F 柱状图\n var barChart = echarts.init(document.getElementById('barChart'));\n var barOption = {\n title: { text: '产品销量' },\n xAxis: { type: 'category', data: ['产品A', '产品B', '产品C'] },\n yAxis: { type: 'value' },\n series: [{\n name: '销量',\n type: 'bar',\n data: [10, 20, 30]\n }]\n };\n barChart.setOption(barOption);\n\n \u002F\u002F 折线图\n var lineChart = echarts.init(document.getElementById('lineChart'));\n var lineOption = {\n title: { text: '月销售额' },\n tooltip: { trigger: 'axis' },\n xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月'] },\n yAxis: { type: 'value' },\n series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10] }]\n };\n lineChart.setOption(lineOption);\n\n \u002F\u002F 雷达图\n var radarChart = echarts.init(document.getElementById('radarChart'));\n var radarOption = {\n title: { text: '雷达图示例' },\n radar: {\n indicator: [\n { name: '销售', max: 6500 },\n { name: '管理', max: 16000 },\n { name: '开发', max: 30000 },\n { name: '客户', max: 38000 },\n { name: '支持', max: 52000 }\n ]\n },\n series: [{\n type: 'radar',\n data: [{\n value: [4300, 10000, 28000, 35000, 50000],\n name: '预算分配'\n }]\n }]\n };\n radarChart.setOption(radarOption);\n\n \u002F\u002F 地图\n var mapChart = echarts.init(document.getElementById('mapChart'));\n var mapOption = {\n title: { text: '全国分布' },\n tooltip: { trigger: 'item' },\n visualMap: {\n min: 0,\n max: 500,\n left: 'left',\n top: 'bottom',\n text: ['高', '低'],\n calculable: true\n },\n series: [{\n name: '随机数据',\n type: 'map',\n map: 'china',\n roam: false,\n data: [\n { name: '广东', value: Math.round(Math.random() * 1000) },\n { name: '北京', value: Math.round(Math.random() * 1000) },\n { name: '上海', value: Math.round(Math.random() * 1000) }\n ]\n }]\n };\n mapChart.setOption(mapOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 总结\n\n理解 ECharts 的核心概念对于有效使用这个强大的可视化库至关重要。通过熟悉 `option` 数据结构、各种基本配置项和不同坐标系的应用，你可以创建出多样化和美观的图表。希望这篇博客能帮助你更好地掌握 ECharts 的使用，发挥其强大功能。随着经验的积累，你可以逐步探索更复杂的图表和交互效果，提升数据可视化的水平。\n",{"id":55,"created_at":56,"updated_at":56,"code":57,"author_id":7,"book_id":4,"slug":58,"article_id":59,"title":60,"sort_order":55,"content":61,"status":12},149,"2024-10-09T14:17:15.332+08:00","bn8oA5Ke","绘制第一个简单图表-149",563,"绘制第一个简单图表","# 绘制第一个简单图表：ECharts 的基础入门\n\nECharts 是一个功能强大的数据可视化库，适用于创建各种类型的图表。在这篇文章中，我们将学习如何绘制第一个简单图表，包括基本的折线图和柱状图，同时了解如何配置图表的基本样式，如颜色、字体和大小等。\n\n## 一、安装 ECharts\n\n在开始之前，我们需要在项目中安装 ECharts。可以使用 CDN 或 npm 进行安装。这里我们将使用 CDN：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n将上述代码添加到 HTML 文件的 `\u003Chead>` 部分。\n\n## 二、创建基本的折线图\n\n### 1. 定义 HTML 结构\n\n首先，我们需要在 HTML 中定义一个用于显示图表的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"lineChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置折线图的 `option`\n\n下面是一个基本的折线图配置示例：\n\n```javascript\nvar lineChart = echarts.init(document.getElementById('lineChart'));\n\nvar lineOption = {\n title: {\n text: '月度销售额',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [{\n name: '销售额',\n type: 'line',\n data: [1200, 1800, 2100, 3000, 5000],\n itemStyle: {\n color: '#3398DB'\n },\n lineStyle: {\n width: 3\n },\n areaStyle: {} \u002F\u002F 显示面积\n }]\n};\n\nlineChart.setOption(lineOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含折线图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 折线图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制折线图\u003C\u002Fh1>\n \u003Cdiv id=\"lineChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var lineChart = echarts.init(document.getElementById('lineChart'));\n\n var lineOption = {\n title: {\n text: '月度销售额',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [{\n name: '销售额',\n type: 'line',\n data: [1200, 1800, 2100, 3000, 5000],\n itemStyle: {\n color: '#3398DB'\n },\n lineStyle: {\n width: 3\n },\n areaStyle: {}\n }]\n };\n\n lineChart.setOption(lineOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 三、创建基本的柱状图\n\n接下来，我们将创建一个简单的柱状图，展示不同产品的销售额。\n\n### 1. 定义 HTML 结构\n\n在 HTML 中，添加一个用于显示柱状图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"barChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置柱状图的 `option`\n\n下面是一个柱状图的配置示例：\n\n```javascript\nvar barChart = echarts.init(document.getElementById('barChart'));\n\nvar barOption = {\n title: {\n text: '产品销量',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n xAxis: {\n type: 'category',\n data: ['产品A', '产品B', '产品C', '产品D'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [{\n name: '销量',\n type: 'bar',\n data: [150, 230, 324, 218],\n itemStyle: {\n color: '#FF5733'\n }\n }]\n};\n\nbarChart.setOption(barOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含柱状图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 柱状图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制柱状图\u003C\u002Fh1>\n \u003Cdiv id=\"barChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var barChart = echarts.init(document.getElementById('barChart'));\n\n var barOption = {\n title: {\n text: '产品销量',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n xAxis: {\n type: 'category',\n data: ['产品A', '产品B', '产品C', '产品D'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [{\n name: '销量',\n type: 'bar',\n data: [150, 230, 324, 218],\n itemStyle: {\n color: '#FF5733'\n }\n }]\n };\n\n barChart.setOption(barOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、结合使用折线图和柱状图\n\n为了进一步了解 ECharts 的强大，我们可以在同一个页面中同时绘制折线图和柱状图。\n\n### 1. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，展示折线图和柱状图的结合使用：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 综合示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制折线图和柱状图\u003C\u002Fh1>\n\n \u003Ch2>折线图\u003C\u002Fh2>\n \u003Cdiv id=\"lineChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Ch2>柱状图\u003C\u002Fh2>\n \u003Cdiv id=\"barChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n \u002F\u002F 折线图\n var lineChart = echarts.init(document.getElementById('lineChart'));\n var lineOption = {\n title: {\n text: '月度销售额',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [{\n name: '销售额',\n type: 'line',\n data: [1200, 1800, 2100, 3000, 5000],\n itemStyle: {\n color: '#3398DB'\n },\n lineStyle: {\n width: 3\n },\n areaStyle: {}\n }]\n };\n lineChart.setOption(lineOption);\n\n \u002F\u002F 柱状图\n var barChart = echarts.init(document.getElementById('barChart'));\n var barOption = {\n title: {\n text: '产品销量',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n xAxis: {\n type: 'category',\n data: ['产品A', '产品B', '产品C', '产品D'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [{\n name: '销量',\n type: 'bar',\n data: [150, 230, 324, 218],\n itemStyle: {\n color: '#FF5733'\n }\n }]\n };\n barChart.setOption(barOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 五、总结\n\n在本篇博客中，我们学习了如何使用 ECharts 绘制基本的折线图和柱状图。通过这些示例，你可以了解到 ECharts 的基本使用方法和配置选项，包括图表的样式、颜色、字体等。随着你对 ECharts 的深入了解，你将能够创建更复杂的可视化图表和交互效果，提升数据展示的效果。希望这些示例能帮助你顺利开始 ECharts 的学习之旅！\n",{"id":63,"created_at":64,"updated_at":64,"code":65,"author_id":7,"book_id":4,"slug":66,"article_id":67,"title":68,"sort_order":63,"content":69,"status":12},150,"2024-10-10T06:30:00.476+08:00","Rv8J4MKm","折线图-line-chart-150",564,"折线图 (Line Chart)","# ECharts 折线图：深入掌握绘制基本折线图\n\nECharts 是一个非常灵活且强大的数据可视化库，能够帮助我们创建多样的图表类型。本文将详细介绍如何使用 ECharts 绘制基本的折线图，处理多条折线、多轴以及数据标记等内容。\n\n## 一、折线图的基础知识\n\n折线图主要用于展示数据的变化趋势。ECharts 提供了丰富的配置选项，使得我们可以自定义图表的各个方面，包括颜色、标记、坐标轴等。\n\n### 1. 折线图的基本结构\n\n折线图的基本结构由以下几部分组成：\n\n- `title`：图表标题\n- `tooltip`：提示框\n- `legend`：图例\n- `xAxis`：横坐标\n- `yAxis`：纵坐标\n- `series`：数据系列\n\n## 二、安装 ECharts\n\n在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n将上述代码添加到 HTML 文件的 `\u003Chead>` 部分。\n\n## 三、创建基本的折线图\n\n### 1. 定义 HTML 结构\n\n首先，我们需要定义一个用于展示折线图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"lineChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置折线图的 `option`\n\n下面是一个基本的折线图配置示例：\n\n```javascript\nvar lineChart = echarts.init(document.getElementById('lineChart'));\n\nvar lineOption = {\n title: {\n text: '销售额变化趋势',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'line',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n },\n markPoint: {\n data: [\n { type: 'max', name: '最大值' },\n { type: 'min', name: '最小值' }\n ]\n },\n markLine: {\n data: [\n { type: 'average', name: '平均值' }\n ]\n }\n },\n {\n name: '产品B',\n type: 'line',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n },\n markPoint: {\n data: [\n { type: 'max', name: '最大值' },\n { type: 'min', name: '最小值' }\n ]\n },\n markLine: {\n data: [\n { type: 'average', name: '平均值' }\n ]\n }\n }\n ]\n};\n\nlineChart.setOption(lineOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含基本折线图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 折线图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制折线图\u003C\u002Fh1>\n \u003Cdiv id=\"lineChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var lineChart = echarts.init(document.getElementById('lineChart'));\n\n var lineOption = {\n title: {\n text: '销售额变化趋势',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'line',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n },\n markPoint: {\n data: [\n { type: 'max', name: '最大值' },\n { type: 'min', name: '最小值' }\n ]\n },\n markLine: {\n data: [\n { type: 'average', name: '平均值' }\n ]\n }\n },\n {\n name: '产品B',\n type: 'line',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n },\n markPoint: {\n data: [\n { type: 'max', name: '最大值' },\n { type: 'min', name: '最小值' }\n ]\n },\n markLine: {\n data: [\n { type: 'average', name: '平均值' }\n ]\n }\n }\n ]\n };\n\n lineChart.setOption(lineOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、处理多条折线图\n\n在上面的示例中，我们已经演示了如何绘制多条折线。在 `series` 数组中，每个对象代表一条折线，可以通过 `name` 属性指定每条折线的名称。\n\n### 1. 动态更新数据\n\n可以使用 ECharts 提供的 `setOption` 方法动态更新数据。以下是一个示例：\n\n```javascript\nfunction updateData() {\n var newDataA = [1500, 1800, 2100, 2500, 3200];\n var newDataB = [900, 1100, 1600, 2200, 2700];\n\n lineChart.setOption({\n series: [\n { data: newDataA },\n { data: newDataB }\n ]\n });\n}\n\n\u002F\u002F 5秒后更新数据\nsetTimeout(updateData, 5000);\n```\n\n## 五、使用多个坐标轴\n\nECharts 允许使用多个坐标轴，适用于不同的数据类型。在这里，我们将展示如何配置多个 Y 轴，以便于比较不同单位的数据。\n\n### 1. 完整示例\n\n以下是一个使用多个 Y 轴的折线图示例：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>多坐标轴折线图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>多坐标轴折线图\u003C\u002Fh1>\n \u003Cdiv id=\"multiAxisChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var multiAxisChart = echarts.init(document.getElementById('multiAxisChart'));\n\n var multiAxisOption = {\n title: {\n text: '产品销售与利润',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {\n data: ['销量', '利润'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月']\n },\n yAxis: [\n {\n type: 'value',\n name: '销量',\n position: 'left',\n axisLabel: {\n formatter: '{value} 件'\n }\n },\n {\n type: 'value',\n name: '利润',\n position: 'right',\n axisLabel: {\n formatter: '{value} 元'\n }\n }\n ],\n series: [\n {\n name: '销量',\n type: 'line',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n },\n yAxisIndex: 0 \u002F\u002F 使用左侧Y轴\n },\n {\n name: '利润',\n type: 'line',\n data: [300, 400, 500, 800, 1000],\n itemStyle: {\n color: '#3398DB'\n },\n yAxisIndex: 1 \u002F\u002F 使用右侧Y轴\n }\n ]\n };\n\n multiAxisChart.setOption(multiAxisOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 六、数据标记与交互\n\n在折线图中，我们可以使用 `markPoint` 和 `markLine` 来添加数据标记和参考线，使得图表更加丰富和易于理解。\n\n### 1. 数据标记\n\n`markPoint` 用于标记特定的数据点，可以用来突出显示最大值、最小值等关键数据。`markLine` 用于在图表中添加参考线，比如平均值线。\n\n```javascript\nmarkPoint: {\n data: [\n { type: 'max', name: '最大值' },\n { type: 'min', name: '最小值' }\n ]\n},\nmarkLine: {\n data: [\n { type: 'average', name: '平均值' }\n ]\n}\n```\n\n在上面的折线图示例中，我们已经添加了 `markPoint` 和 `markLine`，这可以帮助用户快速识别数据的关键点。\n\n## 七、总结\n\n通过本篇博客，我们深入了解了 ECharts 折线图的基本用法，包括如何绘制基本折线图、处理多条折线、多坐标轴和数据标记等内容。掌握这些基本概念后，你可以根据自己的需求创建更复杂和美观的图表。ECharts 的灵活性和丰富的配置选项将使你的数据可视化工作变得更加轻松和高效。希望本文对你的 ECharts 学习之旅有所帮助！\n",{"id":71,"created_at":72,"updated_at":72,"code":73,"author_id":7,"book_id":4,"slug":74,"article_id":75,"title":76,"sort_order":71,"content":77,"status":12},151,"2024-10-10T06:46:43.12+08:00","4N8mBGXA","柱状图-bar-chart-151",565,"柱状图 (Bar Chart)","# ECharts 柱状图：深入学习垂直和水平柱状图的配置\n\nECharts 是一个功能强大的数据可视化库，能够帮助开发者创建多种图表类型。在本文中，我们将深入探讨柱状图的使用，包括垂直柱状图和水平柱状图的配置方法，以及堆叠柱状图和分组柱状图的处理。\n\n## 一、柱状图的基础知识\n\n柱状图是最常见的数据可视化图表之一，通常用于比较不同类别的数据。ECharts 支持多种类型的柱状图，包括：\n\n- **垂直柱状图**：默认类型，常用于展示各类的数量。\n- **水平柱状图**：适用于数据项较多或名称较长的情况。\n- **堆叠柱状图**：用于展示各类的组成部分，便于比较整体和部分。\n- **分组柱状图**：用于比较多个系列的不同类别。\n\n## 二、安装 ECharts\n\n在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n## 三、创建基本的柱状图\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于展示柱状图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"barChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置垂直柱状图的 `option`\n\n以下是一个基本的垂直柱状图配置示例：\n\n```javascript\nvar barChart = echarts.init(document.getElementById('barChart'));\n\nvar barOption = {\n title: {\n text: '销售额比较',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n};\n\nbarChart.setOption(barOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含基本柱状图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 柱状图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制柱状图\u003C\u002Fh1>\n \u003Cdiv id=\"barChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var barChart = echarts.init(document.getElementById('barChart'));\n\n var barOption = {\n title: {\n text: '销售额比较',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n };\n\n barChart.setOption(barOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、创建水平柱状图\n\n水平柱状图适用于数据项较多的情况，可以通过将 `type` 设置为 `bar` 来实现。\n\n### 1. 配置水平柱状图的 `option`\n\n以下是一个水平柱状图的配置示例：\n\n```javascript\nvar horizontalBarChart = echarts.init(document.getElementById('horizontalBarChart'));\n\nvar horizontalBarOption = {\n title: {\n text: '销售额比较（水平）',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n};\n\nhorizontalBarChart.setOption(horizontalBarOption);\n```\n\n### 2. 完整的水平柱状图 HTML 示例\n\n```html\n\u003Cdiv id=\"horizontalBarChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n\u003Cscript>\n var horizontalBarChart = echarts.init(document.getElementById('horizontalBarChart'));\n\n var horizontalBarOption = {\n title: {\n text: '销售额比较（水平）',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n };\n\n horizontalBarChart.setOption(horizontalBarOption);\n\u003C\u002Fscript>\n```\n\n## 五、堆叠柱状图\n\n堆叠柱状图用于展示各类的组成部分，便于比较整体和部分。通过设置 `stack` 属性，可以实现堆叠效果。\n\n### 1. 配置堆叠柱状图的 `option`\n\n```javascript\nvar stackBarChart = echarts.init(document.getElementById('stackBarChart'));\n\nvar stackBarOption = {\n title: {\n text: '堆叠柱状图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n stack: '总量',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n stack: '总量',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n};\n\nstackBarChart.setOption(stackBarOption);\n```\n\n### 2. 完整的堆叠柱状图 HTML 示例\n\n```html\n\u003Cdiv id=\"stackBarChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n\u003Cscript>\n var stackBarChart = echarts.init(document.getElementById('stackBarChart'));\n\n var stackBarOption = {\n title: {\n text: '堆叠柱状图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n stack: '总量',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n stack: '总量',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n };\n\n stackBarChart.setOption(stackBarOption);\n\u003C\u002Fscript>\n```\n\n## 六、分组柱状图\n\n分组柱状图用于比较多个系列的不同类别。通过设置 `barCategoryGap` 和 `categoryGap` 属性，可以实现分组效果。\n\n### 1. 配置分组柱状图的 `option`\n\n```javascript\nvar groupBarChart = echarts.init(document.getElementById('groupBarChart'));\n\nvar groupBarOption = {\n title: {\n text: '分组柱状图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n};\n\ngroupBarChart.setOption(groupBarOption);\n```\n\n### 2. 完整的分组柱状图 HTML 示例\n\n```html\n\u003Cdiv id=\"groupBarChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n\u003Cscript>\n var groupBarChart = echarts.init(document.getElementById('groupBarChart'));\n\n var groupBarOption = {\n title: {\n text: '分组柱状图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['产品A', '产品B'],\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月'],\n axisLabel: {\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: '{value} 元',\n textStyle: {\n color: '#666',\n fontSize: 14\n }\n }\n },\n series: [\n {\n name: '产品A',\n type: 'bar',\n data: [1200, 1500, 2000, 2500, 3000],\n itemStyle: {\n color: '#FF5733'\n }\n },\n {\n name: '产品B',\n type: 'bar',\n data: [800, 1000, 1500, 2000, 2500],\n itemStyle: {\n color: '#3398DB'\n }\n }\n ]\n };\n\n groupBarChart.setOption(groupBarOption);\n\u003C\u002Fscript>\n```\n\n## 七、总结\n\n本文详细介绍了 ECharts 的柱状图，包括垂直柱状图、水平柱状图、堆叠柱状图和分组柱状图的配置方法。通过多个示例，您应该能够掌握柱状图的基本用法及其高级特性。ECharts 的灵活性使得您能够根据需求创建美观且功能强大的数据可视化图表。希望这篇博客能对您的 ECharts 学习之路有所帮助！\n",{"id":79,"created_at":80,"updated_at":80,"code":81,"author_id":7,"book_id":4,"slug":82,"article_id":83,"title":84,"sort_order":79,"content":85,"status":12},152,"2024-10-10T06:53:06.076+08:00","1l63xN8g","饼图-pie-chart-152",566,"饼图 (Pie Chart)","# ECharts 饼图：绘制基础饼图及其变种\n\nECharts 是一个功能强大的数据可视化库，能够轻松创建多种图表类型，其中饼图是最常用的图表之一。饼图通常用于展示各部分在整体中的占比，非常适合数据分类的可视化。在本文中，我们将深入探讨如何绘制基础饼图，并了解环形图和南丁格尔玫瑰图等变种的配置方法。\n\n## 一、饼图的基础知识\n\n饼图用于表示各部分相对于整体的比例关系。在 ECharts 中，饼图具有多种变种，例如环形图和南丁格尔玫瑰图，这些变种使得饼图能够展示更丰富的信息。\n\n## 二、安装 ECharts\n\n在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n## 三、绘制基础饼图\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于展示饼图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"pieChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置饼图的 `option`\n\n以下是一个基础饼图的配置示例：\n\n```javascript\nvar pieChart = echarts.init(document.getElementById('pieChart'));\n\nvar pieOption = {\n title: {\n text: '市场份额',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['苹果', '三星', '华为', '小米', '其他']\n },\n series: [\n {\n name: '手机品牌',\n type: 'pie',\n radius: '50%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '苹果' },\n { value: 310, name: '三星' },\n { value: 234, name: '华为' },\n { value: 135, name: '小米' },\n { value: 1548, name: '其他' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n },\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 2\n }\n }\n ]\n};\n\npieChart.setOption(pieOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含基本饼图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 饼图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制饼图\u003C\u002Fh1>\n \u003Cdiv id=\"pieChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var pieChart = echarts.init(document.getElementById('pieChart'));\n\n var pieOption = {\n title: {\n text: '市场份额',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['苹果', '三星', '华为', '小米', '其他']\n },\n series: [\n {\n name: '手机品牌',\n type: 'pie',\n radius: '50%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '苹果' },\n { value: 310, name: '三星' },\n { value: 234, name: '华为' },\n { value: 135, name: '小米' },\n { value: 1548, name: '其他' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n },\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 2\n }\n }\n ]\n };\n\n pieChart.setOption(pieOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、环形图\n\n环形图是饼图的一种变种，它将中心部分挖空，便于更清晰地展示数据。\n\n### 1. 配置环形图的 `option`\n\n在原饼图的基础上，将 `radius` 设置为一个数组，定义内外半径：\n\n```javascript\nvar ringChart = echarts.init(document.getElementById('ringChart'));\n\nvar ringOption = {\n title: {\n text: '市场份额（环形图）',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['苹果', '三星', '华为', '小米', '其他']\n },\n series: [\n {\n name: '手机品牌',\n type: 'pie',\n radius: ['40%', '70%'], \u002F\u002F 定义内外半径\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '苹果' },\n { value: 310, name: '三星' },\n { value: 234, name: '华为' },\n { value: 135, name: '小米' },\n { value: 1548, name: '其他' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n },\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 2\n }\n }\n ]\n};\n\nringChart.setOption(ringOption);\n```\n\n### 2. 完整的环形图 HTML 示例\n\n```html\n\u003Cdiv id=\"ringChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n\u003Cscript>\n var ringChart = echarts.init(document.getElementById('ringChart'));\n\n var ringOption = {\n title: {\n text: '市场份额（环形图）',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['苹果', '三星', '华为', '小米', '其他']\n },\n series: [\n {\n name: '手机品牌',\n type: 'pie',\n radius: ['40%', '70%'], \u002F\u002F 定义内外半径\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '苹果' },\n { value: 310, name: '三星' },\n { value: 234, name: '华为' },\n { value: 135, name: '小米' },\n { value: 1548, name: '其他' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n },\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 2\n }\n }\n ]\n };\n\n ringChart.setOption(ringOption);\n\u003C\u002Fscript>\n```\n\n## 五、南丁格尔玫瑰图\n\n南丁格尔玫瑰图是一种特殊的饼图，通过半径的变化表示数据的大小，适合展示分类数据的占比。\n\n### 1. 配置南丁格尔玫瑰图的 `option`\n\n为了绘制南丁格尔玫瑰图，可以在 `roseType` 属性中设置为 `'radius'`：\n\n```javascript\nvar roseChart = echarts.init(document.getElementById('roseChart'));\n\nvar roseOption = {\n title: {\n text: '南丁格尔玫瑰图',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['苹果', '三星', '华为', '小米', '其他']\n },\n series: [\n {\n name: '手机品牌',\n type: 'pie',\n radius: '65%',\n center: ['50%', '60%'],\n roseType: 'radius', \u002F\u002F 设置为南丁格尔玫瑰图\n data: [\n { value: 335, name: '苹果' },\n { value: 310, name: '三星' },\n { value: 234, name: '华为' },\n { value: 135, name: '小米' },\n { value: 1548, name: '其他' }\n ],\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 2\n }\n }\n ]\n};\n\nroseChart.setOption(roseOption);\n```\n\n### 2. 完整的南丁格尔玫瑰图 HTML 示例\n\n```html\n\u003Cdiv id=\"roseChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n\u003Cscript>\n var roseChart = echarts.init(document.getElementById('roseChart'));\n\n var roseOption = {\n title: {\n text: '南丁格尔玫瑰图',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['苹果', '三星', '华为', '小米', '其他']\n },\n series: [\n {\n name: '手机品牌',\n type: 'pie',\n radius: '65%',\n center: ['50%', '60%'],\n roseType: 'radius', \u002F\u002F 设置为南丁格尔玫瑰图\n data: [\n { value: 335, name: '苹果' },\n { value: 310, name: '三星' },\n { value: 234, name: '华为' },\n { value: 135, name: '小米' },\n { value: 1548, name: '其他' }\n ],\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 2\n }\n }\n ]\n };\n\n roseChart.setOption(roseOption);\n\u003C\u002Fscript>\n```\n\n## 六、总结\n\n通过本文，我们详细探讨了如何使用 ECharts 绘制基础饼图、环形图和南丁格尔玫瑰图。每种图表都有其独特的用途和配置方法，适合不同的数据展示需求。ECharts 的灵活性和易用性使得我们可以根据需求创建出美观且功能强大的可视化图表。希望这篇博客对您学习 ECharts 有所帮助！\n",{"id":87,"created_at":88,"updated_at":88,"code":89,"author_id":7,"book_id":4,"slug":90,"article_id":91,"title":92,"sort_order":87,"content":93,"status":12},153,"2024-10-10T06:53:39.128+08:00","7vXPvZ6Z","散点图-scatter-chart-153",567,"散点图 (Scatter Chart)","# ECharts 散点图：绘制基础散点图及其配置\n\n散点图是一种用于展示数据分布情况的图表，适合于揭示变量之间的关系。在 ECharts 中，绘制散点图非常简单且灵活，本文将带您深入了解如何绘制基本散点图，并学习如何配置散点图的尺寸、颜色和数据点形状。\n\n## 一、散点图的基础知识\n\n散点图通过在二维坐标系中绘制数据点来显示变量之间的关系。每个数据点的坐标对应于两个变量的值，通常用于探究数据的分布特征及其潜在的关联。\n\n## 二、安装 ECharts\n\n在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n## 三、绘制基本散点图\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于展示散点图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"scatterChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置散点图的 `option`\n\n以下是一个基础散点图的配置示例：\n\n```javascript\nvar scatterChart = echarts.init(document.getElementById('scatterChart'));\n\nvar scatterOption = {\n title: {\n text: '散点图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: ({c[0]}, {c[1]})'\n },\n xAxis: {\n type: 'value',\n name: 'X轴',\n nameLocation: 'middle',\n nameGap: 30\n },\n yAxis: {\n type: 'value',\n name: 'Y轴',\n nameLocation: 'middle',\n nameGap: 30\n },\n series: [\n {\n name: '散点数据',\n type: 'scatter',\n data: [\n [10, 20], [20, 35], [30, 15], [40, 40], \n [50, 20], [60, 25], [70, 30], [80, 45]\n ],\n itemStyle: {\n color: '#FF5733', \u002F\u002F 设置数据点颜色\n opacity: 0.8 \u002F\u002F 设置透明度\n },\n symbolSize: function (data) {\n return data[1] \u002F 2; \u002F\u002F 根据Y值动态设置点的大小\n }\n }\n ]\n};\n\nscatterChart.setOption(scatterOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含基本散点图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 散点图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制散点图\u003C\u002Fh1>\n \u003Cdiv id=\"scatterChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var scatterChart = echarts.init(document.getElementById('scatterChart'));\n\n var scatterOption = {\n title: {\n text: '散点图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: ({c[0]}, {c[1]})'\n },\n xAxis: {\n type: 'value',\n name: 'X轴',\n nameLocation: 'middle',\n nameGap: 30\n },\n yAxis: {\n type: 'value',\n name: 'Y轴',\n nameLocation: 'middle',\n nameGap: 30\n },\n series: [\n {\n name: '散点数据',\n type: 'scatter',\n data: [\n [10, 20], [20, 35], [30, 15], [40, 40], \n [50, 20], [60, 25], [70, 30], [80, 45]\n ],\n itemStyle: {\n color: '#FF5733', \u002F\u002F 设置数据点颜色\n opacity: 0.8 \u002F\u002F 设置透明度\n },\n symbolSize: function (data) {\n return data[1] \u002F 2; \u002F\u002F 根据Y值动态设置点的大小\n }\n }\n ]\n };\n\n scatterChart.setOption(scatterOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、配置散点图的尺寸、颜色和形状\n\n### 1. 配置数据点的大小\n\n您可以通过 `symbolSize` 属性来自定义数据点的大小。可以根据数据值动态设置点的大小：\n\n```javascript\nsymbolSize: function (data) {\n return data[1] \u002F 2; \u002F\u002F 根据Y值动态设置点的大小\n}\n```\n\n### 2. 配置数据点的颜色\n\n您可以使用 `itemStyle` 属性中的 `color` 来设置数据点的颜色。也可以使用回调函数根据数据动态设置颜色：\n\n```javascript\nitemStyle: {\n color: function (data) {\n return data[1] > 30 ? '#FF5733' : '#3398DB'; \u002F\u002F 根据Y值动态设置颜色\n }\n}\n```\n\n### 3. 配置数据点的形状\n\nECharts 支持多种数据点形状，可以通过 `symbol` 属性来定义。常用的形状包括 `'circle'`、`'rect'`、`'triangle'` 等。例如：\n\n```javascript\nseries: [\n {\n name: '散点数据',\n type: 'scatter',\n symbol: 'rect', \u002F\u002F 设置点的形状为矩形\n \u002F\u002F 其他配置...\n }\n]\n```\n\n## 五、完整示例\n\n以下是一个包含尺寸、颜色和形状配置的散点图完整示例：\n\n```html\n\u003Cdiv id=\"scatterChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n\u003Cscript>\n var scatterChart = echarts.init(document.getElementById('scatterChart'));\n\n var scatterOption = {\n title: {\n text: '散点图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: ({c[0]}, {c[1]})'\n },\n xAxis: {\n type: 'value',\n name: 'X轴',\n nameLocation: 'middle',\n nameGap: 30\n },\n yAxis: {\n type: 'value',\n name: 'Y轴',\n nameLocation: 'middle',\n nameGap: 30\n },\n series: [\n {\n name: '散点数据',\n type: 'scatter',\n data: [\n [10, 20], [20, 35], [30, 15], [40, 40], \n [50, 20], [60, 25], [70, 30], [80, 45]\n ],\n symbol: 'circle', \u002F\u002F 设置点的形状为圆形\n itemStyle: {\n color: function (data) {\n return data[1] > 30 ? '#FF5733' : '#3398DB'; \u002F\u002F 根据Y值动态设置颜色\n },\n opacity: 0.8\n },\n symbolSize: function (data) {\n return data[1] \u002F 2; \u002F\u002F 根据Y值动态设置点的大小\n }\n }\n ]\n };\n\n scatterChart.setOption(scatterOption);\n\u003C\u002Fscript>\n```\n\n## 六、总结\n\n本文详细介绍了如何使用 ECharts 绘制散点图，包括基本散点图的创建以及如何配置数据点的尺寸、颜色和形状。散点图可以有效地展示数据分布和变量之间的关系，ECharts 提供了丰富的配置选项，使得您能够灵活地进行数据可视化。希望这篇博客对您学习 ECharts 有所帮助！\n",{"id":95,"created_at":96,"updated_at":96,"code":97,"author_id":7,"book_id":4,"slug":98,"article_id":99,"title":100,"sort_order":95,"content":101,"status":12},154,"2024-10-10T06:53:51.202+08:00","Q18bd3Kx","k线图-candlestick-chart-154",568,"K线图 (Candlestick Chart)","# ECharts K线图：绘制 K 线图及金融数据展示\n\nK线图是一种常用于金融市场的图表类型，主要用于展示某一时间段内的价格波动。它通过开盘价、收盘价、最高价和最低价来反映价格变化，是技术分析中不可或缺的工具。在本文中，我们将深入了解如何使用 ECharts 绘制 K 线图，并解析其数据结构和相关配置。\n\n## 一、K线图的基础知识\n\nK线图（Candlestick Chart）通过绘制一系列“K线”来展示价格波动。每根 K 线由实体（蜡烛）和影线组成：\n\n- **开盘价**（Open）：某一时间段开始时的价格。\n- **收盘价**（Close）：某一时间段结束时的价格。\n- **最高价**（High）：某一时间段内的最高价格。\n- **最低价**（Low）：某一时间段内的最低价格。\n\n如果收盘价高于开盘价，则 K 线通常用一种颜色（如绿色）表示上涨；反之则用另一种颜色（如红色）表示下跌。\n\n## 二、安装 ECharts\n\n在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n## 三、绘制 K 线图\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于展示 K 线图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"candlestickChart\" style=\"width: 800px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置 K 线图的 `option`\n\n以下是一个 K 线图的基本配置示例：\n\n```javascript\nvar candlestickChart = echarts.init(document.getElementById('candlestickChart'));\n\nvar data = [\n ['2023-01-01', 820, 932, 901, 934],\n ['2023-01-02', 820, 932, 801, 934],\n ['2023-01-03', 920, 932, 901, 934],\n ['2023-01-04', 820, 932, 701, 934],\n ['2023-01-05', 820, 932, 801, 934],\n ['2023-01-06', 820, 932, 901, 934],\n ['2023-01-07', 820, 932, 801, 934]\n];\n\nvar candlestickOption = {\n title: {\n text: 'K线图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: function (params) {\n var date = params[0].name;\n var open = params[0].data[1];\n var close = params[0].data[2];\n var low = params[0].data[3];\n var high = params[0].data[4];\n return `${date}\u003Cbr\u002F>开盘价: ${open}\u003Cbr\u002F>收盘价: ${close}\u003Cbr\u002F>最低价: ${low}\u003Cbr\u002F>最高价: ${high}`;\n }\n },\n xAxis: {\n type: 'category',\n data: data.map(item => item[0]),\n boundaryGap: false\n },\n yAxis: {\n type: 'value',\n name: '价格',\n nameLocation: 'middle',\n nameGap: 30\n },\n series: [\n {\n name: 'K线',\n type: 'candlestick',\n data: data.map(item => [item[0], item[1], item[2], item[3], item[4]]),\n itemStyle: {\n color: '#06B800', \u002F\u002F 收盘价高于开盘价颜色\n color0: '#FA0000' \u002F\u002F 收盘价低于开盘价颜色\n },\n markLine: {\n data: [\n { type: 'average', name: '平均线' }\n ]\n }\n }\n ]\n};\n\ncandlestickChart.setOption(candlestickOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含 K 线图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts K线图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制 K线图\u003C\u002Fh1>\n \u003Cdiv id=\"candlestickChart\" style=\"width: 800px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var candlestickChart = echarts.init(document.getElementById('candlestickChart'));\n\n var data = [\n ['2023-01-01', 820, 932, 901, 934],\n ['2023-01-02', 820, 932, 801, 934],\n ['2023-01-03', 920, 932, 901, 934],\n ['2023-01-04', 820, 932, 701, 934],\n ['2023-01-05', 820, 932, 801, 934],\n ['2023-01-06', 820, 932, 901, 934],\n ['2023-01-07', 820, 932, 801, 934]\n ];\n\n var candlestickOption = {\n title: {\n text: 'K线图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: function (params) {\n var date = params[0].name;\n var open = params[0].data[1];\n var close = params[0].data[2];\n var low = params[0].data[3];\n var high = params[0].data[4];\n return `${date}\u003Cbr\u002F>开盘价: ${open}\u003Cbr\u002F>收盘价: ${close}\u003Cbr\u002F>最低价: ${low}\u003Cbr\u002F>最高价: ${high}`;\n }\n },\n xAxis: {\n type: 'category',\n data: data.map(item => item[0]),\n boundaryGap: false\n },\n yAxis: {\n type: 'value',\n name: '价格',\n nameLocation: 'middle',\n nameGap: 30\n },\n series: [\n {\n name: 'K线',\n type: 'candlestick',\n data: data.map(item => [item[0], item[1], item[2], item[3], item[4]]),\n itemStyle: {\n color: '#06B800', \u002F\u002F 收盘价高于开盘价颜色\n color0: '#FA0000' \u002F\u002F 收盘价低于开盘价颜色\n },\n markLine: {\n data: [\n { type: 'average', name: '平均线' }\n ]\n }\n }\n ]\n };\n\n candlestickChart.setOption(candlestickOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、数据结构解析\n\n在 K 线图中，数据的结构通常是一个包含时间、开盘价、收盘价、最低价和最高价的数组。每条 K 线对应一个数组元素，格式如下：\n\n```javascript\n[\n ['日期', 开盘价, 收盘价, 最低价, 最高价],\n ...\n]\n```\n\n例如：\n\n```javascript\n['2023-01-01', 820, 932, 901, 934]\n```\n\n- **日期**：对应 K 线的时间轴。\n- **开盘价**：时间段开始时的价格。\n- **收盘价**：时间段结束时的价格。\n- **最低价**：时间段内的最低价格。\n- **最高价**：时间段内的最高价格。\n\n## 五、添加辅助线\n\n您可以通过 `markLine` 属性为 K 线图添加辅助线，例如平均线。以下是如何在 K 线图中添加一条平均线：\n\n```javascript\nmarkLine: {\n data: [\n { type: 'average', name: '平均线' }\n ]\n}\n```\n\n这会在 K 线图中绘制一条表示价格平均值的水平线。\n\n## 六、总结\n\n本文详细介绍了如何使用 ECharts 绘制 K 线图，包括数据结构的解析和相关配置的使用。K 线图是金融数据可视化的强大工具，通过它可以有效地分析价格趋势。希望这篇博客能帮助您更好地理解和使用 ECharts 绘制 K 线图！\n",{"id":103,"created_at":104,"updated_at":104,"code":105,"author_id":7,"book_id":4,"slug":106,"article_id":107,"title":108,"sort_order":103,"content":109,"status":12},155,"2024-10-11T15:00:06.544+08:00","kbXvxa6M","雷达图-radar-chart-155",569,"雷达图 (Radar Chart)","# ECharts 雷达图：绘制雷达图及多数据项对比\n\n雷达图（Radar Chart）是一种用于展示多变量数据的图表类型，非常适合用来对比不同数据项的特征和表现。通过雷达图，我们可以直观地比较多个类别的数值，帮助我们快速识别优劣势。本文将深入探讨如何使用 ECharts 绘制雷达图，并详细介绍其配置项。\n\n## 一、雷达图的基础知识\n\n雷达图由多个轴线组成，每个轴线代表一个特征（或指标）。在这些轴线的交点上，可以绘制出一个多边形，以展示各数据项的表现。雷达图特别适合于展示各项指标之间的相对关系，常用于性能评估、产品对比等场景。\n\n## 二、安装 ECharts\n\n在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n## 三、绘制雷达图\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于展示雷达图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"radarChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置雷达图的 `option`\n\n以下是一个雷达图的基本配置示例：\n\n```javascript\nvar radarChart = echarts.init(document.getElementById('radarChart'));\n\nvar radarOption = {\n title: {\n text: '雷达图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['数据项1', '数据项2'],\n bottom: '10%'\n },\n radar: {\n indicator: [\n { name: '销售', max: 6500 },\n { name: '管理', max: 16000 },\n { name: '信息技术', max: 30000 },\n { name: '客服', max: 38000 },\n { name: '研发', max: 52000 },\n { name: '市场', max: 25000 }\n ],\n shape: 'circle',\n splitNumber: 4,\n name: {\n textStyle: {\n color: '#999'\n }\n },\n splitArea: {\n areaStyle: {\n color: ['rgba(255, 255, 255, 0.3)', 'rgba(0, 0, 0, 0.1)']\n }\n },\n splitLine: {\n lineStyle: {\n color: '#ddd'\n }\n }\n },\n series: [{\n name: '某地区',\n type: 'radar',\n data: [\n {\n value: [4300, 10000, 28000, 35000, 50000, 19000],\n name: '数据项1'\n },\n {\n value: [5000, 14000, 28000, 31000, 42000, 21000],\n name: '数据项2'\n }\n ],\n areaStyle: {\n normal: {\n opacity: 0.5\n }\n }\n }]\n};\n\nradarChart.setOption(radarOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含雷达图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 雷达图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制雷达图\u003C\u002Fh1>\n \u003Cdiv id=\"radarChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var radarChart = echarts.init(document.getElementById('radarChart'));\n\n var radarOption = {\n title: {\n text: '雷达图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item'\n },\n legend: {\n data: ['数据项1', '数据项2'],\n bottom: '10%'\n },\n radar: {\n indicator: [\n { name: '销售', max: 6500 },\n { name: '管理', max: 16000 },\n { name: '信息技术', max: 30000 },\n { name: '客服', max: 38000 },\n { name: '研发', max: 52000 },\n { name: '市场', max: 25000 }\n ],\n shape: 'circle',\n splitNumber: 4,\n name: {\n textStyle: {\n color: '#999'\n }\n },\n splitArea: {\n areaStyle: {\n color: ['rgba(255, 255, 255, 0.3)', 'rgba(0, 0, 0, 0.1)']\n }\n },\n splitLine: {\n lineStyle: {\n color: '#ddd'\n }\n }\n },\n series: [{\n name: '某地区',\n type: 'radar',\n data: [\n {\n value: [4300, 10000, 28000, 35000, 50000, 19000],\n name: '数据项1'\n },\n {\n value: [5000, 14000, 28000, 31000, 42000, 21000],\n name: '数据项2'\n }\n ],\n areaStyle: {\n normal: {\n opacity: 0.5\n }\n }\n }]\n };\n\n radarChart.setOption(radarOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、雷达图的配置详解\n\n### 1. 雷达图的指示器\n\n在雷达图中，`indicator` 数组用于定义各个特征（轴线）。每个对象包含以下属性：\n\n- **name**：特征名称。\n- **max**：该特征的最大值。\n\n例如：\n\n```javascript\nindicator: [\n { name: '销售', max: 6500 },\n { name: '管理', max: 16000 },\n { name: '信息技术', max: 30000 },\n { name: '客服', max: 38000 },\n { name: '研发', max: 52000 },\n { name: '市场', max: 25000 }\n]\n```\n\n### 2. 数据的配置\n\n`series` 数组用于定义雷达图的数据。每个数据项包含以下属性：\n\n- **value**：该数据项在各个特征上的值，顺序要与 `indicator` 中的特征顺序一致。\n- **name**：数据项的名称。\n\n例如：\n\n```javascript\ndata: [\n {\n value: [4300, 10000, 28000, 35000, 50000, 19000],\n name: '数据项1'\n },\n {\n value: [5000, 14000, 28000, 31000, 42000, 21000],\n name: '数据项2'\n }\n]\n```\n\n### 3. 轴线、区域和线条的样式\n\n可以通过配置 `radar` 中的各个样式属性来改变雷达图的外观：\n\n- **splitLine**：配置分割线的样式。\n- **splitArea**：配置分割区域的样式。\n- **name**：配置特征名称的样式。\n\n例如：\n\n```javascript\nsplitLine: {\n lineStyle: {\n color: '#ddd'\n }\n},\nsplitArea: {\n areaStyle: {\n color: ['rgba(255, 255, 255, 0.3)', 'rgba(0, 0, 0, 0.1)']\n }\n},\nname: {\n textStyle: {\n color: '#999'\n }\n}\n```\n\n## 五、添加辅助线\n\n如果需要在雷达图上添加辅助线（如平均线），可以通过 `markLine` 属性进行配置。以下是一个示例：\n\n```javascript\nmarkLine: {\n data: [\n { type: 'average', name: '平均值' }\n ]\n}\n```\n\n## 六、总结\n\n本文详细介绍了如何使用 ECharts 绘制雷达图，包括雷达图的基本配置、数据结构解析及样式自定义。雷达图作为一种多维数据展示的有效工具，能够帮助我们清晰地比较和分析不同数据项之间的特征。希望这篇博客能帮助您更好地理解和使用 ECharts 绘制雷达图！\n",{"id":111,"created_at":112,"updated_at":112,"code":113,"author_id":7,"book_id":4,"slug":114,"article_id":115,"title":116,"sort_order":111,"content":117,"status":12},156,"2024-10-11T15:02:03.541+08:00","Lb6GzjKe","地图-map-156",570,"地图 (Map)","# ECharts 地图：使用地理坐标系绘制地图及第三方地图库的集成\n\nECharts 提供了强大的地图功能，可以方便地进行地理数据的可视化展示。通过地理坐标系，用户可以绘制各种地图并展示地理信息。在本文中，我们将深入探讨如何使用 ECharts 绘制地图，并结合第三方地图库（如高德地图和百度地图）进行定制化地图开发。\n\n## 一、ECharts 地图的基础知识\n\nECharts 地图功能允许用户展示地理数据，通常用于显示区域数据、统计数据或标记位置信息。ECharts 支持多种地图类型，包括中国地图、世界地图以及自定义地图。使用地理坐标系，我们可以非常方便地在地图上添加标记、区域填充和数据图层。\n\n## 二、安装 ECharts 和地图组件\n\n在使用 ECharts 地图功能之前，请确保在项目中引入 ECharts 和地图组件。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fmap\u002Fjs\u002Fchina.js\">\u003C\u002Fscript>\n```\n\n## 三、绘制基本地图\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于展示地图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"mapChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置地图的 `option`\n\n以下是一个绘制中国地图的基本配置示例：\n\n```javascript\nvar mapChart = echarts.init(document.getElementById('mapChart'));\n\nvar mapOption = {\n title: {\n text: '中国地图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{b}: {c}'\n },\n visualMap: {\n min: 0,\n max: 100,\n left: 'left',\n top: 'bottom',\n text: ['高', '低'],\n realtime: false,\n calculable: true,\n inRange: {\n color: ['#ffffff', '#ff0000']\n }\n },\n series: [{\n name: '随机数据',\n type: 'map',\n mapType: 'china',\n roam: true,\n data: [\n { name: '广东', value: Math.round(Math.random() * 100) },\n { name: '北京', value: Math.round(Math.random() * 100) },\n { name: '上海', value: Math.round(Math.random() * 100) },\n { name: '江苏', value: Math.round(Math.random() * 100) },\n { name: '浙江', value: Math.round(Math.random() * 100) },\n { name: '四川', value: Math.round(Math.random() * 100) }\n ],\n itemStyle: {\n normal: {\n areaColor: '#f3f3f3',\n borderColor: '#fff'\n },\n emphasis: {\n areaColor: '#ffcc00'\n }\n }\n }]\n};\n\nmapChart.setOption(mapOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含地图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 地图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fmap\u002Fjs\u002Fchina.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制中国地图\u003C\u002Fh1>\n \u003Cdiv id=\"mapChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var mapChart = echarts.init(document.getElementById('mapChart'));\n\n var mapOption = {\n title: {\n text: '中国地图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{b}: {c}'\n },\n visualMap: {\n min: 0,\n max: 100,\n left: 'left',\n top: 'bottom',\n text: ['高', '低'],\n realtime: false,\n calculable: true,\n inRange: {\n color: ['#ffffff', '#ff0000']\n }\n },\n series: [{\n name: '随机数据',\n type: 'map',\n mapType: 'china',\n roam: true,\n data: [\n { name: '广东', value: Math.round(Math.random() * 100) },\n { name: '北京', value: Math.round(Math.random() * 100) },\n { name: '上海', value: Math.round(Math.random() * 100) },\n { name: '江苏', value: Math.round(Math.random() * 100) },\n { name: '浙江', value: Math.round(Math.random() * 100) },\n { name: '四川', value: Math.round(Math.random() * 100) }\n ],\n itemStyle: {\n normal: {\n areaColor: '#f3f3f3',\n borderColor: '#fff'\n },\n emphasis: {\n areaColor: '#ffcc00'\n }\n }\n }]\n };\n\n mapChart.setOption(mapOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、地图的配置详解\n\n### 1. 地图的基本配置\n\n- **title**：用于设置地图的标题。\n- **tooltip**：用于展示数据项的提示框。\n- **visualMap**：用于设置数据的视觉映射，控制颜色和范围。\n\n### 2. 地图的系列数据\n\n`series` 数组用于定义地图的数据。每个对象包含以下属性：\n\n- **name**：系列名称。\n- **type**：图表类型（此处为 `map`）。\n- **mapType**：地图类型（如 `china`）。\n- **roam**：是否允许缩放和平移。\n- **data**：包含各区域的数据，可以设置区域名称和对应的值。\n\n### 3. 自定义区域样式\n\n通过 `itemStyle` 属性自定义区域的样式，包括常态样式和高亮样式：\n\n```javascript\nitemStyle: {\n normal: {\n areaColor: '#f3f3f3',\n borderColor: '#fff'\n },\n emphasis: {\n areaColor: '#ffcc00'\n }\n}\n```\n\n## 五、结合第三方地图库（如高德地图、百度地图）\n\nECharts 支持与第三方地图库结合进行地图的定制化开发。以高德地图为例，以下是将高德地图与 ECharts 结合的步骤：\n\n### 1. 引入高德地图 API\n\n在 HTML 文件中引入高德地图的 JavaScript API：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fwebapi.amap.com\u002Fmaps\u002Fapi.js?key=YOUR_KEY\">\u003C\u002Fscript>\n```\n\n将 `YOUR_KEY` 替换为您申请的高德地图 API 密钥。\n\n### 2. 配置 ECharts 使用高德地图\n\n通过设置 `geo` 属性来配置 ECharts 使用高德地图：\n\n```javascript\nvar geoOption = {\n geo: {\n map: 'china',\n roam: true,\n center: [104.114129, 37.550339],\n zoom: 5,\n roam: true,\n label: {\n show: true,\n color: '#fff'\n },\n itemStyle: {\n normal: {\n areaColor: '#f3f3f3',\n borderColor: '#fff'\n },\n emphasis: {\n areaColor: '#ffcc00'\n }\n }\n },\n series: [{\n name: '随机数据',\n type: 'map',\n mapType: 'china',\n data: [\n { name: '广东', value: Math.round(Math.random() * 100) },\n { name: '北京', value: Math.round(Math.random() * 100) },\n \u002F\u002F ...\n ]\n }]\n};\n\nmapChart.setOption(geoOption);\n```\n\n### 3. 自定义地图样式和功能\n\n通过高德地图 API，您可以实现更多定制化的功能，如标记、路径规划、信息窗等。\n\n## 六、总结\n\n本文详细介绍了如何使用 ECharts 绘制地图，包括基本地图的创建、地图配置的详细解析，以及与第三方地图库（如高德地图）的结合开发。ECharts 的地图功能非常强大，能够帮助我们更好地展示地理数据和信息。希望这篇博客能帮助您更好地理解和使用 ECharts 绘制地图！\n",{"id":119,"created_at":120,"updated_at":120,"code":121,"author_id":7,"book_id":4,"slug":122,"article_id":123,"title":124,"sort_order":119,"content":125,"status":12},157,"2024-10-11T15:02:39.684+08:00","lMK9YpK2","桑基图-sankey-diagram-157",571,"桑基图 (Sankey Diagram)","# ECharts 桑基图：绘制数据流动关系图\n\n桑基图（Sankey Diagram）是一种用于展示流动关系的图表，特别适合于表现能量、资金或物质等的流向与数量关系。桑基图通过节点和连接线的粗细来直观地表达数据的流动情况，非常适合于分析复杂系统中的资源流动。本文将详细介绍如何使用 ECharts 绘制桑基图，并讲解其配置方法和样式设置。\n\n## 一、桑基图的基础知识\n\n桑基图的特点在于流动的方向和大小可以通过线条的宽度表示，线的粗细代表流动量的大小，而节点则表示流动的源头和去向。桑基图不仅能直观地展示流向关系，还能帮助识别流动的主要来源和去向。\n\n## 二、安装 ECharts\n\n在使用 ECharts 桑基图之前，首先确保在项目中引入 ECharts。可以通过 CDN 进行引入：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n## 三、绘制基本的桑基图\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于展示桑基图的 `\u003Cdiv>` 容器：\n\n```html\n\u003Cdiv id=\"sankeyChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n```\n\n### 2. 配置桑基图的 `option`\n\n以下是一个绘制基本桑基图的配置示例：\n\n```javascript\nvar sankeyChart = echarts.init(document.getElementById('sankeyChart'));\n\nvar sankeyOption = {\n title: {\n text: '桑基图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{b}: {c}'\n },\n series: {\n type: 'sankey',\n layout: 'orient',\n data: [\n { name: '输入' },\n { name: '输出1' },\n { name: '输出2' },\n { name: '输出3' }\n ],\n links: [\n { source: '输入', target: '输出1', value: 8 },\n { source: '输入', target: '输出2', value: 6 },\n { source: '输入', target: '输出3', value: 4 }\n ],\n itemStyle: {\n normal: {\n borderColor: '#fff',\n borderWidth: 1,\n opacity: 0.8\n }\n },\n lineStyle: {\n normal: {\n color: '#aaa',\n opacity: 0.5,\n curveness: 0.5\n }\n }\n }\n};\n\nsankeyChart.setOption(sankeyOption);\n```\n\n### 3. 完整的 HTML 代码示例\n\n以下是完整的 HTML 文件代码，包含桑基图的创建和渲染：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 桑基图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制桑基图\u003C\u002Fh1>\n \u003Cdiv id=\"sankeyChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var sankeyChart = echarts.init(document.getElementById('sankeyChart'));\n\n var sankeyOption = {\n title: {\n text: '桑基图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{b}: {c}'\n },\n series: {\n type: 'sankey',\n layout: 'orient',\n data: [\n { name: '输入' },\n { name: '输出1' },\n { name: '输出2' },\n { name: '输出3' }\n ],\n links: [\n { source: '输入', target: '输出1', value: 8 },\n { source: '输入', target: '输出2', value: 6 },\n { source: '输入', target: '输出3', value: 4 }\n ],\n itemStyle: {\n normal: {\n borderColor: '#fff',\n borderWidth: 1,\n opacity: 0.8\n }\n },\n lineStyle: {\n normal: {\n color: '#aaa',\n opacity: 0.5,\n curveness: 0.5\n }\n }\n }\n };\n\n sankeyChart.setOption(sankeyOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、桑基图的配置详解\n\n### 1. 节点和链接的配置\n\n- **data**：节点数据，用于定义桑基图中的所有节点。每个节点可以有一个 `name` 属性。\n- **links**：链接数据，用于定义节点之间的流动关系。每个链接包含以下属性：\n - **source**：流动的起始节点。\n - **target**：流动的目标节点。\n - **value**：流动的数量。\n\n### 2. 节点样式配置\n\n通过 `itemStyle` 属性可以自定义节点的样式：\n\n```javascript\nitemStyle: {\n normal: {\n borderColor: '#fff',\n borderWidth: 1,\n opacity: 0.8\n }\n}\n```\n\n### 3. 链接样式配置\n\n通过 `lineStyle` 属性可以自定义链接的样式：\n\n```javascript\nlineStyle: {\n normal: {\n color: '#aaa',\n opacity: 0.5,\n curveness: 0.5\n }\n}\n```\n\n- **color**：链接的颜色。\n- **opacity**：链接的透明度。\n- **curveness**：链接的曲线度，值越大曲线越明显。\n\n## 五、增加交互性和动态效果\n\n### 1. 添加工具提示\n\n工具提示可以通过 `tooltip` 属性配置，使用户在鼠标悬停时看到详细信息：\n\n```javascript\ntooltip: {\n trigger: 'item',\n formatter: function (params) {\n return `${params.data.source} → ${params.data.target}\u003Cbr \u002F>流动量: ${params.data.value}`;\n }\n}\n```\n\n### 2. 动态更新数据\n\n如果需要动态更新桑基图的数据，可以通过 `setOption` 方法重新设置新的数据。例如，增加一个新的输出节点：\n\n```javascript\nsankeyChart.setOption({\n series: {\n data: [\n { name: '输入' },\n { name: '输出1' },\n { name: '输出2' },\n { name: '输出3' },\n { name: '输出4' } \u002F\u002F 新增节点\n ],\n links: [\n { source: '输入', target: '输出1', value: 8 },\n { source: '输入', target: '输出2', value: 6 },\n { source: '输入', target: '输出3', value: 4 },\n { source: '输入', target: '输出4', value: 5 } \u002F\u002F 新增链接\n ]\n }\n});\n```\n\n## 六、总结\n\n本文详细介绍了如何使用 ECharts 绘制桑基图，包括基本桑基图的创建、节点和链接的配置、样式设置及交互效果的增强。桑基图是一种直观、易于理解的数据可视化工具，适合于展示各种流动关系。希望这篇博客能够帮助您掌握 ECharts 中桑基图的使用！\n",{"id":127,"created_at":128,"updated_at":128,"code":129,"author_id":7,"book_id":4,"slug":130,"article_id":131,"title":132,"sort_order":127,"content":133,"status":12},158,"2024-10-12T14:06:07.881+08:00","7WKlGPXm","漏斗图-funnel-chart-158",572,"漏斗图 (Funnel Chart)","# ECharts 漏斗图：展示转化率数据的直观方式\n\n漏斗图（Funnel Chart）是一种常用的数据可视化工具，特别适合展示逐渐减少的数据流，通常用于转化率分析或销售流程展示。例如，从潜在客户到实际购买的各个阶段，漏斗图通过不同宽度的图层清晰地展现每一层数据的比例变化。\n\n本文将详细介绍如何使用 ECharts 绘制漏斗图，涵盖其配置方法、层次关系的定义和样式的调整，并提供详细的示例代码和使用技巧。\n\n## 一、ECharts 安装\n\n在开始绘制漏斗图之前，需要确保已引入 ECharts。您可以通过 CDN 方式引入，也可以通过 npm 安装。\n\n### 1. 使用 CDN 引入 ECharts\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n```\n\n### 2. 使用 npm 安装\n\n在使用 npm 构建的项目中，您可以使用以下命令安装 ECharts：\n\n```bash\nnpm install echarts --save\n```\n\n然后在代码中引入：\n\n```javascript\nimport * as echarts from 'echarts';\n```\n\n## 二、漏斗图的基础结构\n\n漏斗图的核心是由一系列数据项组成的，每一项可以代表一个步骤、阶段或类别，通过图形的高度和宽度表现数据大小的不同。ECharts 中的漏斗图支持对数据排序、形状变化、颜色设置等操作。\n\n## 三、绘制基本的漏斗图\n\n接下来，我们将通过一个简单的漏斗图示例展示其基本用法。\n\n### 1. 定义 HTML 结构\n\n首先，定义一个用于容纳漏斗图的 `div` 容器：\n\n```html\n\u003Cdiv id=\"funnelChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n```\n\n### 2. 创建基本的漏斗图配置\n\n接下来，我们使用 ECharts 的 `option` 配置项创建漏斗图：\n\n```javascript\nvar funnelChart = echarts.init(document.getElementById('funnelChart'));\n\nvar funnelOption = {\n title: {\n text: '转化率分析 - 漏斗图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c}%'\n },\n legend: {\n left: 'left',\n data: ['展现', '点击', '访问', '咨询', '订单']\n },\n series: [\n {\n name: '转化率',\n type: 'funnel',\n left: '10%',\n top: 60,\n bottom: 60,\n width: '80%',\n min: 0,\n max: 100,\n minSize: '0%',\n maxSize: '100%',\n sort: 'descending',\n gap: 2,\n label: {\n show: true,\n position: 'inside'\n },\n labelLine: {\n length: 10,\n lineStyle: {\n width: 1,\n type: 'solid'\n }\n },\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 1\n },\n emphasis: {\n label: {\n fontSize: 20\n }\n },\n data: [\n { value: 60, name: '访问' },\n { value: 40, name: '咨询' },\n { value: 20, name: '订单' },\n { value: 80, name: '点击' },\n { value: 100, name: '展现' }\n ]\n }\n ]\n};\n\nfunnelChart.setOption(funnelOption);\n```\n\n### 3. 完整的 HTML 示例\n\n以下是完整的 HTML 代码，结合 ECharts 漏斗图的配置：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 漏斗图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>使用 ECharts 绘制漏斗图\u003C\u002Fh1>\n \u003Cdiv id=\"funnelChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var funnelChart = echarts.init(document.getElementById('funnelChart'));\n\n var funnelOption = {\n title: {\n text: '转化率分析 - 漏斗图示例',\n left: 'center',\n textStyle: {\n color: '#333',\n fontSize: 20\n }\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c}%'\n },\n legend: {\n left: 'left',\n data: ['展现', '点击', '访问', '咨询', '订单']\n },\n series: [\n {\n name: '转化率',\n type: 'funnel',\n left: '10%',\n top: 60,\n bottom: 60,\n width: '80%',\n min: 0,\n max: 100,\n minSize: '0%',\n maxSize: '100%',\n sort: 'descending',\n gap: 2,\n label: {\n show: true,\n position: 'inside'\n },\n labelLine: {\n length: 10,\n lineStyle: {\n width: 1,\n type: 'solid'\n }\n },\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 1\n },\n emphasis: {\n label: {\n fontSize: 20\n }\n },\n data: [\n { value: 60, name: '访问' },\n { value: 40, name: '咨询' },\n { value: 20, name: '订单' },\n { value: 80, name: '点击' },\n { value: 100, name: '展现' }\n ]\n }\n ]\n };\n\n funnelChart.setOption(funnelOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 4. 数据和配置项解释\n\n- **title**：设置图表的标题，并控制其位置和样式。\n- **tooltip**：启用鼠标悬停提示，展示详细的转化率信息。\n- **legend**：设置图例，便于用户识别不同的数据项。\n- **series**：定义漏斗图的主要数据，其中每个数据项代表一个转化阶段，`value` 为该阶段的百分比。\n - **sort**：定义数据的排序方式，`descending` 表示按值从大到小排序，`ascending` 则相反。\n - **gap**：设置每个层级之间的间距。\n - **label**：配置显示在漏斗图上的文本标签。\n\n## 四、漏斗图的样式调整\n\n通过 `itemStyle` 可以自定义漏斗图每个部分的颜色、边框和透明度。此外，ECharts 还提供了动态效果，如悬停时放大效果。\n\n### 1. 修改颜色和透明度\n\n可以通过设置 `itemStyle` 来调整每个数据项的颜色和透明度：\n\n```javascript\nitemStyle: {\n color: function (params) {\n var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];\n return colorList[params.dataIndex];\n },\n opacity: 0.8,\n borderColor: '#fff',\n borderWidth: 2\n}\n```\n\n### 2. 添加动态效果\n\n可以通过 `emphasis` 配置悬停时的数据项样式，如增大标签字体等：\n\n```javascript\nemphasis: {\n label: {\n fontSize: 20\n }\n}\n```\n\n### 3. 控制图表的大小\n\n通过 `minSize` 和 `maxSize` 来定义漏斗图的最小和最大尺寸：\n\n```javascript\nminSize: '10%', \u002F\u002F 最小值\nmaxSize: '100%' \u002F\u002F 最大值\n```\n\n## 五、处理层次关系\n\n漏斗图的核心是数据的层次关系，通常从最宽的“顶部”到最窄的“底部”。通过 `sort` 属性可以轻松定义数据的层次顺序。\n\n### 1. 自定义排序\n\n- **descending**：从大到小排序，适合展示逐级递减的转化过程。\n- **ascending**：从小到大排序，适合表现递增的过程或反向数据流。\n\n### 2. 自定义层次颜色\n\n通过 `itemStyle` 的 `color` 属性，可以为不同层次的漏斗段设置不同颜色。也可以使用回调函数根据数据值动态生成颜色。\n\n## 六、漏斗图中的交互性\n\nECharts 漏斗图支持丰富的交互效果，如悬停高亮、动态数据更新\n\n等。\n\n### 1. 实现数据更新\n\n假设你想在某个操作后更新漏斗图中的数据，只需使用 `setOption` 方法来重新设置数据：\n\n```javascript\nfunnelChart.setOption({\n series: [{\n data: [\n { value: 70, name: '访问' },\n { value: 50, name: '咨询' },\n { value: 30, name: '订单' },\n { value: 90, name: '点击' },\n { value: 120, name: '展现' }\n ]\n }]\n});\n```\n\n### 2. 实现点击事件\n\nECharts 支持图表的点击事件，可以通过 `on` 方法监听漏斗图的点击，并执行相应的操作：\n\n```javascript\nfunnelChart.on('click', function (params) {\n alert('你点击了: ' + params.name + '，转化率为: ' + params.value + '%');\n});\n```\n\n## 七、结合其他组件使用\n\n漏斗图可以与其他组件（如图例、数据视图、保存按钮等）结合使用，增强用户体验。\n\n### 1. 启用数据视图和保存功能\n\n通过 `toolbox` 可以启用保存图表和查看数据的功能：\n\n```javascript\ntoolbox: {\n feature: {\n dataView: { show: true, readOnly: false },\n saveAsImage: { show: true }\n }\n}\n```\n\n### 2. 添加数据缩放\n\n如果漏斗图中数据项较多，可以通过 `dataZoom` 组件添加数据缩放功能：\n\n```javascript\ndataZoom: {\n type: 'slider',\n show: true\n}\n```\n\n## 八、总结\n\n本文详细介绍了如何使用 ECharts 绘制漏斗图，涵盖了其基本配置、样式调整、交互效果和结合其他组件的使用。漏斗图是分析转化率和流程的重要工具，ECharts 提供了丰富的功能来定制和展示漏斗图，帮助用户更好地理解数据的层次和变化。\n",{"id":135,"created_at":136,"updated_at":136,"code":137,"author_id":7,"book_id":4,"slug":138,"article_id":139,"title":140,"sort_order":135,"content":141,"status":12},159,"2024-10-12T14:08:14.81+08:00","QmXR2BXz","热力图-heatmap-159",573,"热力图 (Heatmap)","# ECharts 热力图：展示数据密度和趋势\n\n热力图（Heatmap）是一种常用于展示数据密度、分布和趋势的图表。它通过不同的颜色深浅来表示数值大小，常用于数据的地理分布、矩阵数据展示、时间序列等场景。ECharts 提供了强大的热力图功能，能够支持自定义色阶、渐变效果及数据映射。\n\n本文将详细介绍如何使用 ECharts 绘制热力图，涵盖基础配置、色阶与渐变效果的设置以及结合其他组件的高级用法。文章提供了大量示例代码，便于读者理解和实践。\n\n## 一、热力图的基础结构\n\n热力图的核心是在一个二维区域内，将数据点的值通过颜色的深浅进行映射，展现不同区域数据的密度与趋势。在 ECharts 中，热力图通过 `series` 中的 `type` 来定义为 `\"heatmap\"` 类型。\n\n### 1. 热力图的基本配置结构\n\n```javascript\nvar option = {\n tooltip: {\n position: 'top',\n formatter: function (params) {\n return `X: ${params.value[0]}, Y: ${params.value[1]}\u003Cbr\u002F>Value: ${params.value[2]}`;\n }\n },\n animation: false,\n xAxis: {\n type: 'category',\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],\n splitArea: {\n show: true\n }\n },\n yAxis: {\n type: 'category',\n data: ['1', '2', '3', '4', '5', '6', '7'],\n splitArea: {\n show: true\n }\n },\n visualMap: {\n min: 0,\n max: 100,\n calculable: true,\n orient: 'horizontal',\n left: 'center',\n bottom: '15%',\n inRange: {\n color: ['#50a3ba', '#eac736', '#d94e5d']\n }\n },\n series: [{\n name: '热力图',\n type: 'heatmap',\n data: [[0, 0, 50], [1, 1, 80], [2, 2, 100], [3, 3, 60]],\n label: {\n show: true\n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }]\n};\n```\n\n在这个配置中：\n\n- **xAxis** 和 **yAxis** 定义了横纵坐标轴。通过 `category` 类型可以将其转化为类别轴，并根据数据填充坐标点。\n- **visualMap** 是热力图的核心部分，用于将数据值映射到特定颜色上。通过 `min` 和 `max` 定义数据值范围，并通过 `inRange.color` 设置渐变颜色。\n- **series** 中的 `data` 则包含热力图的主要数据。每个数据点是一个包含三个值的数组，表示 x 坐标、y 坐标和数据值。\n\n## 二、绘制基础热力图\n\n下面我们将演示如何使用 ECharts 绘制一个简单的热力图。\n\n### 1. HTML 结构\n\n首先，定义一个用于展示热力图的 `div` 容器：\n\n```html\n\u003Cdiv id=\"heatmapChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n```\n\n### 2. 热力图的 JavaScript 配置\n\n接下来，使用 JavaScript 代码生成热力图：\n\n```javascript\nvar heatmapChart = echarts.init(document.getElementById('heatmapChart'));\n\nvar heatmapOption = {\n tooltip: {\n position: 'top',\n formatter: function (params) {\n return `X: ${params.value[0]}, Y: ${params.value[1]}\u003Cbr\u002F>Value: ${params.value[2]}`;\n }\n },\n xAxis: {\n type: 'category',\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],\n splitArea: {\n show: true\n }\n },\n yAxis: {\n type: 'category',\n data: ['1', '2', '3', '4', '5', '6', '7'],\n splitArea: {\n show: true\n }\n },\n visualMap: {\n min: 0,\n max: 100,\n calculable: true,\n orient: 'horizontal',\n left: 'center',\n bottom: '15%',\n inRange: {\n color: ['#50a3ba', '#eac736', '#d94e5d']\n }\n },\n series: [{\n name: '热力图',\n type: 'heatmap',\n data: [\n [0, 0, 50], [0, 1, 70], [0, 2, 80],\n [1, 0, 90], [1, 1, 60], [1, 2, 30],\n [2, 0, 100], [2, 1, 50], [2, 2, 40]\n ],\n label: {\n show: true\n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }]\n};\n\nheatmapChart.setOption(heatmapOption);\n```\n\n### 3. 完整的 HTML 示例\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 热力图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>ECharts 热力图示例\u003C\u002Fh1>\n \u003Cdiv id=\"heatmapChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var heatmapChart = echarts.init(document.getElementById('heatmapChart'));\n\n var heatmapOption = {\n tooltip: {\n position: 'top',\n formatter: function (params) {\n return `X: ${params.value[0]}, Y: ${params.value[1]}\u003Cbr\u002F>Value: ${params.value[2]}`;\n }\n },\n xAxis: {\n type: 'category',\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],\n splitArea: {\n show: true\n }\n },\n yAxis: {\n type: 'category',\n data: ['1', '2', '3', '4', '5', '6', '7'],\n splitArea: {\n show: true\n }\n },\n visualMap: {\n min: 0,\n max: 100,\n calculable: true,\n orient: 'horizontal',\n left: 'center',\n bottom: '15%',\n inRange: {\n color: ['#50a3ba', '#eac736', '#d94e5d']\n }\n },\n series: [{\n name: '热力图',\n type: 'heatmap',\n data: [\n [0, 0, 50], [0, 1, 70], [0, 2, 80],\n [1, 0, 90], [1, 1, 60], [1, 2, 30],\n [2, 0, 100], [2, 1, 50], [2, 2, 40]\n ],\n label: {\n show: true\n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }]\n };\n\n heatmapChart.setOption(heatmapOption);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 三、理解色阶、渐变和数据映射\n\n在热力图中，色阶和渐变是核心部分。`visualMap` 组件用来控制数据值到颜色的映射。\n\n### 1. 色阶的定义\n\n在 `visualMap` 中，我们可以通过 `min` 和 `max` 来定义数据的范围，同时 `inRange` 可以设置颜色的变化范围。\n\n```javascript\nvisualMap: {\n min: 0,\n max: 100,\n inRange: {\n color: ['#50a3ba', '#eac736', '#d94e5d']\n }\n}\n```\n\n这段代码的意思是将数据从 0 到 100 映射为 `#50a3ba` 到 `#d94e5d` 的颜色渐变。\n\n### 2. 控制渐变效果\n\n通过 `inRange` 的 `color` 属性，可以定义颜色的渐变效果。比如，我们可以使用三种颜色来构建\n\n渐变效果，表示低值到高值的颜色变化。\n\n### 3. 数据映射与交互\n\nECharts 的热力图不仅支持静态数据展示，还能实时更新数据或添加交互。例如，用户点击某个数据点时可以高亮显示或触发某些事件。\n\n```javascript\nheatmapChart.on('click', function (params) {\n console.log(params.name + ': ' + params.value[2]);\n});\n```\n\n通过监听 `click` 事件，我们可以实现热力图的交互功能，让图表更加动态。\n\n## 四、结合其他组件使用\n\nECharts 的热力图还可以结合其他组件来增强功能。例如，可以添加图例、数据视图、缩放功能等。\n\n### 1. 添加图例和数据视图\n\n```javascript\ntoolbox: {\n feature: {\n dataView: { show: true, readOnly: false },\n saveAsImage: { show: true }\n }\n}\n```\n\n### 2. 添加数据缩放功能\n\n如果热力图数据量较大，可以通过 `dataZoom` 组件实现数据缩放。\n\n```javascript\ndataZoom: {\n type: 'slider',\n show: true\n}\n```\n\n## 五、总结\n\n本文详细介绍了如何使用 ECharts 构建热力图，包括基础配置、色阶与渐变、数据映射以及与其他组件的结合使用。通过 ECharts 强大的可视化功能，我们可以轻松绘制出美观且实用的热力图，用以展示数据的密度、趋势和分布。\n\n在实际应用中，热力图广泛用于地理信息系统、时间序列分析、数据可视化等领域。希望本文的示例和讲解能帮助你更好地掌握 ECharts 热力图的使用。\n",{"id":143,"created_at":144,"updated_at":144,"code":145,"author_id":7,"book_id":4,"slug":146,"article_id":147,"title":148,"sort_order":143,"content":149,"status":12},160,"2024-10-12T14:11:18.586+08:00","vOK2x58p","关系图-graph-160",574,"关系图 (Graph)","# ECharts 关系图 (Graph) 的使用详解\n\nECharts 提供的关系图（Graph）是一种非常强大的数据可视化工具，适合展示节点和连线之间的关系网络。它在社交网络分析、知识图谱展示、设备拓扑结构等场景中得到了广泛的应用。本文将详细介绍如何使用 ECharts 绘制关系图，掌握节点的大小、连线的颜色、力导向布局等配置，并提供多个详细的示例代码，帮助你理解并灵活应用。\n\n## 一、ECharts 关系图的核心概念\n\n关系图通过**节点（node）**和**边（edge）**展示网络中的各个元素和它们之间的连接。其常用的布局方式为**力导向布局**，即节点之间的距离和连线的张力可以根据某些规则自动调整，呈现出一种动态的平衡。\n\n### 1. 基础配置结构\n\nECharts 关系图的配置主要通过 `series` 中的 `type` 设置为 `\"graph\"` 来实现。下面是一个最基本的关系图配置示例：\n\n```javascript\nvar option = {\n tooltip: {},\n series: [\n {\n type: 'graph',\n layout: 'force',\n data: [\n {name: '节点1', value: 10},\n {name: '节点2', value: 20},\n {name: '节点3', value: 30}\n ],\n links: [\n {source: '节点1', target: '节点2'},\n {source: '节点2', target: '节点3'}\n ],\n roam: true, \u002F\u002F 开启缩放和平移功能\n label: {\n show: true,\n position: 'right'\n },\n force: {\n repulsion: 1000\n }\n }\n ]\n};\n```\n\n在这个基础结构中：\n\n- **data**：包含了关系图的节点，每个节点可以设置 `name` 和 `value` 等属性。\n- **links**：定义了节点之间的关系，`source` 表示起点，`target` 表示终点。\n- **layout**：设置为 `force` 表示使用力导向布局。\n- **roam**：开启鼠标缩放和平移功能，使用户能够更灵活地操作图表。\n\n## 二、绘制简单关系图\n\n接下来我们将从绘制一个简单的关系图开始。\n\n### 1. HTML 结构\n\n首先，我们需要一个 `div` 容器来承载我们的 ECharts 图表：\n\n```html\n\u003Cdiv id=\"graphChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n```\n\n### 2. 关系图的 JavaScript 配置\n\n然后，在 JavaScript 中使用 ECharts 的图表配置来渲染关系图：\n\n```javascript\nvar graphChart = echarts.init(document.getElementById('graphChart'));\n\nvar option = {\n tooltip: {\n formatter: function (params) {\n return `${params.data.name}: ${params.data.value}`;\n }\n },\n series: [\n {\n type: 'graph',\n layout: 'force',\n data: [\n {name: 'Node A', value: 10},\n {name: 'Node B', value: 15},\n {name: 'Node C', value: 20}\n ],\n links: [\n {source: 'Node A', target: 'Node B'},\n {source: 'Node B', target: 'Node C'}\n ],\n roam: true,\n label: {\n show: true,\n position: 'right'\n },\n force: {\n repulsion: 1000\n }\n }\n ]\n};\n\ngraphChart.setOption(option);\n```\n\n### 3. 完整的 HTML 示例\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 关系图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Ch1>ECharts 关系图示例\u003C\u002Fh1>\n \u003Cdiv id=\"graphChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var graphChart = echarts.init(document.getElementById('graphChart'));\n\n var option = {\n tooltip: {\n formatter: function (params) {\n return `${params.data.name}: ${params.data.value}`;\n }\n },\n series: [\n {\n type: 'graph',\n layout: 'force',\n data: [\n {name: 'Node A', value: 10},\n {name: 'Node B', value: 15},\n {name: 'Node C', value: 20}\n ],\n links: [\n {source: 'Node A', target: 'Node B'},\n {source: 'Node B', target: 'Node C'}\n ],\n roam: true,\n label: {\n show: true,\n position: 'right'\n },\n force: {\n repulsion: 1000\n }\n }\n ]\n };\n\n graphChart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 三、配置节点大小、连线颜色和布局\n\n关系图的灵活性在于可以对节点、连线、布局等进行细致的控制。\n\n### 1. 节点大小和样式\n\n通过 `symbolSize` 可以控制节点的大小，`itemStyle` 则可以控制节点的颜色等样式：\n\n```javascript\nvar option = {\n series: [\n {\n type: 'graph',\n layout: 'force',\n data: [\n {name: 'Node A', value: 10, symbolSize: 50, itemStyle: {color: 'red'}},\n {name: 'Node B', value: 15, symbolSize: 30, itemStyle: {color: 'blue'}},\n {name: 'Node C', value: 20, symbolSize: 40, itemStyle: {color: 'green'}}\n ],\n links: [\n {source: 'Node A', target: 'Node B'},\n {source: 'Node B', target: 'Node C'}\n ],\n label: {\n show: true\n },\n force: {\n repulsion: 1000\n }\n }\n ]\n};\n```\n\n在这个配置中：\n\n- **symbolSize**：定义了每个节点的大小。\n- **itemStyle**：为每个节点设置了不同的颜色。\n\n### 2. 连线的样式\n\n通过 `lineStyle` 可以控制连线的颜色、宽度和类型：\n\n```javascript\nvar option = {\n series: [\n {\n type: 'graph',\n layout: 'force',\n data: [\n {name: 'Node A', value: 10},\n {name: 'Node B', value: 15},\n {name: 'Node C', value: 20}\n ],\n links: [\n {source: 'Node A', target: 'Node B', lineStyle: {color: 'red', width: 2}},\n {source: 'Node B', target: 'Node C', lineStyle: {color: 'blue', width: 4}}\n ],\n label: {\n show: true\n },\n force: {\n repulsion: 1000\n }\n }\n ]\n};\n```\n\n在这个配置中，`lineStyle` 为不同的连线设置了颜色和宽度。\n\n### 3. 力导向布局\n\n力导向布局通过模拟物理弹簧系统，使节点在画布中自动排列。可以通过 `force` 属性来配置节点之间的排斥力和引力：\n\n```javascript\nvar option = {\n series: [\n {\n type: 'graph',\n layout: 'force',\n force: {\n repulsion: 2000, \u002F\u002F 节点之间的排斥力，数值越大节点距离越远\n edgeLength: [50, 200], \u002F\u002F 连线的长度范围\n gravity: 0.1 \u002F\u002F 引力系数，越大节点越靠近\n },\n data: [\n {name: 'Node A', value: 10},\n {name: 'Node B', value: 15},\n {name: 'Node C', value: 20}\n ],\n links: [\n {source: 'Node A', target: 'Node B'},\n {source: 'Node B', target: 'Node C'}\n ],\n label: {\n show: true\n }\n }\n ]\n};\n```\n\n通过配置 `force` 中的 `repulsion`、`edgeLength` 和 `gravity`，可以调整节点之间的距离和连线的长度，使布局更加自然和合理。\n\n## 四、结合其他组件的使用\n\n### 1. 鼠标交互效果\n\nECharts 允许我们为关系图设置交互效果，比如点击节点时高亮、显示数据或其他动态效果。\n\n```javascript\ngraphChart.on('click', function (params) {\n console.log(params.data.name + ': ' + params.data.value);\n});\n```\n\n通过监听 `click` 事件，可以实现节点的交互效果。\n\n### \n\n2. 添加图例和工具栏\n\n为了更好地展示关系图，还可以结合其他组件，如工具栏和图例：\n\n```javascript\ntoolbox: {\n feature: {\n dataView: { show: true, readOnly: false },\n saveAsImage: { show: true }\n }\n}\n```\n\n## 五、总结\n\n本文详细介绍了如何使用 ECharts 关系图展示节点和连线之间的关系，涵盖了从基本图表绘制到节点大小、连线颜色以及力导向布局的详细配置。通过这些配置，ECharts 可以帮助我们实现复杂的数据关系展示，为社交网络分析、设备拓扑结构等应用场景提供了极大的便利。\n\n希望本文的示例和讲解能帮助你掌握 ECharts 关系图的使用。如果在实际应用中有更多复杂场景，可以尝试结合其他图表类型和组件，进一步增强图表的交互性和表现力。\n",{"id":151,"created_at":152,"updated_at":152,"code":153,"author_id":7,"book_id":4,"slug":154,"article_id":155,"title":156,"sort_order":151,"content":157,"status":12},161,"2024-10-12T14:12:54.682+08:00","1l8O5RKD","时间序列图表-161",576,"时间序列图表","# ECharts 时间序列图表详解\n\n时间序列图表是数据可视化的重要组成部分，尤其是在展示动态数据变化、趋势分析和实时更新方面，使用时间轴的图表可以非常直观地展示随时间变化的指标。本文将深入探讨如何使用 ECharts 绘制时间序列图表，并结合实时数据更新技术，实现图表的动态更新。通过详细的示例代码，帮助你全面掌握时间序列图表的使用方法和技巧。\n\n## 一、时间序列图表的基本概念\n\n时间序列图表通常是以时间为 X 轴，数据值为 Y 轴，展示数据随时间变化的趋势。它在金融、监控系统、物联网、传感器数据等场景中非常常见。ECharts 支持多种类型的时间序列图表，包括折线图、柱状图等，这些图表可以通过时间轴展示数据的动态变化。\n\n### 1. 时间轴的使用\n\n在 ECharts 中，时间序列图表的核心是使用 `time` 类型的 X 轴。ECharts 支持自动解析和格式化时间数据。\n\n```javascript\nxAxis: {\n type: 'time',\n boundaryGap: false,\n axisLabel: {\n formatter: function (value) {\n return echarts.format.formatTime('yyyy-MM-dd', value);\n }\n }\n}\n```\n\n在上面的代码中，`type: 'time'` 指定 X 轴为时间类型，`axisLabel.formatter` 用于格式化时间轴上的显示标签。\n\n## 二、绘制基础时间序列图表\n\n### 1. 创建一个简单的时间序列折线图\n\n下面是一个基本的时间序列折线图示例，展示 2024 年 1 月至 6 月的某项指标变化：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 时间序列图表示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"timeSeriesChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var chartDom = document.getElementById('timeSeriesChart');\n var timeSeriesChart = echarts.init(chartDom);\n\n var option = {\n title: {\n text: '2024 年数据变化'\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'time',\n boundaryGap: false,\n axisLabel: {\n formatter: function (value) {\n return echarts.format.formatTime('yyyy-MM-dd', value);\n }\n }\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n name: '数据',\n type: 'line',\n data: [\n ['2024-01-01', 820],\n ['2024-02-01', 932],\n ['2024-03-01', 901],\n ['2024-04-01', 934],\n ['2024-05-01', 1290],\n ['2024-06-01', 1330],\n ['2024-07-01', 1320]\n ]\n }]\n };\n\n timeSeriesChart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中：\n\n- **xAxis.type**：设置为 `time` 表示时间轴。\n- **series.data**：数据的每一项是一个数组，数组的第一个值是时间，第二个值是对应的数值。\n\n### 2. 使用时间轴展示动态数据变化\n\n时间序列图表的最大优势在于可以展示数据随时间的动态变化。我们可以通过 `series` 来动态更新数据，模拟时间序列数据的变化：\n\n```javascript\nvar data = [];\nvar now = new Date();\nvar oneDay = 24 * 3600 * 1000;\nvar value = Math.random() * 1000;\n\nfunction randomData() {\n now = new Date(+now + oneDay);\n value = value + Math.random() * 21 - 10;\n return {\n name: now.toString(),\n value: [\n [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('\u002F'),\n Math.round(value)\n ]\n };\n}\n\nfor (var i = 0; i \u003C 1000; i++) {\n data.push(randomData());\n}\n\nvar option = {\n title: {\n text: '动态数据'\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'time',\n splitLine: {\n show: false\n }\n },\n yAxis: {\n type: 'value',\n boundaryGap: [0, '100%'],\n splitLine: {\n show: false\n }\n },\n series: [{\n name: '模拟数据',\n type: 'line',\n showSymbol: false,\n hoverAnimation: false,\n data: data\n }]\n};\n\nsetInterval(function () {\n for (var i = 0; i \u003C 5; i++) {\n data.shift();\n data.push(randomData());\n }\n\n timeSeriesChart.setOption({\n series: [{\n data: data\n }]\n });\n}, 1000);\n```\n\n在这个动态更新示例中：\n\n- **setInterval**：每秒更新一次数据，使图表实时变化。\n- **randomData**：用于生成随机的时间序列数据。\n- **series.data**：每次动态更新的数据会传递给 `setOption` 方法中的 `series.data` 属性。\n\n## 三、实时数据更新\n\nECharts 提供了丰富的动态更新机制，可以通过轮询、WebSocket 等方式将实时数据更新到图表中。下面我们介绍如何结合实时数据源来更新图表。\n\n### 1. 通过轮询实时更新数据\n\n最常见的实时数据更新方式是通过定时器定时请求后台接口的数据，并将其渲染到图表中。可以使用 `setInterval` 定时获取数据并更新：\n\n```javascript\nsetInterval(function () {\n fetch('https:\u002F\u002Fexample.com\u002Frealtime-data')\n .then(response => response.json())\n .then(newData => {\n timeSeriesChart.setOption({\n series: [{\n data: newData\n }]\n });\n });\n}, 5000);\n```\n\n### 2. 使用 WebSocket 实现实时更新\n\n如果你的数据源是实时的（如 WebSocket），可以直接监听 WebSocket 事件来更新图表：\n\n```javascript\nvar socket = new WebSocket('wss:\u002F\u002Fexample.com\u002Frealtime-data');\n\nsocket.onmessage = function (event) {\n var newData = JSON.parse(event.data);\n\n timeSeriesChart.setOption({\n series: [{\n data: newData\n }]\n });\n};\n```\n\n通过 WebSocket，你可以实现实时、高频的图表数据更新，非常适合需要展示动态变化的场景，如股票市场、监控系统等。\n\n## 四、时间序列图表的高级配置\n\n### 1. 数据平滑处理\n\n在时间序列图表中，数据波动较大时可以使用平滑处理，让图表看起来更加流畅：\n\n```javascript\nseries: [{\n type: 'line',\n smooth: true, \u002F\u002F 启用平滑曲线\n data: [\n ['2024-01-01', 820],\n ['2024-02-01', 932],\n ['2024-03-01', 901],\n \u002F\u002F ...\n ]\n}]\n```\n\n### 2. 数据区域缩放\n\n为了方便用户查看特定时间段的数据，可以使用数据区域缩放功能：\n\n```javascript\ndataZoom: [{\n type: 'slider', \u002F\u002F 支持滑动缩放\n start: 0,\n end: 100\n}]\n```\n\n通过添加 `dataZoom` 组件，用户可以使用滑块来缩放时间序列图表，查看不同时间范围内的数据。\n\n### 3. 结合其他组件使用\n\n你还可以结合图例、工具箱等组件来增强图表的功能。例如，添加工具栏以支持导出图表功能：\n\n```javascript\ntoolbox: {\n feature: {\n saveAsImage: { show: true },\n dataZoom: { show: true }\n }\n}\n```\n\n## 五、总结\n\n本文详细介绍了如何使用 ECharts 绘制时间序列图表，展示随时间变化的动态数据。通过使用时间轴、动态更新机制和高级配置，你可以灵活地展示实时数据，并增强用户的交互体验。\n\n### 主要内容总结：\n\n- **时间轴的使用**：时间类型的 X 轴配置。\n- **动态数据更新**：如何通过定时器或 WebSocket 实现实时数据更新。\n- **平滑处理和数据区域缩放**：让时间序列图表更加易读和交互性更强。\n- **结合其他组件**：通过工具箱和图例增强图表功能。\n\n通过这些功能，ECharts 可以帮助你构建强大的时间序列图表，适用于数据监控、趋势分析等场景。\n",{"id":159,"created_at":160,"updated_at":160,"code":161,"author_id":7,"book_id":4,"slug":162,"article_id":163,"title":164,"sort_order":159,"content":165,"status":12},162,"2024-10-12T14:15:06.679+08:00","OeKLPMKb","动态与交互-162",577,"动态与交互","# ECharts 动态与交互功能详解\n\nECharts 不仅是一个静态的数据可视化库，它还提供了丰富的动态效果和交互功能，如自动播放、图表刷新、鼠标事件、缩放、拖拽等。这些功能能够增强用户体验，特别是在数据实时更新、数据探索和交互分析等场景中显得尤为重要。本文将详细讲解如何在 ECharts 中实现图表的动态效果，以及如何配置交互功能。通过多样的示例代码，全面掌握 ECharts 的动态与交互功能。\n\n## 一、实现图表的动态效果\n\n### 1. 图表自动刷新\n\n自动刷新是动态数据展示中最常见的需求。可以通过 `setInterval` 定时刷新图表数据，使图表实现自动更新的效果。\n\n#### 示例：定时更新折线图\n\n下面是一个折线图通过定时器自动刷新数据的示例：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 动态折线图\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"dynamicChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var chartDom = document.getElementById('dynamicChart');\n var dynamicChart = echarts.init(chartDom);\n\n var data = [];\n var now = new Date();\n var oneSecond = 1000;\n var value = Math.random() * 1000;\n\n function randomData() {\n now = new Date(+now + oneSecond);\n value = value + Math.random() * 21 - 10;\n return {\n name: now.toString(),\n value: [\n [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('\u002F'),\n Math.round(value)\n ]\n };\n }\n\n for (var i = 0; i \u003C 100; i++) {\n data.push(randomData());\n }\n\n var option = {\n title: {\n text: '动态数据展示'\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'time',\n boundaryGap: false\n },\n yAxis: {\n type: 'value',\n boundaryGap: [0, '100%']\n },\n series: [{\n name: '随机数据',\n type: 'line',\n data: data\n }]\n };\n\n dynamicChart.setOption(option);\n\n setInterval(function () {\n data.shift();\n data.push(randomData());\n\n dynamicChart.setOption({\n series: [{\n data: data\n }]\n });\n }, 1000);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中，通过 `setInterval` 函数每秒生成新数据，并通过 `dynamicChart.setOption` 更新图表，实现数据的自动刷新效果。\n\n### 2. 自动播放功能\n\n在某些展示场景下，自动播放效果可以使数据按时间轴顺序播放，模拟动态变化过程。ECharts 提供了 `timeline` 组件来实现这一功能。\n\n#### 示例：使用时间轴自动播放\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 自动播放示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"timelineChart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var chartDom = document.getElementById('timelineChart');\n var timelineChart = echarts.init(chartDom);\n\n var option = {\n baseOption: {\n timeline: {\n axisType: 'category',\n autoPlay: true, \u002F\u002F 开启自动播放\n playInterval: 1000, \u002F\u002F 设置播放间隔时间\n data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05']\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'category',\n boundaryGap: false\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n name: '数据',\n type: 'line',\n data: [820, 932, 901, 934, 1290]\n }]\n },\n options: [\n { series: [{ data: [820, 932, 901, 934, 1290] }] },\n { series: [{ data: [720, 832, 801, 834, 1190] }] },\n { series: [{ data: [620, 732, 701, 734, 1090] }] },\n { series: [{ data: [520, 632, 601, 634, 990] }] },\n { series: [{ data: [420, 532, 501, 534, 890] }] }\n ]\n };\n\n timelineChart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中，`timeline` 组件设置为 `autoPlay: true`，图表会按照时间轴自动播放并展示不同时间点的数据。\n\n## 二、实现交互功能\n\n### 1. 鼠标悬停和点击事件\n\nECharts 支持多种鼠标事件，常见的有鼠标悬停（`mouseover`）和点击（`click`）事件。可以通过 `chart.on` 方法来监听这些事件并进行相应的交互操作。\n\n#### 示例：监听点击事件\n\n```javascript\ndynamicChart.on('click', function (params) {\n alert('你点击了' + params.name + '的数据点');\n});\n```\n\n通过监听 `click` 事件，用户点击图表上的数据点时会弹出相应的数据提示。\n\n### 2. 缩放与拖拽\n\nECharts 支持数据的缩放和拖拽功能，常用于地图、散点图和时间序列图表中。通过 `dataZoom` 组件可以实现图表的缩放交互。\n\n#### 示例：添加缩放交互\n\n```javascript\ndataZoom: [{\n type: 'inside',\n start: 0,\n end: 100\n}, {\n start: 0,\n end: 100\n}]\n```\n\n上面的代码为图表添加了一个内部缩放条，并允许用户通过拖动和滚动鼠标来缩放数据。\n\n### 3. 拖拽重新排序\n\n在 ECharts 中，某些图表如条形图可以支持拖拽重新排序，通过 `graphic` 组件实现。\n\n#### 示例：条形图的拖拽排序\n\n```html\n\u003Cscript>\n var barChart = echarts.init(document.getElementById('barChart'));\n\n var option = {\n title: {\n text: '可拖拽排序的柱状图'\n },\n tooltip: {\n trigger: 'axis'\n },\n xAxis: {\n type: 'category',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n type: 'bar',\n data: [5, 20, 36, 10, 10],\n draggable: true \u002F\u002F 开启拖拽\n }]\n };\n\n barChart.setOption(option);\n\u003C\u002Fscript>\n```\n\n用户可以拖动条形图的条形以改变它们的顺序，增强了交互体验。\n\n## 三、结合其他组件的交互\n\n### 1. 使用工具栏增强交互\n\n工具栏（`toolbox`）组件可以为用户提供保存图片、数据视图、数据缩放等功能，增强用户对图表的交互性。\n\n#### 示例：添加工具栏功能\n\n```javascript\ntoolbox: {\n feature: {\n saveAsImage: { show: true },\n dataView: { show: true, readOnly: false },\n magicType: { type: ['line', 'bar'] },\n restore: { show: true },\n dataZoom: { show: true }\n }\n}\n```\n\n通过工具栏，用户可以直接保存图表、查看数据、切换图表类型等，极大提高了用户的操作便利性。\n\n### 2. 图表联动\n\nECharts 支持多个图表之间的联动，用户可以通过操作一个图表来影响其他图表。常见的场景是多个图表展示相同数据的不同维度，通过联动操作可以让图表同步变化。\n\n#### 示例：两个图表联动\n\n```javascript\nvar chart1 = echarts.init(document.getElementById('chart1'));\nvar chart2 = echarts.init(document.getElementById('chart2'));\n\necharts.connect([chart1, chart2]);\n\nvar option1 = { \u002F* 第一个图表的配置 *\u002F };\nvar option2 = { \u002F* 第二个图表的配置 *\u002F };\n\n\n\nchart1.setOption(option1);\nchart2.setOption(option2);\n```\n\n通过 `echarts.connect([chart1, chart2])`，可以将两个图表连接在一起，当一个图表被缩放或拖动时，另一个图表也会做出相应的变化。\n\n## 四、总结\n\nECharts 提供了丰富的动态效果和交互功能，通过定时器、`timeline` 组件可以实现数据的自动更新和播放；通过鼠标事件、缩放、拖拽等可以增强用户的交互体验。结合工具栏和图表联动，ECharts 的交互性进一步提升，适用于多种数据展示和分析场景。\n\n### 主要功能总结：\n\n- **动态效果**：定时更新、自动播放。\n- **交互功能**：鼠标事件、缩放、拖拽。\n- **组件结合**：工具栏、图表联动。\n\n通过这些功能，ECharts 可以帮助开发者构建高度动态化、交互性强的数据可视化图表，满足复杂场景下的数据展示需求。\n",{"id":167,"created_at":168,"updated_at":168,"code":169,"author_id":7,"book_id":4,"slug":170,"article_id":171,"title":172,"sort_order":167,"content":173,"status":12},163,"2024-10-12T14:15:43.451+08:00","1VXnGwKq","数据处理与数据集-163",578,"数据处理与数据集","# ECharts 数据处理与 `dataset` 使用详解\n\nECharts 提供了强大的数据处理功能，其中 `dataset` 是一个专门用来处理数据的组件，可以帮助开发者更好地组织和管理大规模数据，并通过数据动态加载与切换来增强用户的交互体验。本文将详细介绍如何使用 `dataset` 进行数据处理，涵盖其所有属性及方法，并结合其他 ECharts 组件，提供多个详细的示例代码。\n\n## 一、什么是 `dataset`？\n\n`dataset` 是 ECharts 中用于存储和组织数据的容器。与传统的将数据直接写入 `series` 不同，`dataset` 能够将数据与图表配置分离开来，使得多个图表可以共享同一组数据。此外，`dataset` 还支持动态切换数据、数据过滤等操作，适用于大规模数据展示和复杂的数据处理场景。\n\n### `dataset` 的基本结构\n\n`dataset` 的结构通常由两部分组成：\n\n1. **`source`**：数据源，可以是二维数组、对象数组或者自定义的数据格式。\n2. **`dimensions`**：维度信息，用来定义数据集中每列的含义。\n\n基本结构如下：\n\n```javascript\ndataset: {\n source: [\n ['Product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5]\n ]\n}\n```\n\n### `dataset` 的优点\n\n- **数据与配置分离**：将数据存储在 `dataset` 中，而不是直接写入 `series`，有利于数据的重用和共享。\n- **动态数据切换**：支持通过交互或者代码动态切换数据源，适合展示不同时间、类别的数据。\n- **大规模数据处理**：适合处理大量数据，支持数据筛选、映射等操作。\n\n## 二、`dataset` 的基本使用\n\n### 1. 简单折线图的 `dataset` 示例\n\n在传统的 ECharts 使用中，数据通常直接定义在 `series` 中，而通过 `dataset`，我们可以将数据抽离出来，使得配置更为清晰且灵活。\n\n#### 示例：使用 `dataset` 绘制折线图\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts Dataset 示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"chart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var chart = echarts.init(document.getElementById('chart'));\n\n var option = {\n title: {\n text: 'ECharts Dataset 示例'\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {},\n dataset: {\n source: [\n ['Product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n { type: 'bar' },\n { type: 'bar' },\n { type: 'bar' }\n ]\n };\n\n chart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中，`dataset` 中的 `source` 定义了一个包含多个年份的产品销量数据。通过将数据与 `series` 分离，我们可以轻松地进行数据的管理和共享。\n\n### 2. `dimensions`：定义数据维度\n\n`dimensions` 用来定义数据集中的每一列的含义。使用 `dimensions` 可以明确地指出数据的含义，特别是在数据较为复杂时，这样可以避免 ECharts 自动推断维度出错。\n\n#### 示例：使用 `dimensions` 定义数据维度\n\n```javascript\ndataset: {\n dimensions: ['Product', '2015', '2016', '2017'],\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n```\n\n`dimensions` 指定了 `source` 中每一列的含义，这样可以更加清晰地展示数据结构，特别是在需要对数据进行映射、筛选等操作时非常有用。\n\n## 三、处理大规模数据\n\n当数据量较大时，`dataset` 提供了方便的数据处理能力，包括动态加载、数据过滤和映射等。\n\n### 1. 动态加载数据\n\n对于大规模数据，可以通过懒加载的方式动态加载数据，以避免一次性加载过多数据导致性能问题。ECharts 提供了 `dataZoom` 组件来实现局部数据加载。\n\n#### 示例：使用 `dataZoom` 进行动态数据加载\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 动态数据加载\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"chart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var chart = echarts.init(document.getElementById('chart'));\n\n var option = {\n title: {\n text: '动态数据加载示例'\n },\n dataset: {\n source: []\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'line' }],\n dataZoom: [\n {\n type: 'slider',\n start: 0,\n end: 10\n }\n ]\n };\n\n chart.setOption(option);\n\n \u002F\u002F 模拟异步数据加载\n setTimeout(function () {\n chart.setOption({\n dataset: {\n source: [\n ['日期', '销售额'],\n ['2024\u002F01\u002F01', 100],\n ['2024\u002F01\u002F02', 200],\n ['2024\u002F01\u002F03', 150],\n ['2024\u002F01\u002F04', 250],\n ['2024\u002F01\u002F05', 300],\n \u002F\u002F 后续数据...\n ]\n }\n });\n }, 2000); \u002F\u002F 模拟 2 秒后加载数据\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中，我们通过 `dataZoom` 实现了数据的局部加载。初始数据为空，模拟了异步数据加载的场景，通过 `setOption` 动态更新 `dataset` 数据。\n\n### 2. 数据映射与过滤\n\nECharts 支持通过 `encode` 对数据进行映射，方便我们根据维度来组织数据。同时，`dataset` 也支持数据过滤操作，可以通过特定条件筛选需要展示的数据。\n\n#### 示例：数据映射与过滤\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 数据映射与过滤\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"chart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var chart = echarts.init(document.getElementById('chart'));\n\n var option = {\n title: {\n text: '数据映射与过滤示例'\n },\n dataset: {\n source: [\n ['Product', 'Score', 'Amount'],\n ['Product A', 80, 120],\n ['Product B', 60, 50],\n ['Product C', 90, 100],\n ['Product D', 70, 130]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: { type: 'value' },\n series: [{\n type: 'bar',\n encode: {\n x: 'Product',\n y: 'Amount'\n }\n }]\n };\n\n chart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中，通过 `encode` 将 `Product` 映射为 `x` 轴，将 `Amount` 映射为 `y` 轴。这样的结构清晰而灵活，方便我们进行后续的数据处理与展示。\n\n## 四、结合其他组件的使用\n\nECharts 支持多种组件的组合使用，通过将 `dataset` 与其他组件结合，能创建出更复杂的可视化效果。\n\n### 示例：结合 `toolbox` 与 `dataset`\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 组件结合示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"chart\" style=\"width: 800px; height: 600px;\">\u003C\u002Fdiv>\n\n \u003Cscript>\n var chart = echarts.init(document.getElementById('chart'));\n\n var option = {\n title: {\n text: 'ECharts 组件结合示例'\n },\n toolbox: {\n feature: {\n saveAsImage: {}\n }\n },\n dataset: {\n source: [\n ['Product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n { type: 'bar' },\n { type: 'bar' },\n { type: 'bar' }\n ]\n };\n\n chart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中，使用 `toolbox` 添加了一个保存图表为图片的功能，同时通过 `dataset` 存储了产品销量数据，简化了数据的管理。\n\n## 五、总结\n\n通过以上内容，我们学习了 ECharts 中 `dataset` 的使用方法及其优点，了解了如何处理大规模数据，并结合其他组件实现动态加载和数据切换。以下是主要内容总结：\n\n- **`dataset` 组件**：用于组织和处理大规模数据，支持动态加载与数据切换。\n- **数据结构**：通过 `source` 定义数据，使用 `dimensions` 定义数据的维度。\n- **动态加载与过滤**：支持异步数据加载和数据的映射与过滤，方便进行复杂的数据展示。\n- **结合其他组件**：与 `toolbox`、`dataZoom` 等组件结合，增强图表的交互性和用户体验。\n\nECharts 的灵活性和强大功能使其成为数据可视化的重要工具，适用于多种数据展示需求。希望通过这篇文章，能够帮助读者更好地理解和使用 ECharts 进行数据处理与可视化。\n",{"id":175,"created_at":176,"updated_at":176,"code":177,"author_id":7,"book_id":4,"slug":178,"article_id":179,"title":180,"sort_order":175,"content":181,"status":12},164,"2024-10-12T14:18:21.065+08:00","bM80aPXA","echarts-与-vue-集成-164",579,"ECharts 与 Vue 集成","# ECharts 与 Vue 集成\n\nECharts 是一个强大的数据可视化库，而 Vue.js 是一个流行的前端框架。将这两者结合可以创建出富有交互性的可视化应用。本文将详细介绍如何将 ECharts 与 Vue.js 集成，使用 `vue-echarts` 组件来实现复杂的图表交互和响应式设计。\n\n## 一、ECharts 简介\n\nECharts 是一个开源的图表库，拥有丰富的图表类型和高性能的渲染能力。它支持多种交互功能，适合展示大量数据并提供多种可定制选项。\n\n## 二、Vue.js 简介\n\nVue.js 是一个渐进式的 JavaScript 框架，适合构建用户界面。其核心库关注视图层，容易上手并与其他库或项目进行整合。\n\n## 三、将 ECharts 与 Vue.js 集成\n\n在将 ECharts 与 Vue.js 集成时，我们可以使用 `vue-echarts` 组件。这个组件可以将 ECharts 图表作为 Vue 组件使用，从而利用 Vue 的响应式和组件化特性。\n\n### 1. 安装依赖\n\n首先，我们需要安装 `vue-echarts` 和 ECharts。使用 npm 安装它们：\n\n```bash\nnpm install vue-echarts echarts\n```\n\n### 2. 基本用法\n\n在 Vue 组件中使用 `vue-echarts` 非常简单。我们可以在模板中引入 `v-chart` 组件，并在 `script` 部分配置 ECharts 的选项。\n\n#### 示例：基本的折线图\n\n```html\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch2>基础折线图\u003C\u002Fh2>\n \u003Cv-chart :options=\"chartOptions\" style=\"width: 100%; height: 400px;\">\u003C\u002Fv-chart>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { defineComponent } from 'vue';\nimport { ECharts, use } from 'vue-echarts';\nimport 'echarts';\n\nexport default defineComponent({\n components: {\n 'v-chart': ECharts,\n },\n data() {\n return {\n chartOptions: {\n title: {\n text: 'ECharts 与 Vue 集成示例',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: [120, 132, 101, 134, 90, 230, 210],\n smooth: true,\n },\n ],\n },\n };\n },\n});\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\u002F* 组件样式 *\u002F\n\u003C\u002Fstyle>\n```\n\n在这个示例中，我们创建了一个基本的折线图。我们在 `data` 中定义了 `chartOptions`，并将其传递给 `v-chart` 组件。\n\n### 3. 响应式设计\n\nVue 的响应式特性使得图表可以根据数据的变化自动更新。我们可以动态更新 `chartOptions` 来实现图表的响应式效果。\n\n#### 示例：动态更新数据\n\n```html\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch2>动态折线图\u003C\u002Fh2>\n \u003Cv-chart :options=\"chartOptions\" style=\"width: 100%; height: 400px;\">\u003C\u002Fv-chart>\n \u003Cbutton @click=\"updateData\">更新数据\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { defineComponent, ref } from 'vue';\nimport { ECharts, use } from 'vue-echarts';\nimport 'echarts';\n\nexport default defineComponent({\n components: {\n 'v-chart': ECharts,\n },\n setup() {\n const chartOptions = ref({\n title: {\n text: '动态折线图',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: [120, 132, 101, 134, 90, 230, 210],\n smooth: true,\n },\n ],\n });\n\n const updateData = () => {\n chartOptions.value.series[0].data = [\n Math.random() * 300,\n Math.random() * 300,\n Math.random() * 300,\n Math.random() * 300,\n Math.random() * 300,\n Math.random() * 300,\n Math.random() * 300,\n ];\n };\n\n return {\n chartOptions,\n updateData,\n };\n },\n});\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\u002F* 组件样式 *\u002F\n\u003C\u002Fstyle>\n```\n\n在这个示例中，我们添加了一个按钮，通过点击按钮可以随机更新图表的数据。这展示了 Vue 的响应式特性和 `vue-echarts` 的动态更新能力。\n\n### 4. 使用 `props` 和 `events`\n\n`vue-echarts` 支持通过 `props` 传递选项，并支持图表事件的监听。我们可以通过定义 `props` 来让父组件向子组件传递数据。\n\n#### 示例：通过 `props` 传递数据\n\n```html\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch2>通过 Props 传递数据\u003C\u002Fh2>\n \u003Cv-chart :options=\"chartOptions\" style=\"width: 100%; height: 400px;\" @chart-click=\"handleChartClick\">\u003C\u002Fv-chart>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { defineComponent } from 'vue';\nimport { ECharts, use } from 'vue-echarts';\nimport 'echarts';\n\nexport default defineComponent({\n components: {\n 'v-chart': ECharts,\n },\n data() {\n return {\n chartOptions: {\n title: {\n text: '点击图表事件示例',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: [120, 132, 101, 134, 90, 230, 210],\n smooth: true,\n },\n ],\n },\n };\n },\n methods: {\n handleChartClick(params) {\n console.log('Chart clicked:', params);\n },\n },\n});\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\u002F* 组件样式 *\u002F\n\u003C\u002Fstyle>\n```\n\n在这个示例中，我们使用 `@chart-click` 监听图表的点击事件。当用户点击图表时，会在控制台输出点击的相关信息。\n\n### 5. 组合多个图表\n\n`vue-echarts` 允许在同一个 Vue 组件中组合多个图表。我们可以在 `template` 中添加多个 `v-chart` 组件，每个组件可以有不同的配置。\n\n#### 示例：组合多个图表\n\n```html\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch2>组合多个图表\u003C\u002Fh2>\n \u003Cv-chart :options=\"lineChartOptions\" style=\"width: 100%; height: 400px;\">\u003C\u002Fv-chart>\n \u003Cv-chart :options=\"barChartOptions\" style=\"width: 100%; height: 400px;\">\u003C\u002Fv-chart>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { defineComponent } from 'vue';\nimport { ECharts, use } from 'vue-echarts';\nimport 'echarts';\n\nexport default defineComponent({\n components: {\n 'v-chart': ECharts,\n },\n data() {\n return {\n lineChartOptions: {\n title: {\n text: '折线图示例',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: [120, 132, 101, 134, 90, 230, 210],\n smooth: true,\n },\n ],\n },\n barChartOptions: {\n title: {\n text: '柱状图示例',\n },\n tooltip: {\n trigger: 'item',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [220, 182, 191, 234, 290, 330, 310],\n itemStyle: {\n color: '#73c0de',\n },\n },\n ],\n },\n };\n },\n});\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\u002F* 组件样式 *\u002F\n\u003C\u002Fstyle>\n```\n\n在这个示例中，我们展示了一个折线图和一个柱状图。每个图表都有各自的配置选项，充分利用了 Vue 的组件化特性。\n\n## 四、总结\n\n通过将 ECharts 与 Vue.js 集成，我们可以利用 Vue 的响应式特性和组件化架构，实现复杂的交互效果和美观的图表展示。以下是我们在本文中讨论的主要内容：\n\n1. **安装和基本用法**：通过 `vue-echarts` 组件轻松使用 ECharts。\n2. **响应式设计**：利用 Vue 的数据绑定实现图表的动态更新。\n3. **事件监听**：通过 `props` 和事件监听实现图表与用户的交互。\n4. **组合多个图表**：在同一个组件中组合多个 ECharts 图表，展示丰富的数据。\n\nECharts 和 Vue 的结合为开发人员提供了强大的工具来创建高效、动态和响应式的数据可视化应用。希望这篇文章能帮助您在项目中更好地使用这两者！\n",{"id":183,"created_at":184,"updated_at":184,"code":185,"author_id":7,"book_id":4,"slug":186,"article_id":187,"title":188,"sort_order":183,"content":189,"status":12},165,"2024-10-12T14:20:18.878+08:00","A2KQLEX3","echarts-与-react-集成-165",580,"ECharts 与 React 集成","# ECharts 与 React 集成\n\nECharts 是一个强大的数据可视化库，而 React.js 是一个流行的前端库，用于构建用户界面。将这两者结合，可以创建出交互性强且高效的可视化应用。本文将详细介绍如何将 ECharts 与 React.js 集成，使用 `echarts-for-react` 组件来实现复杂的图表交互和响应式设计。\n\n## 一、ECharts 简介\n\nECharts 是一个开源图表库，支持丰富的图表类型和强大的性能，适用于展示大量数据并提供多种定制选项。它的主要优势在于：\n\n- 高性能的图表渲染\n- 多种类型的图表支持\n- 丰富的交互功能\n\n## 二、React.js 简介\n\nReact.js 是一个用于构建用户界面的 JavaScript 库。它通过组件化的方式，使得开发者能够高效地管理复杂的用户界面。React 采用虚拟 DOM 技术，能优化更新性能，提高用户体验。\n\n## 三、将 ECharts 与 React.js 集成\n\n在将 ECharts 与 React.js 集成时，我们可以使用 `echarts-for-react` 组件。这个组件将 ECharts 图表作为 React 组件使用，从而利用 React 的声明式编程方式和组件化特性。\n\n### 1. 安装依赖\n\n首先，我们需要安装 `echarts` 和 `echarts-for-react`。可以使用 npm 进行安装：\n\n```bash\nnpm install echarts echarts-for-react\n```\n\n### 2. 基本用法\n\n在 React 组件中使用 `echarts-for-react` 非常简单。我们可以在组件中引入 ECharts，并在 `render` 方法中配置图表的选项。\n\n#### 示例：基本折线图\n\n```jsx\nimport React from 'react';\nimport ReactECharts from 'echarts-for-react';\n\nconst LineChart = () => {\n const getOption = () => {\n return {\n title: {\n text: '基础折线图示例',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: [120, 132, 101, 134, 90, 230, 210],\n smooth: true,\n },\n ],\n };\n };\n\n return (\n \u003Cdiv>\n \u003Ch2>基础折线图\u003C\u002Fh2>\n \u003CReactECharts option={getOption()} style={{ height: '400px', width: '100%' }} \u002F>\n \u003C\u002Fdiv>\n );\n};\n\nexport default LineChart;\n```\n\n在这个示例中，我们创建了一个基本的折线图。`getOption` 方法返回图表的配置选项，并将其传递给 `ReactECharts` 组件。\n\n### 3. 响应式设计\n\nReact 的状态管理使得图表可以根据数据的变化自动更新。我们可以通过 React 的 `useState` 和 `useEffect` 钩子来实现图表的响应式效果。\n\n#### 示例：动态更新数据\n\n```jsx\nimport React, { useState } from 'react';\nimport ReactECharts from 'echarts-for-react';\n\nconst DynamicLineChart = () => {\n const [data, setData] = useState([120, 132, 101, 134, 90, 230, 210]);\n\n const getOption = () => {\n return {\n title: {\n text: '动态折线图',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: data,\n smooth: true,\n },\n ],\n };\n };\n\n const updateData = () => {\n const newData = data.map(() => Math.floor(Math.random() * 300));\n setData(newData);\n };\n\n return (\n \u003Cdiv>\n \u003Ch2>动态折线图\u003C\u002Fh2>\n \u003Cbutton onClick={updateData}>更新数据\u003C\u002Fbutton>\n \u003CReactECharts option={getOption()} style={{ height: '400px', width: '100%' }} \u002F>\n \u003C\u002Fdiv>\n );\n};\n\nexport default DynamicLineChart;\n```\n\n在这个示例中，我们添加了一个按钮，通过点击按钮可以随机更新图表的数据。这样可以展示 React 的状态管理和 `echarts-for-react` 的动态更新能力。\n\n### 4. 事件处理\n\n`echarts-for-react` 支持通过 `onChartReady`、`onEvents` 等属性来处理图表事件。我们可以在图表中添加事件监听，从而实现更丰富的交互功能。\n\n#### 示例：处理点击事件\n\n```jsx\nimport React from 'react';\nimport ReactECharts from 'echarts-for-react';\n\nconst ClickableLineChart = () => {\n const getOption = () => {\n return {\n title: {\n text: '可点击折线图',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: [120, 132, 101, 134, 90, 230, 210],\n smooth: true,\n },\n ],\n };\n };\n\n const onChartClick = (params) => {\n console.log('Chart clicked:', params);\n };\n\n return (\n \u003Cdiv>\n \u003Ch2>可点击折线图\u003C\u002Fh2>\n \u003CReactECharts\n option={getOption()}\n style={{ height: '400px', width: '100%' }}\n onEvents={{ click: onChartClick }}\n \u002F>\n \u003C\u002Fdiv>\n );\n};\n\nexport default ClickableLineChart;\n```\n\n在这个示例中，我们通过 `onEvents` 属性监听图表的点击事件。当用户点击图表时，控制台将输出点击的相关信息。\n\n### 5. 组合多个图表\n\n`echarts-for-react` 允许在同一个 React 组件中组合多个图表。我们可以在 `render` 方法中添加多个 `ReactECharts` 组件，每个组件可以有不同的配置。\n\n#### 示例：组合多个图表\n\n```jsx\nimport React from 'react';\nimport ReactECharts from 'echarts-for-react';\n\nconst CombinedCharts = () => {\n const lineChartOptions = {\n title: {\n text: '折线图示例',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'line',\n data: [120, 132, 101, 134, 90, 230, 210],\n smooth: true,\n },\n ],\n };\n\n const barChartOptions = {\n title: {\n text: '柱状图示例',\n },\n tooltip: {\n trigger: 'item',\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [220, 182, 191, 234, 290, 330, 310],\n itemStyle: {\n color: '#73c0de',\n },\n },\n ],\n };\n\n return (\n \u003Cdiv>\n \u003Ch2>组合多个图表\u003C\u002Fh2>\n \u003CReactECharts option={lineChartOptions} style={{ height: '400px', width: '100%' }} \u002F>\n \u003CReactECharts option={barChartOptions} style={{ height: '400px', width: '100%' }} \u002F>\n \u003C\u002Fdiv>\n );\n};\n\nexport default CombinedCharts;\n```\n\n在这个示例中，我们展示了一个折线图和一个柱状图。每个图表都有各自的配置选项，充分利用了 React 的组件化特性。\n\n## 四、总结\n\n通过将 ECharts 与 React.js 集成，我们可以利用 React 的组件化架构和状态管理，实现复杂的交互效果和美观的图表展示。以下是我们在本文中讨论的主要内容：\n\n1. **安装和基本用法**：通过 `echarts-for-react` 组件轻松使用 ECharts。\n2. **响应式设计**：利用 React 的状态管理实现图表的动态更新。\n3. **事件处理**：通过 `onEvents` 监听图表事件\n\n，实现用户交互。\n4. **组合多个图表**：在同一个组件中组合多个 ECharts 图表，展示丰富的数据。\n\nECharts 和 React 的结合为开发人员提供了强大的工具来创建高效、动态和响应式的数据可视化应用。希望这篇文章能帮助您在项目中更好地使用这两者！\n",{"id":191,"created_at":192,"updated_at":192,"code":193,"author_id":7,"book_id":4,"slug":194,"article_id":195,"title":196,"sort_order":191,"content":197,"status":12},166,"2024-10-12T14:22:04.628+08:00","5E65nr8z","自定义主题-166",581,"自定义主题","# ECharts 自定义主题\n\nECharts 是一个功能强大的数据可视化库，支持丰富的图表类型和交互功能。在开发中，您可能希望根据项目的需求或品牌形象来定制图表的外观。ECharts 提供了灵活的主题配置功能，允许开发者轻松调整图表的颜色、字体、背景等。本文将深入探讨如何定制 ECharts 主题，创建并使用自定义图表主题。\n\n## 一、ECharts 主题概述\n\nECharts 主题是图表的整体样式设置，它可以包括以下内容：\n\n- 全局颜色\n- 字体\n- 背景颜色\n- 边框样式\n- 其他样式\n\n使用主题，您可以确保图表在不同页面或应用中具有一致的外观。\n\n## 二、内置主题\n\nECharts 提供了多个内置主题，例如 `light`、`dark`、`macarons` 等，您可以直接使用这些主题。在使用时，只需在初始化 ECharts 时指定主题名称即可。\n\n### 示例：使用内置主题\n\n```javascript\nconst chart = echarts.init(document.getElementById('main'), 'dark'); \u002F\u002F 使用 dark 主题\n\nconst option = {\n title: {\n text: '内置主题示例',\n },\n tooltip: {},\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [120, 200, 150, 80, 70, 110, 130],\n }],\n};\n\nchart.setOption(option);\n```\n\n## 三、创建自定义主题\n\n创建自定义主题主要包括定义主题对象，然后在初始化 ECharts 时使用该主题。主题对象包含的属性可以根据需求进行调整。\n\n### 1. 定义主题对象\n\n主题对象通常包含 `color`、`backgroundColor`、`textStyle`、`title` 等属性。例如，以下是一个简单的主题对象：\n\n```javascript\nconst myTheme = {\n color: ['#3398DB', '#FF5733', '#28A745', '#FFC107'],\n backgroundColor: '#FFFFFF',\n textStyle: {\n fontFamily: 'Arial',\n fontSize: 14,\n },\n title: {\n textStyle: {\n color: '#333333',\n fontWeight: 'bold',\n },\n },\n \u002F\u002F 更多主题配置...\n};\n```\n\n### 2. 注册自定义主题\n\n在 ECharts 中，可以使用 `echarts.registerTheme` 方法注册自定义主题：\n\n```javascript\necharts.registerTheme('myTheme', myTheme);\n```\n\n### 3. 使用自定义主题\n\n在创建图表实例时，指定自定义主题名称：\n\n```javascript\nconst chart = echarts.init(document.getElementById('main'), 'myTheme');\n\nconst option = {\n title: {\n text: '自定义主题示例',\n },\n tooltip: {},\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [120, 200, 150, 80, 70, 110, 130],\n }],\n};\n\nchart.setOption(option);\n```\n\n## 四、完整自定义主题示例\n\n下面是一个完整的示例，展示了如何创建和使用自定义主题。\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 自定义主题示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n \u003Cstyle>\n #main {\n width: 600px;\n height: 400px;\n }\n \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv id=\"main\">\u003C\u002Fdiv>\n\n\u003Cscript>\n \u002F\u002F 定义自定义主题\n const myTheme = {\n color: ['#3398DB', '#FF5733', '#28A745', '#FFC107'],\n backgroundColor: '#FFFFFF',\n textStyle: {\n fontFamily: 'Arial',\n fontSize: 14,\n },\n title: {\n textStyle: {\n color: '#333333',\n fontWeight: 'bold',\n },\n },\n tooltip: {\n backgroundColor: 'rgba(0, 0, 0, 0.7)',\n borderColor: '#777777',\n borderWidth: 1,\n textStyle: {\n color: '#FFFFFF',\n },\n },\n xAxis: {\n axisLine: {\n lineStyle: {\n color: '#777777',\n },\n },\n splitLine: {\n lineStyle: {\n type: 'dashed',\n },\n },\n },\n yAxis: {\n axisLine: {\n lineStyle: {\n color: '#777777',\n },\n },\n splitLine: {\n lineStyle: {\n type: 'dashed',\n },\n },\n },\n };\n\n \u002F\u002F 注册自定义主题\n echarts.registerTheme('myTheme', myTheme);\n\n \u002F\u002F 初始化图表\n const chart = echarts.init(document.getElementById('main'), 'myTheme');\n\n \u002F\u002F 配置图表选项\n const option = {\n title: {\n text: '自定义主题示例',\n },\n tooltip: {},\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [120, 200, 150, 80, 70, 110, 130],\n }],\n };\n\n \u002F\u002F 设置图表选项\n chart.setOption(option);\n\u003C\u002Fscript>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n在这个示例中，我们创建了一个自定义主题，定义了多种样式属性，包括图表颜色、背景颜色、字体样式等。然后，我们将这个主题注册并应用于一个简单的柱状图。\n\n## 五、主题的应用与优势\n\n自定义主题的优势在于能够使图表具有统一的视觉风格，特别是在大型项目中，主题可以确保不同的图表在颜色、字体等方面保持一致。此外，使用主题能够提高开发效率，因为只需修改主题文件，所有相关图表就会自动更新样式。\n\n### 1. 切换主题\n\n如果需要切换不同的主题，可以在初始化图表时动态传递主题名称。例如，您可以在用户界面中提供一个主题切换选项，通过事件处理函数来切换主题：\n\n```javascript\nconst switchTheme = (themeName) => {\n chart.dispose(); \u002F\u002F 销毁现有图表实例\n const newChart = echarts.init(document.getElementById('main'), themeName);\n newChart.setOption(option);\n};\n\n\u002F\u002F 示例：切换到内置主题\nswitchTheme('dark'); \n```\n\n### 2. 动态主题\n\n还可以通过 JavaScript 动态调整主题属性，例如：\n\n```javascript\nmyTheme.color = ['#FF5733', '#3398DB'];\necharts.registerTheme('myDynamicTheme', myTheme);\n```\n\n这种方法可以根据用户的偏好或应用的状态实时更新图表样式。\n\n## 六、总结\n\nECharts 的自定义主题功能为开发者提供了灵活的样式配置选项，能够轻松定制图表的视觉效果。通过创建和使用自定义主题，您可以确保图表在不同页面中的一致性和美观性。本文涵盖了自定义主题的创建、使用以及主题切换的实现方法，希望能够帮助您在项目中更好地利用 ECharts 的主题功能。\n\n通过合理利用自定义主题，您将能够创建出具有专业外观的可视化应用，提升用户体验。希望这篇文章能为您提供有价值的参考！\n",{"id":199,"created_at":200,"updated_at":200,"code":201,"author_id":7,"book_id":4,"slug":202,"article_id":203,"title":204,"sort_order":199,"content":205,"status":12},167,"2024-10-12T14:22:56.457+08:00","vPKwpo6q","性能优化-167",582,"性能优化","# ECharts 性能优化\n\nECharts 是一个强大的数据可视化库，适用于展示各种类型的数据。然而，当处理大规模数据时，图表的渲染性能可能会受到影响，导致用户体验下降。因此，了解如何优化 ECharts 的性能是非常重要的。本文将介绍一些优化技巧，包括处理大规模数据、使用懒加载、虚拟化以及图表简化等技术，以提高渲染性能。\n\n## 一、性能优化概述\n\n在使用 ECharts 时，以下几个方面可以帮助提高性能：\n\n1. **数据量控制**：减少一次性渲染的数据量。\n2. **图表简化**：简化图表的复杂性。\n3. **懒加载和虚拟化**：根据视口动态加载数据。\n4. **合理配置图表属性**：选择合适的配置来减少渲染压力。\n\n## 二、处理大规模数据的优化技巧\n\n### 1. 数据量控制\n\n对于大规模数据，首先应考虑减少传递给图表的数据量。可以通过以下方法来实现：\n\n- **数据抽样**：只选取部分数据进行渲染。例如，对于时间序列数据，可以每隔一定时间选取一个数据点。\n\n```javascript\nconst originalData = [...]; \u002F\u002F 假设有大量数据\nconst sampledData = originalData.filter((_, index) => index % 10 === 0); \u002F\u002F 每隔10个数据点取一个\n```\n\n- **数据聚合**：将多个数据点合并成一个。例如，对于销售数据，可以按周或按月进行聚合。\n\n```javascript\nconst aggregatedData = aggregateSalesData(originalData); \u002F\u002F 自定义聚合函数\n```\n\n### 2. 图表简化\n\n在设计图表时，可以考虑减少图表的复杂性，例如：\n\n- **限制图表类型**：选择适合数据展示的图表类型。复杂的图表如散点图可能会增加渲染负担，尽量选择简单明了的图表类型。\n- **简化图表元素**：例如，减少不必要的网格线、辅助线和标签等，保持图表简洁。\n\n```javascript\nconst option = {\n grid: {\n show: false, \u002F\u002F 不显示网格\n },\n xAxis: {\n axisLine: { show: false }, \u002F\u002F 不显示坐标轴线\n },\n series: [\n {\n type: 'line',\n smooth: true, \u002F\u002F 使用平滑曲线减少尖锐转折\n \u002F\u002F 其他配置...\n },\n ],\n};\n```\n\n## 三、使用懒加载和虚拟化\n\n懒加载和虚拟化是处理大规模数据的有效技术，可以根据视口动态加载数据，从而减少一次性渲染的数据量。\n\n### 1. 懒加载\n\n懒加载指的是在用户滚动或交互时才加载和渲染数据。例如，在表格中加载可见的行数据。\n\n```javascript\nconst loadData = (startIndex, endIndex) => {\n const visibleData = originalData.slice(startIndex, endIndex);\n chart.setOption({\n series: [{\n data: visibleData,\n }],\n });\n};\n\n\u002F\u002F 在用户滚动时调用 loadData 函数\n```\n\n### 2. 虚拟化\n\n虚拟化可以将数据分成多个批次，并在图表中逐步渲染。比如在图表可视区域内只渲染当前可见的数据，超出部分不渲染。\n\n```javascript\nlet currentBatchIndex = 0;\nconst batchSize = 100;\n\nconst updateChart = () => {\n const start = currentBatchIndex * batchSize;\n const end = start + batchSize;\n loadData(start, end);\n currentBatchIndex++;\n};\n\n\u002F\u002F 定时调用更新图表\nsetInterval(updateChart, 1000); \u002F\u002F 每秒加载一批数据\n```\n\n## 四、合理配置图表属性\n\n根据需求合理配置 ECharts 属性也能提高性能。例如，避免使用 `renderAsImage` 和 `dataZoom` 等高消耗性能的特性。\n\n### 1. 优化配置示例\n\n以下是一个优化的 ECharts 配置示例，展示了如何结合以上提到的技术：\n\n```javascript\nconst myChart = echarts.init(document.getElementById('main'));\n\nconst option = {\n title: {\n text: '性能优化示例',\n },\n tooltip: {},\n xAxis: {\n type: 'category',\n data: [], \u002F\u002F 初始化为空，后续懒加载数据\n },\n yAxis: {\n type: 'value',\n },\n series: [{\n name: '数据',\n type: 'line',\n smooth: true,\n data: [], \u002F\u002F 初始化为空\n }],\n};\n\n\u002F\u002F 懒加载数据函数\nconst lazyLoadData = (data) => {\n option.xAxis.data = data.map((item) => item.name);\n option.series[0].data = data.map((item) => item.value);\n myChart.setOption(option);\n};\n\n\u002F\u002F 模拟数据\nconst simulateData = () => {\n return Array.from({ length: 1000 }, (_, index) => ({\n name: `数据 ${index + 1}`,\n value: Math.random() * 100,\n }));\n};\n\nconst originalData = simulateData();\n\n\u002F\u002F 每隔一段时间懒加载新数据\nlet index = 0;\nsetInterval(() => {\n if (index \u003C originalData.length) {\n lazyLoadData(originalData.slice(index, index + 10)); \u002F\u002F 每次加载10条数据\n index += 10;\n }\n}, 1000);\n```\n\n## 五、总结\n\n在处理大规模数据时，ECharts 提供了多种优化技巧和方法。通过合理控制数据量、简化图表设计、使用懒加载和虚拟化技术，可以显著提高图表的渲染性能和用户体验。在实际应用中，建议根据项目需求选择合适的优化方案，确保在满足功能的同时，提升图表的响应速度和交互体验。\n\n希望本文的内容能为您在 ECharts 开发过程中提供有价值的参考，帮助您创建出高性能的数据可视化应用！\n",{"id":207,"created_at":208,"updated_at":208,"code":209,"author_id":7,"book_id":4,"slug":210,"article_id":211,"title":212,"sort_order":207,"content":213,"status":12},168,"2024-10-12T14:23:41.564+08:00","zBKVJqK4","图表导出与分享-168",583,"图表导出与分享","# ECharts 图表导出与分享\n\nECharts 是一个强大的数据可视化库，除了在网页上展示交互式图表外，有时我们也需要将这些图表导出为图片或 PDF，以便分享或报告使用。本文将介绍如何将 ECharts 图表导出为图片、PDF 等格式，以及如何在社交媒体或网页中分享这些图表。\n\n## 一、图表导出\n\n### 1. 导出为图片\n\nECharts 提供了简单的方法来将图表导出为图片。可以通过 `getDataURL` 方法获取图表的图片 URL，并将其下载到本地。\n\n#### 示例代码\n\n```javascript\n\u002F\u002F 创建 ECharts 实例\nconst myChart = echarts.init(document.getElementById('main'));\n\n\u002F\u002F 设置图表的基本配置\nconst option = {\n title: {\n text: 'ECharts 导出示例',\n },\n tooltip: {},\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E'],\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10],\n }],\n};\n\n\u002F\u002F 使用设置的配置项和数据显示图表\nmyChart.setOption(option);\n\n\u002F\u002F 导出图表为图片\ndocument.getElementById('exportBtn').onclick = function () {\n const url = myChart.getDataURL({\n type: 'png', \u002F\u002F 图片格式，可以是 png 或 jpeg\n pixelRatio: 2, \u002F\u002F 像素比例\n backgroundColor: '#fff', \u002F\u002F 背景色\n });\n\n const link = document.createElement('a');\n link.href = url;\n link.download = 'echarts-chart.png'; \u002F\u002F 下载文件名\n link.click();\n};\n```\n\n#### 说明\n\n- `getDataURL` 方法可以接收一个对象参数，配置导出的图片类型、像素比例和背景颜色等。\n- 使用 `\u003Ca>` 标签创建下载链接，触发下载操作。\n\n### 2. 导出为 PDF\n\n虽然 ECharts 本身不直接支持导出为 PDF，但可以借助其他库（如 jsPDF）将图表导出为 PDF 文件。\n\n#### 示例代码\n\n```javascript\n\u002F\u002F 引入 jsPDF\nconst { jsPDF } = window.jspdf;\n\n\u002F\u002F 导出图表为 PDF\ndocument.getElementById('exportPdfBtn').onclick = function () {\n const pdf = new jsPDF('l', 'mm', 'a4'); \u002F\u002F 创建 PDF 对象\n const imgData = myChart.getDataURL({\n type: 'png',\n pixelRatio: 2,\n });\n\n pdf.addImage(imgData, 'PNG', 10, 10, 280, 150); \u002F\u002F 添加图表图片到 PDF\n pdf.save('echarts-chart.pdf'); \u002F\u002F 下载 PDF 文件\n};\n```\n\n#### 说明\n\n- 需要确保在项目中引入 `jsPDF` 库。\n- 使用 `addImage` 方法将 ECharts 图表的图片添加到 PDF，并保存为文件。\n\n## 二、图表分享\n\n### 1. 分享到社交媒体\n\n在网页中，可以通过生成分享链接或分享按钮将图表分享到社交媒体。\n\n#### 示例代码\n\n```html\n\u003C!-- 分享按钮 -->\n\u003Cbutton id=\"shareBtn\">分享图表\u003C\u002Fbutton>\n```\n\n```javascript\ndocument.getElementById('shareBtn').onclick = function () {\n const url = myChart.getDataURL({\n type: 'png',\n pixelRatio: 2,\n });\n\n \u002F\u002F 生成分享链接，假设使用微信分享\n const shareUrl = `https:\u002F\u002Fwww.example.com\u002Fshare?image=${encodeURIComponent(url)}`;\n \n \u002F\u002F 在此处可以使用微信JS-SDK等分享SDK实现分享\n window.open(shareUrl, '_blank'); \u002F\u002F 打开分享链接\n};\n```\n\n### 2. 在网页中嵌入图表\n\n可以通过直接嵌入图表到网页中，来分享图表。\n\n#### 示例代码\n\n```html\n\u003C!-- 其他网页中引用 ECharts 图表 -->\n\u003Cdiv id=\"sharedChart\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n\n\u003Cscript>\n \u002F\u002F 初始化 ECharts 图表\n const sharedChart = echarts.init(document.getElementById('sharedChart'));\n sharedChart.setOption(option); \u002F\u002F 使用相同的配置\n\u003C\u002Fscript>\n```\n\n## 三、综合示例\n\n下面是一个完整的示例代码，包括图表的创建、导出以及分享功能：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>ECharts 导出与分享示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n \u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fjspdf\u002F2.4.0\u002Fjspdf.umd.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"main\" style=\"width: 600px; height: 400px;\">\u003C\u002Fdiv>\n \u003Cbutton id=\"exportBtn\">导出为图片\u003C\u002Fbutton>\n \u003Cbutton id=\"exportPdfBtn\">导出为 PDF\u003C\u002Fbutton>\n \u003Cbutton id=\"shareBtn\">分享图表\u003C\u002Fbutton>\n\n \u003Cscript>\n const myChart = echarts.init(document.getElementById('main'));\n const option = {\n title: {\n text: 'ECharts 导出与分享示例',\n },\n tooltip: {},\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E'],\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10],\n }],\n };\n myChart.setOption(option);\n\n document.getElementById('exportBtn').onclick = function () {\n const url = myChart.getDataURL({\n type: 'png',\n pixelRatio: 2,\n backgroundColor: '#fff',\n });\n const link = document.createElement('a');\n link.href = url;\n link.download = 'echarts-chart.png';\n link.click();\n };\n\n document.getElementById('exportPdfBtn').onclick = function () {\n const pdf = new jsPDF('l', 'mm', 'a4');\n const imgData = myChart.getDataURL({\n type: 'png',\n pixelRatio: 2,\n });\n pdf.addImage(imgData, 'PNG', 10, 10, 280, 150);\n pdf.save('echarts-chart.pdf');\n };\n\n document.getElementById('shareBtn').onclick = function () {\n const url = myChart.getDataURL({\n type: 'png',\n pixelRatio: 2,\n });\n const shareUrl = `https:\u002F\u002Fwww.example.com\u002Fshare?image=${encodeURIComponent(url)}`;\n window.open(shareUrl, '_blank');\n };\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## 四、总结\n\n本文介绍了如何将 ECharts 图表导出为图片和 PDF，并分享至社交媒体或嵌入网页中。通过简单的代码示例，您可以轻松实现这些功能，为您的数据可视化提供更多的灵活性与分享可能。希望这些内容能够帮助您更好地利用 ECharts 进行数据展示与分享！\n",{"id":215,"created_at":216,"updated_at":216,"code":217,"author_id":7,"book_id":4,"slug":218,"article_id":219,"title":220,"sort_order":215,"content":221,"status":12},169,"2024-10-13T03:59:52.567+08:00","jMKednXz","数据仪表盘开发-169",584,"数据仪表盘开发","# 使用 ECharts 开发数据仪表盘\n\n数据仪表盘是现代数据可视化的重要组成部分，它通过综合展示多个数据图表，帮助用户快速了解数据趋势、状态和关键指标。在本篇文章中，我们将详细讲解如何使用 ECharts 框架开发一个完整的数据仪表盘，介绍如何综合运用多种图表类型，处理图表布局、交互与响应式设计，并展示如何将图表组合到一起构建实用的仪表盘。\n\n## 一、什么是数据仪表盘？\n\n数据仪表盘是一种可视化工具，它将多个关键数据指标汇聚在同一个页面，用户可以通过仪表盘快速获取多个维度的数据信息。数据仪表盘通常由以下几个部分组成：\n\n- **KPI 指标**：展示核心数据，如业务的关键绩效指标。\n- **折线图、柱状图**：用于展示趋势性数据。\n- **饼图、雷达图**：用于对比不同类别的占比数据。\n- **散点图、热力图**：用于展示数据分布和密度。\n- **动态交互**：包括刷新、缩放、拖动等操作。\n\n## 二、搭建数据仪表盘的步骤\n\n### 1. 项目初始化\n\n首先，创建一个包含 ECharts 的基础项目。在这里，我们假设使用了 HTML 和 JavaScript 构建。\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>数据仪表盘\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n \u003Cstyle>\n .dashboard {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-gap: 20px;\n padding: 20px;\n }\n .chart-container {\n width: 100%;\n height: 400px;\n }\n \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv class=\"dashboard\">\n \u003Cdiv id=\"lineChart\" class=\"chart-container\">\u003C\u002Fdiv>\n \u003Cdiv id=\"barChart\" class=\"chart-container\">\u003C\u002Fdiv>\n \u003Cdiv id=\"pieChart\" class=\"chart-container\">\u003C\u002Fdiv>\n \u003Cdiv id=\"gaugeChart\" class=\"chart-container\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cscript>\n \u002F\u002F 初始化图表容器\n const lineChart = echarts.init(document.getElementById('lineChart'));\n const barChart = echarts.init(document.getElementById('barChart'));\n const pieChart = echarts.init(document.getElementById('pieChart'));\n const gaugeChart = echarts.init(document.getElementById('gaugeChart'));\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n此时，我们创建了一个基础的仪表盘布局，采用了 `CSS Grid` 布局，包含 4 个图表容器（折线图、柱状图、饼图、仪表盘）。\n\n### 2. 添加折线图（Line Chart）\n\n折线图用于展示连续数据的变化趋势。我们可以使用 ECharts 的基本折线图配置，展示 KPI 数据随时间的变化。\n\n```javascript\n\u002F\u002F 配置折线图\nconst lineOption = {\n title: {\n text: '业务趋势折线图',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n boundaryGap: false,\n data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '订单量',\n type: 'line',\n data: [820, 932, 901, 934, 1290, 1330, 1320],\n smooth: true, \u002F\u002F 平滑曲线\n },\n ],\n};\n\n\u002F\u002F 渲染折线图\nlineChart.setOption(lineOption);\n```\n\n#### 说明\n\n- `xAxis`：横轴为时间段（周一到周日）。\n- `yAxis`：纵轴为订单量。\n- `series`：图表类型为折线图，数据点为不同天的数据。\n\n### 3. 添加柱状图（Bar Chart）\n\n柱状图可以用于对比多个类别的数据。我们在仪表盘中展示不同产品的销售量。\n\n```javascript\n\u002F\u002F 配置柱状图\nconst barOption = {\n title: {\n text: '产品销售量柱状图',\n },\n tooltip: {\n trigger: 'axis',\n },\n xAxis: {\n type: 'category',\n data: ['产品A', '产品B', '产品C', '产品D'],\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [120, 200, 150, 80],\n itemStyle: {\n color: '#3498db', \u002F\u002F 自定义柱状颜色\n },\n },\n ],\n};\n\n\u002F\u002F 渲染柱状图\nbarChart.setOption(barOption);\n```\n\n#### 说明\n\n- `xAxis`：产品名称作为横轴类别。\n- `series`：数据代表每个产品的销售量，类型为柱状图。\n\n### 4. 添加饼图（Pie Chart）\n\n饼图适合展示不同类别数据的占比。我们展示市场份额分布情况。\n\n```javascript\n\u002F\u002F 配置饼图\nconst pieOption = {\n title: {\n text: '市场份额饼图',\n left: 'center',\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} \u003Cbr\u002F>{b}: {c} ({d}%)',\n },\n series: [\n {\n name: '市场份额',\n type: 'pie',\n radius: '50%',\n data: [\n { value: 1048, name: '产品A' },\n { value: 735, name: '产品B' },\n { value: 580, name: '产品C' },\n { value: 484, name: '产品D' },\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n },\n ],\n};\n\n\u002F\u002F 渲染饼图\npieChart.setOption(pieOption);\n```\n\n#### 说明\n\n- `radius`：定义饼图的半径。\n- `data`：每个饼块的数据值与名称。\n\n### 5. 添加仪表盘（Gauge Chart）\n\n仪表盘可以展示实时的单个指标，如当前 KPI 达成率或系统性能监控。\n\n```javascript\n\u002F\u002F 配置仪表盘\nconst gaugeOption = {\n title: {\n text: 'KPI 达成率仪表盘',\n left: 'center',\n },\n series: [\n {\n name: 'KPI 达成率',\n type: 'gauge',\n detail: { formatter: '{value}%' },\n data: [{ value: 75, name: '达成率' }],\n },\n ],\n};\n\n\u002F\u002F 渲染仪表盘\ngaugeChart.setOption(gaugeOption);\n```\n\n#### 说明\n\n- 仪表盘用于展示 KPI 达成情况，可以自定义数值和样式。\n\n### 6. 动态交互与响应式设计\n\n在仪表盘中，数据是动态变化的，ECharts 支持通过 API 动态更新数据。比如，可以使用 `setInterval` 定时更新数据，让仪表盘图表实时反映最新状态。\n\n```javascript\nsetInterval(function () {\n const newData = Math.round(Math.random() * 100);\n gaugeChart.setOption({\n series: [\n {\n data: [{ value: newData, name: '达成率' }],\n },\n ],\n });\n}, 2000); \u002F\u002F 每2秒更新一次\n```\n\n#### 说明\n\n- 使用 `setOption` 动态更新数据。\n- 在仪表盘项目中，图表的实时更新是常见需求，ECharts 提供了很好的动态更新支持。\n\n### 7. 响应式设计\n\nECharts 默认支持响应式布局，可以自动适配不同屏幕尺寸。在设计仪表盘时，可以通过 `window.onresize` 方法确保图表在窗口大小变化时自动调整大小。\n\n```javascript\nwindow.onresize = function () {\n lineChart.resize();\n barChart.resize();\n pieChart.resize();\n gaugeChart.resize();\n};\n```\n\n## 三、总结\n\n通过本文的介绍，我们已经了解了如何使用 ECharts 开发一个完整的数据仪表盘，结合折线图、柱状图、饼图和仪表盘等多种图表类型，展示丰富的数据指标。同时，我们还学习了如何处理布局、响应式设计和动态交互。您可以根据业务需求，自定义更多图表类型，并整合至数据仪表盘中，为用户提供更好的数据可视化体验。\n\n希望这篇文章能帮助您更好地掌握 ECharts 的使用，并为您构建数据仪表盘提供\n\n有价值的参考！\n",{"id":223,"created_at":224,"updated_at":224,"code":225,"author_id":7,"book_id":4,"slug":226,"article_id":227,"title":228,"sort_order":223,"content":229,"status":12},170,"2024-10-13T05:09:03.415+08:00","0V6Az082","案例学习-170",585,"案例学习","# 使用 ECharts 实现高级图表应用：迁徙图、气象图、流向图\n\nECharts 是一个强大的数据可视化框架，支持丰富的图表类型，适用于多种复杂场景。在这篇博客中，我们将详细介绍如何使用 ECharts 实现一些高级图表应用，如迁徙图、气象图和流向图。这些图表在展示地理数据、流向数据和气象数据时非常实用，能够帮助用户直观地理解复杂的数据信息。我们将详细说明其使用方法，并提供多个代码示例，涵盖所有相关属性及方法。\n\n## 一、迁徙图（Migration Map）\n\n迁徙图用于展示不同地点之间的人员、物流等数据的迁移或流动情况。它能够直观地显示出从某个地点到其他地点的数据流向。\n\n### 1. 示例：展示城市之间的迁移流动\n\n我们使用 ECharts 的 `geo` 地理坐标系与 `lines` 系列来实现迁徙图。\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Ctitle>迁徙图示例\u003C\u002Ftitle>\n \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts\u002Fdist\u002Fecharts.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"migrationChart\" style=\"width: 100%; height: 600px;\">\u003C\u002Fdiv>\n \u003Cscript>\n var migrationChart = echarts.init(document.getElementById('migrationChart'));\n\n var data = [\n [{name: '北京'}, {name: '上海', value: 95}],\n [{name: '北京'}, {name: '广州', value: 90}],\n [{name: '北京'}, {name: '深圳', value: 80}],\n [{name: '北京'}, {name: '杭州', value: 70}],\n [{name: '北京'}, {name: '南京', value: 60}]\n ];\n\n var geoCoordMap = {\n '北京': [116.4551, 40.2539],\n '上海': [121.4648, 31.2891],\n '广州': [113.5107, 23.2196],\n '深圳': [114.5435, 22.5439],\n '杭州': [119.5313, 29.8773],\n '南京': [118.8062, 31.9208]\n };\n\n function convertData(data) {\n var res = [];\n for (var i = 0; i \u003C data.length; i++) {\n var fromCoord = geoCoordMap[data[i][0].name];\n var toCoord = geoCoordMap[data[i][1].name];\n if (fromCoord && toCoord) {\n res.push({\n fromName: data[i][0].name,\n toName: data[i][1].name,\n coords: [fromCoord, toCoord]\n });\n }\n }\n return res;\n }\n\n var option = {\n title: {\n text: '迁徙图 - 北京到其他城市',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: function (params) {\n if (params.seriesType === \"lines\") {\n return params.data.fromName + \" -> \" + params.data.toName + \" : \" + params.data.value;\n }\n }\n },\n geo: {\n map: 'china',\n label: {\n emphasis: {\n show: false\n }\n },\n roam: true,\n itemStyle: {\n normal: {\n areaColor: '#323c48',\n borderColor: '#404a59'\n },\n emphasis: {\n areaColor: '#2a333d'\n }\n }\n },\n series: [\n {\n name: '迁徙路线',\n type: 'lines',\n coordinateSystem: 'geo',\n zlevel: 1,\n effect: {\n show: true,\n period: 6,\n trailLength: 0.7,\n color: '#fff',\n symbolSize: 3\n },\n lineStyle: {\n normal: {\n color: '#a6c84c',\n width: 0,\n curveness: 0.2\n }\n },\n data: convertData(data)\n },\n {\n name: '迁徙路线',\n type: 'lines',\n coordinateSystem: 'geo',\n zlevel: 2,\n effect: {\n show: true,\n period: 6,\n trailLength: 0,\n symbol: 'arrow',\n symbolSize: 10\n },\n lineStyle: {\n normal: {\n color: '#a6c84c',\n width: 1,\n opacity: 0.6,\n curveness: 0.2\n }\n },\n data: convertData(data)\n }\n ]\n };\n\n migrationChart.setOption(option);\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n#### 说明\n\n- **geo**：使用地理坐标系绘制中国地图。\n- **series (lines)**：定义了迁徙路线的图表类型，`effect` 属性用于展示迁徙路径上的流动效果。\n- **convertData**：将数据转换为迁徙路径的格式，展示从一个城市到另一个城市的流向。\n\n### 2. 配置说明\n\n- **effect.show**：是否展示迁徙的流动效果。\n- **lineStyle.curveness**：迁徙路径的曲度，值越大曲线越弯曲。\n- **coordinateSystem**：指定使用地理坐标系。\n\n---\n\n## 二、气象图（Weather Map）\n\n气象图用于展示不同地区的天气、气温、降雨量等气象数据。我们可以通过结合 `geo` 地理坐标系与 `scatter` 系列绘制出展示不同城市气温的图表。\n\n### 1. 示例：展示城市气温\n\n```javascript\nvar weatherChart = echarts.init(document.getElementById('weatherChart'));\n\nvar weatherData = [\n {name: '北京', value: [116.4551, 40.2539, 30]}, \u002F\u002F [经度, 纬度, 温度]\n {name: '上海', value: [121.4648, 31.2891, 35]},\n {name: '广州', value: [113.5107, 23.2196, 28]},\n {name: '深圳', value: [114.5435, 22.5439, 27]}\n];\n\nvar option = {\n title: {\n text: '全国城市气温分布图',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: function (params) {\n return params.name + ' : ' + params.value[2] + '℃';\n }\n },\n geo: {\n map: 'china',\n roam: true,\n label: {\n emphasis: {\n show: false\n }\n },\n itemStyle: {\n normal: {\n areaColor: '#323c48',\n borderColor: '#404a59'\n },\n emphasis: {\n areaColor: '#2a333d'\n }\n }\n },\n series: [\n {\n name: '城市气温',\n type: 'scatter',\n coordinateSystem: 'geo',\n symbolSize: function (val) {\n return val[2] \u002F 2; \u002F\u002F 根据温度控制气泡大小\n },\n label: {\n normal: {\n formatter: '{b}',\n position: 'right',\n show: true\n }\n },\n itemStyle: {\n normal: {\n color: '#ddb926'\n }\n },\n data: weatherData\n }\n ]\n};\n\nweatherChart.setOption(option);\n```\n\n#### 说明\n\n- **scatter**：`scatter` 系列用于在地图上显示城市的气温数据。\n- **symbolSize**：根据温度大小调整气泡的大小，温度越高气泡越大。\n\n---\n\n## 三、流向图（Flow Map）\n\n流向图用于展示某一维度的数据流动趋势，比如物流或水流的方向和量。我们通过 `geo` 系列和 `lines` 系列来实现流向的展示。\n\n### 1. 示例：物流流向图\n\n```javascript\nvar flowChart = echarts.init(document.getElementById('flowChart'));\n\nvar flowData = [\n [{name: '北京'}, {name: '上海', value: 150}],\n [{name: '广州'}, {name: '深圳', value: 100}],\n [{name: '南京'}, {name: '杭州', value: 120}]\n];\n\nvar option = {\n title: {\n text: '物流流向图',\n left: 'center'\n },\n geo: {\n map: 'china',\n roam: true,\n itemStyle: {\n normal: {\n areaColor: '#a6c84c',\n borderColor: '#111'\n }\n }\n },\n series: [\n {\n type: 'lines',\n coordinateSystem: 'geo',\n zlevel: 2,\n effect: {\n show: true,\n period: 6,\n trailLength: 0,\n symbol\n\n: 'arrow',\n symbolSize: 15\n },\n lineStyle: {\n normal: {\n color: '#a6c84c',\n width: 2,\n opacity: 0.6,\n curveness: 0.2\n }\n },\n data: convertData(flowData)\n }\n ]\n};\n\nflowChart.setOption(option);\n```\n\n#### 说明\n\n- **lines**：`lines` 系列展示物流流向，使用 `effect.symbol` 定义流动的效果。\n\n---\n\n## 结语\n\n通过这些高级图表类型，ECharts 为我们提供了一个强大的数据可视化工具。无论是迁徙图、气象图，还是流向图，它们都能够在复杂数据的展示中发挥重要作用。\n",{"id":79,"created_at":80,"updated_at":80,"code":81,"author_id":7,"book_id":4,"slug":82,"article_id":83,"title":84,"sort_order":79,"content":85,"status":12}]