📜 目录

1. 什么是数据可视化？
2. 手把手入门ECharts
3. 实战项目：布局与适配方案
4. 高级技巧：边框、图表与动态交互

---

一、什么是数据可视化？

1. 数据可视化的核心

一句话解释：将枯燥的数据转化为直观的图形，让人一眼看懂数据背后的故事！

• 目的：提升信息传递效率，比如用折线图展示销售额趋势，用饼图显示用户占比。
• 场景：企业报表、大屏监控、移动端图表、地理信息可视化等。

2. 常见可视化库对比

工具	特点	适用场景
ECharts	中文文档友好、免费开源	企业级大屏、快速开发
D3.js	高度灵活、学习成本高	高度定制化需求
Highcharts	商用需付费、图表美观	国际项目

推荐新手：从ECharts入手，功能强大且易上手！

---

二、手把手入门ECharts

1. 5步快速生成图表

<!-- 步骤1：引入ECharts -->
<script src="echarts.min.js"></script>

<!-- 步骤2：准备容器 -->
<div id="chart" style="width:600px; height:400px;"></div>

<script>
  // 步骤3：初始化实例
  const myChart = echarts.init(document.getElementById('chart'));

  // 步骤4：配置选项（核心！）
  const option = {
    title: { text: '销量统计' },
    xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫'] },
    yAxis: {},
    series: [{ type: 'bar', data: [20, 30, 15] }]
  };

  // 步骤5：应用配置
  myChart.setOption(option);
</script>

2. 关键配置解析

• title：图表标题
• tooltip：鼠标悬停提示
• legend：图例（控制显示哪些数据系列）
• series：核心数据配置，决定图表类型（如type: 'line'为折线图）

小技巧：直接复制ECharts官方示例，再按需修改！

---

三、实战项目：布局与适配方案

1. 项目适配方案（PC端）

• 需求：设计稿宽度1920px，需适配1024px~1920px屏幕。
• 方案：
  1. 使用flexible.js动态调整HTML字体大小。
  2. 用rem单位实现元素自适应。
  3. 添加媒体查询约束极限值：

  @media (max-width: 1024px) { html { font-size: 42.66px; } }
  @media (min-width: 1920px) { html { font-size: 80px; } }
  

2. 边框图片妙用

场景：多个模块需要统一风格的渐变边框。

.panel {
  border: 30px solid transparent;
  border-image-source: url(border.png);
  border-image-slice: 51 38 20 132;  /* 上右下左切割 */
  border-image-repeat: stretch;      /* 拉伸填充 */
}

原理：将边框图片切割为九宫格，四角固定，中间部分拉伸或平铺。

---

四、高级技巧：图表与动态交互

1. 饼图定制化

series: [{
  type: 'pie',
  data: [
    { value: 40, name: '湖北', itemStyle: { color: '#00ff00' } },  // 单独设置颜色
    { value: 25, name: '山东' }
  ],
  label: { color: 'white' },        // 文字颜色
  labelLine: { lineStyle: { color: '#666' } }  // 引导线样式
}]

2. 柱形图动态切换

需求：点击选项卡切换年/季/月数据。

// 模拟数据
const yearData = [100, 200, 300];
const monthData = [50, 150, 250];

// 切换逻辑
function updateChart(data) {
  myChart.setOption({ series: [{ data }] });
}

3. 雷达图与半圆进度条

雷达图配置：

radar: {
  indicator: [  // 维度名称
    { name: 'PM2.5', max: 100 },
    { name: 'CO', max: 100 }
  ]
}

半圆进度条：将饼图起始角度设为startAngle: 180，并隐藏下半部分。

---

🎯 总结与资源推荐

1. 核心要点：
   • ECharts配置靠“抄改查”，无需死记硬背！
   • 适配方案用rem + flexible.js，边框图片解决重复样式。
2. 学习资源：
   • ECharts官方文档
   • Flex布局实战教程

鼓励实践：克隆一个GitHub可视化项目，动手修改配置，观察效果变化！