数据可视化 分类

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari 等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

提示

官网：https://echarts.apache.org/zh/index.html

刘春龙原创2026/3/5大约 1 分钟

容器大小和主题

容器大小

通常来说，需要在 HTML 中先定义一个 <div> 容器，并且通过 CSS 使得该容器具有宽度和高度。初始化的时候，传入该容器，图表的大小默认即为该容器的大小

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

刘春龙原创2026/3/5大约 2 分钟

折线图

折线图主要用来展示数据项随着时间推移的趋势或变化

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$zhe = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 500, height: 300 })
      window.addEventListener('resize', () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        })
      })
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

刘春龙原创2026/3/5大约 4 分钟

柱状图

柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$zhu = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 500, height: 300 })
      window.addEventListener('resize', () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        })
      })
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

刘春龙原创2026/3/5大约 4 分钟

饼图

基础饼图

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$pai = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
      window.addEventListener("resize", () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        });
      });
      var option = {
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              show: true, // 是否显示文本
            },
            data: [
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 234,
                name: "联盟广告",
              },
              {
                value: 1548,
                name: "搜索引擎",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};

刘春龙原创2026/3/5大约 2 分钟

散点图

基础散点图

散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$san = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 500, height: 300 })
      var option = {
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            symbolSize: 10, // 点的大小
            type: 'scatter',
            data: [
              // x轴如果type是类目时可以是一维数据
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
            ],
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

刘春龙原创2026/3/5大约 3 分钟

地图

地图主要用于地理区域数据的可视化

地图资源 API

http://datav.aliyun.com/portal/school/atlas/area_selector

刘春龙原创2026/3/5大约 4 分钟

K线图

Candlestick 即我们常说的 K 线图

同时支持 'candlestick' 和 'k' 这两种 'series.type'（'k' 会被自动转为 'candlestick'）

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$map = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 800, height: 500 })
      var option = {
        xAxis: {
          type: 'category',
          data: ['2027-10-24', '2027-10-25', '2027-10-26', '2027-10-27'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            type: 'candlestick',
            data: [
              [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42],
            ],
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

刘春龙原创2026/3/5大约 3 分钟

雷达图

雷达图（Radar Chart），也被称为蛛网图（Spider Chart）或星形图（Star Chart），是一种用来表示多维数据的图表。它以一个中心点为起点，沿着多个方向绘制出多个数据轴线，然后用不同的颜色或线条连接各个数据点，形成一个多边形。每个数据点代表一个维度，多边形的大小和形状反映了各维度数据之间的关系和差异。雷达图常用于比较多个对象或者评估一个对象的多个方面

刘春龙原创2026/3/5大约 2 分钟

热力图

热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用

可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 800, height: 500 })
      const hours = ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h']
      const days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday']
      const data = [
        [0, 0, 5],
        [0, 1, 7],
        [2, 3, 10],
        [3, 5, 2],
        [5, 5, 1],
        [6, 4, 3],
        [10, 2, 7],
        [3, 3, 6],
        [11, 2, 8],
        [11, 3, 10],
        [12, 4, 6],
        [5, 6, 1],
        [10, 4, 4],
        [10, 3, 7],
        [8, 1, 1],
        [8, 2, 1],
        [9, 2, 1],
        [8, 5, 2],
        [8, 3, 2],
        [9, 6, 1],
        [9, 3, 7],
      ]
      var option = {
        tooltip: {
          position: 'top',
        },
        xAxis: {
          type: 'category',
          data: hours,
        },
        yAxis: {
          type: 'category',
          data: days,
        },
        grid: {
          height: '70%',
          top: '10%',
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
        },
        series: [
          {
            name: '人力需求',
            type: 'heatmap',
            data: data,
            label: {
              show: true,
            },
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

刘春龙原创2026/3/5大约 1 分钟