Ellie's Blog
0%

ECharts 01 基礎 安裝載入 基礎名詞解釋

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

ECharts 配置语法

Documentation - Apache ECharts

實踐筆記

  • 練習載入 第一個頁面
    6/28 echarts first

  • 最簡單的圖表 範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    var option = {
      title: {
        text: 'ECharts 数据统计',
      },
      tooltip: {},
      legend: {
        data: ['用户来源'],
      },
      xAxis: {
        data: ['Android', 'IOS', 'PC', 'Ohter'],
      },
      yAxis: {},
      series: [
        {
          name: '访问量',
          type: 'line',
          data: [500, 200, 360, 100],
        },
      ],
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);

筆記

  • ECharts 特性
    • 丰富的可视化类型:
      • 提供了常规的折线图、柱状图、散点图、饼图、K 线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，
    • 多种数据格式无需转换直接使用:
      • 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
    • 移动端优化:
      • 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
    • 多渲染方案，跨平台使用:
      • 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
    • 深度的交互式数据探索:
      • 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作
    • 动态数据:
      • 数据的改变驱动图表展现的改变。

通过以下几种方式获取 Apache ECharts

标题

1
2
3
title: {
  text: '第一个 ECharts 实例';
}

提示信息

1
tooltip: {},

图例组件

1
2
3
4
5
6
7
8
9
10
11
12
13
legend: {
  data: [
    {
      name: '系列1',
      // 强制设置图形为圆。
      icon: 'circle',
      // 设置文本为红色
      textStyle: {
        color: 'red',
      },
    },
  ];
}

X 轴

1
2
3
xAxis: {
  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'];
}

Y 轴

1
2
yAxis: {
}

系列列表

1
2
3
4
5
6
7
series: [
  {
    name: '销量', // 系列名称
    type: 'bar', // 系列图表类型
    data: [5, 20, 36, 10, 10, 20], // 系列中的数据内容
  },
];

圖表類型

  • **type: ‘bar’**：柱状/条形图
  • **type: ‘line’**：折线/面积图
  • **type: ‘pie’**：饼图
  • **type: ‘scatter’**：散点（气泡）图
  • **type: ‘effectScatter’**：带有涟漪特效动画的散点（气泡）
  • **type: ‘radar’**：雷达图
  • **type: ‘tree’**：树型图
  • **type: ‘treemap’**：树型图
  • **type: ‘sunburst’**：旭日图
  • **type: ‘boxplot’**：箱形图
  • **type: ‘candlestick’**：K 线图
  • **type: ‘heatmap’**：热力图
  • **type: ‘map’**：地图
  • **type: ‘parallel’**：平行坐标系的系列
  • **type: ‘lines’**：线图
  • **type: ‘graph’**：关系图
  • **type: ‘sankey’**：桑基图
  • **type: ‘funnel’**：漏斗图
  • **type: ‘gauge’**：仪表盘
  • **type: ‘pictorialBar’**：象形柱图
  • **type: ‘themeRiver’**：主题河流
  • **type: ‘custom’**：自定义系列