ECharts 数据可视化实战

> 建议使用固定版本号，避免主版本更新造成的不兼容问题。

### 使用 npm 安装（Vue/React 等项目）
```bash
npm install echarts --save

然后在项目中按需引入或全量引入：

import * as echarts from 'echarts';
// 或者只引入需要的组件（缩减打包体积）
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, GridComponent, CanvasRenderer]);

快速上手：绘制第一个图表

1. 创建 DOM 容器

在 HTML 中准备一个具有明确高度和宽度的元素。

<div id="main" style="width: 600px;height:400px;"></div>

2. 初始化 ECharts 实例

// 基于准备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));

3. 编写配置项并渲染

var option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',          // 柱状图
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
myChart.setOption(option);

刷新页面，你将看到一张柱状图。这就是 ECharts 的基本流程：创建容器 → 初始化对象 → 传入配置项。

使用 echarts.init 时还可以传入第二个参数指定主题名称，例如 'dark'（需要提前引入对应主题文件）。

核心配置解析

ECharts 的配置项采用声明式风格，层级清晰，常用部分包括：

系列（series）是灵魂

series 数组中的每一项代表一个数据系列，通过 type 字段指定图表类型，如：'line'、'bar'、'pie'、'scatter'、'effectScatter'（涟漪散点图）、'candlestick'（K线图）、'heatmap'、'tree'、'treemap'、'map' 等。不同的 type 需要搭配不同的坐标系或布局，例如饼图不需要 xAxis、yAxis。

常用图表实战示例

折线图与面积图

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,    // 使折线从坐标轴起点开始
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: { type: 'value' },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true,         // 平滑曲线
    areaStyle: {          // 面积图效果
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: 'rgba(255, 158, 68, 0.6)' },
          { offset: 1, color: 'rgba(255, 158, 68, 0.1)' }
        ]
      }
    }
  }]
};

堆叠柱状图

option = {
  xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: {},
  series: [
    { name: '产品A', type: 'bar', stack: 'total', data: [320, 302, 341, 374] },
    { name: '产品B', type: 'bar', stack: 'total', data: [120, 132, 101, 134] },
    { name: '产品C', type: 'bar', stack: 'total', data: [220, 182, 191, 234] }
  ]
};

设置相同的 stack 值即可堆叠。

动态饼图

option = {
  title: { text: '某站点用户访问来源', left: 'center' },
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

交互与动态更新

响应屏幕大小变化

window.addEventListener('resize', () => {
  myChart.resize();
});

在 React/Vue 中需要在组件卸载时移除监听，并调用 myChart.dispose() 释放资源。

动态数据加载

使用 setOption 既可以初次绘制，也可以更新图表。更新时默认会合并配置（merge）。

function fetchData() {
  // 模拟异步获取数据
  setTimeout(() => {
    var newData = [Math.random()*100, Math.random()*100, Math.random()*100];
    myChart.setOption({
      series: [{ data: newData }]
    });
  }, 1000);
}

数据区域缩放与拖拽

// 在 option 中加入 dataZoom 组件
dataZoom: [
  { type: 'slider', start: 0, end: 100 },  // 滑动条型
  { type: 'inside' }                       // 鼠标滚轮型
]

事件监听

可以监听用户操作，如点击图表元素、图例切换等。

myChart.on('click', function (params) {
  console.log('点击了：', params.name, params.value);
  // 可用于钻取数据、跳转等
});

主题随心换

使用官方主题

ECharts 官方提供了多套主题（vintage, dark, infographic, macarons 等）。在 CDN 或 npm 包中引入对应 JS 文件后，初始化时指定主题名：

<script src="echarts.js"></script>
<script src="theme/vintage.js"></script>
<script>
  var chart = echarts.init(dom, 'vintage');
</script>

（npm 项目中可 import 'echarts/theme/vintage' 但需确保主题包已安装）

自定义主题

通过 ECharts 主题构建工具 可以快速在线定制颜色、字体、背景等，导出 JSON 文件后注册并使用：

fetch('/myTheme.json')
  .then(res => res.json())
  .then(themeObj => {
    echarts.registerTheme('myTheme', themeObj);
    var myChart = echarts.init(dom, 'myTheme');
  });

进阶特性速览

• 双轴与多轴：设置多个 yAxis，系列中通过 yAxisIndex 指定对应的轴。
• 富文本标签：使用 rich 对象在 label 中实现复杂的文字排版和样式。
• 图形元素缩放：利用 roam 属性开启地图或散点图的缩放和平移。
• 视觉映射（visualMap）：根据数据值映射颜色、大小等视觉通道，适用于热力图等。
• 自定义图形：通过 graphic 组件添加自定义的文本、图片、矢量图形等。
• 动态排序图：设置 dynamicData 相关选项，实现随时间变化的排序动画。
• 地图可视化：ECharts 支持中国地图、省市地图以及世界地图，需注册相应地图数据（可通过 echarts.getMap() 或 SVG 路径实现）。

实战项目：销售数据看板

目标：构建一个展示公司季度销售数据的综合看板，包含总览数字、趋势图、品类占比和地图分布。

HTML 结构

<div class="dashboard">
  <div class="total" id="total-sales"></div>
  <div class="chart" id="trend-chart"></div>
  <div class="chart" id="category-pie"></div>
  <div class="map" id="sales-map"></div>
</div>

总览数据——使用 graphic 绘制大数字

var totalOption = {
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '总销售额 ¥ 12,835,600',
          fontSize: 36,
          fontWeight: 'bold',
          fill: '#1890ff'
        }
      }
    ]
  }
};
var totalChart = echarts.init(document.getElementById('total-sales'));
totalChart.setOption(totalOption);

月销售趋势——折线图+面积图

var trendOption = {
  title: { text: '月销售额趋势' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] },
  yAxis: {},
  series: [{
    name: '销售额',
    type: 'line',
    areaStyle: {},
    data: [150, 230, 224, 218, 135, 147],
    smooth: true
  }]
};

品类占比——环形图

var pieOption = {
  title: { text: '品类销售占比', left: 'center' },
  series: [{
    name: '品类',
    type: 'pie',
    radius: ['40%', '70%'],  // 环形
    label: { show: false },
    data: [
      { value: 1048, name: '电子产品' },
      { value: 735, name: '服装' },
      { value: 580, name: '食品' },
      { value: 484, name: '家居' }
    ]
  }]
};

地图销售分布

需要先注册地图数据，通常使用各省市的 GeoJSON：

// 假设已通过 fetch 加载了 chinaGeoJSON
echarts.registerMap('china', chinaGeoJSON);
var mapOption = {
  title: { text: '各省销售额', left: 'center' },
  visualMap: {
    min: 0,
    max: 5000,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: { color: ['#e5f1ff', '#003ba6'] }
  },
  series: [{
    name: '销售额',
    type: 'map',
    map: 'china',
    roam: false,
    label: { show: true },
    data: [
      { name: '北京', value: 4800 },
      { name: '上海', value: 4500 },
      // ... 其他省份数据
    ]
  }]
};