可视化魔法指南-CSDN博客

本文链接：https://blog.csdn.net/m0_72030584/article/details/147742457

🎨 ECharts数据可视化魔法指南

🌟 ECharts：数据的艺术画笔

生活类比：

想象ECharts是一家魔法餐厅，你只需告诉厨师(代码)你想要的菜品类型(图表类型)和口味偏好(配置项)，它就能将你的原料(数据)转变成视觉盛宴。不同于普通餐厅，这家餐厅的菜品会根据食材的变化而自动调整(响应式)，甚至能根据顾客的互动改变形态(交互功能)。

🚀 ECharts基本使用流程

📝 Hello World示例

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 1⃣ 准备容器 -->
  <div id="main" style="width: 600px; height: 400px;"></div>
  
  <script>
    // 2⃣ 初始化实例
    const chart = echarts.init(document.getElementById('main'));
    
    // 3⃣ & 4⃣ 准备配置和数据
    const option = {
     
      title: {
     
        text: '我的第一个图表'
      },
      tooltip: {
     },
      legend: {
     
        data: ['销量']
      },
      xAxis: {
     
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {
     },
      series: [{
     
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    
    // 5⃣ & 6⃣ 设置选项并渲染
    chart.setOption(option);
  </script>
</body>
</html>

🎭 ECharts配置系统：乐高积木式构建

mindmap
  root((ECharts配置项))
    标题(title)
      主标题
      副标题
    图例(legend)
      位置
      图标
    提示框(tooltip)
      触发方式
      格式化
    坐标轴(axis)
      x轴
      y轴
    系列(series)
      图表类型
      数据
    视觉映射(visualMap)
      颜色范围
      大小范围
    交互(event)
      点击
      缩放

生活类比：

ECharts的配置系统就像搭建乐高模型——每个配置项是一块特定功能的积木。主体积木(series)决定你在建造什么(柱状图、折线图)，装饰积木(title、legend)增加细节，交互积木(tooltip、事件)让模型具有动态特性。这些积木可以独立调整，也能协同工作，创造出精确符合你期望的视觉效果。

📊 ECharts常用图表：视觉百宝箱

🎪 展示基础图表类型

// 柱状图示例
const barOption = {
   
  xAxis: {
   
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
   
    type: 'value'
  },
  series: [{
   
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    showBackground: true,
    backgroundStyle: {
   
      color: 'rgba(220, 220, 220, 0.8)'
    }
  }]
};

// 折线图示例
const lineOption = {
   
  xAxis: {
   
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
   
    type: 'value'
  },
  series: [{
   
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
  }]
};

// 饼图示例
const pieOption = {
   
  tooltip: {
   
    trigger: 'item'
  },
  legend: {
   
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
   
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      data: [
        {
    value: 1048, name: '搜索引擎' },
        {
    value: 735, name: '直接访问' },
        {
    value: 580, name: '邮件营销' },
        {
    value: 484, name: '联盟广告' },
        {
    value: 300, name: '视频广告' }
      ],
      emphasis: {
   
        itemStyle: {
   
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

生活类比：

不同类型的图表就像厨房中的各种烹饪工具：

柱状图像多格冰格模具，清晰分隔不同类别的对比

折线图像温度计读数记录，展示数据随时间的变化趋势

饼图像分切的蛋糕，直观显示整体中各部分的占比

散点图像撒在画布上的星星，揭示数据点之间的分布关系和可能的聚类

🔮 ECharts数据流：从原始到视觉的魔法转化

🧪 数据转换示例

// 原始数据(可能来自API)
const rawData = [
  {
    month: 'Jan', sales: 1000, profit: 500 },
  {
    month: 'Feb', sales: 1500, profit: 70