echarts 從0到1

echart從0到1Apache ECharts

一個基于 JavaScript 的開源可視化圖表庫， 這里記錄echart入門基礎概念和api使用

安裝

npm i -D echarts
// or
yarn add echarts

引入

import * as echarts from 'echarts'
// 安需引入
import { BarChart } from 'echarts

創建chart實例

const echart = ecahrts.init(element)

渲染

const options = {
  title: { text: '標題名稱' }，
  // 圖例
  legend: {}，
  // 提示器
  tooltip: {},
  // x軸
  xAxis: {
    // x軸分類,
    data: ['type01', 'type02', 'type03']
  },
  // y軸
  yAxis: {},
  // 圖形映射
  series: [
    {
       name: 'number'，
        // 圖表類型
       type: 'bar',
       // 數據, 順序與x軸類型一一對應
       data: [10, 20, 30] 
    }
  ]
}
// 渲染
ecahrt.setOptions(options)

圖表基礎組成

  • 圖表容器 element
  • 圖例 legend
  • 提示工具 tooltip
  • 數據集合 data
  • 圖例 chart
  • 坐標系/坐標軸 axis
  • 事件/行為 event/action

數據集合、轉換

除了通過獨立配置每一圖表數據， echart 提供 dataset 集中管理實例內的數據集合。

集合模式

數據的映射管理與集合的排列順序掛鉤

{
  
 dataset: {
    // 數據集合
    source: [
      // 第一列為 x軸分類
      ['product', '2015', '2016', '2017'],
      // 以下為對應數據集合
      ['Matcha Latte', 43.3, 85.8, 93.7], 
      // 每條數據與x類型字段一一對應, 等價: { product: 'Matcha Latte', '2015': 43.3, '2016': '85.8', '2017': 93.7 }
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  
  xAxis: { type: 'category' },
  yAxis: {},
  // 每條圖表聲明對應一條source數據
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}

[圖片上傳失敗...(image-57899-1633271812626)]

對象模式

數據的映射關系通過字段掛鉤

dataset: {
    // x 軸字段順序
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      // 數據集通過字段映射到圖表上
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]

修改行列映射

通過設置seriesLayoutBy 修改行或列的映射模式, 默認為: column 既 serices 的每一條對應數據內的一列

row 模式與 column 相反, serices 的每一條對應數據內的一行

option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      // 分類行
      ['product', '2012', '2013', '2014', '2015'],
      // 數據行
      [
        'Matcha Latte', // 列分類
        // 數據列
        41.1, 
        30.4, 
        65.1, 
        53.3
      ],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
     
    // row 模式, 對應數據行數量
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
     
    // column 模式, 對應數據列數量
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};

命名維度

可以使用dimensions 為各維度數據指定名稱, 方便在后續配置中指定具體的使用維度

dataset: [
  dimensions: [
    // 方式1: 純字符，將被賦值給name屬性
    'product'
    // 方式2：name屬性
    { name: 'product' }
    // 方式3：指定具體的維度類型, 優先級低于series
    { name: 'product', type: 'ordinal' }
  ]
]

type類型:

  1. number 數字

  2. ordinal 字符

  3. time 日期

  4. float

  5. int

指定數據映射

通過encode 指定軸對應展示的數據

{
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea']
    ]
  },
  xAxis: {},
  yAxis: { type: 'category' },
  series: [
    {
      type: 'bar',
      encode: {
        // 將 "amount" 列映射到 X 軸。
        x: 'amount',
        // 將 "product" 列映射到 Y 軸。
        y: 'product'
      }
    }
  ]
}

坐標軸

不同的圖表使用不同的坐標系，對應的設置項也不同。

一般分為:

  1. 直角坐標系[柱狀圖], xAxis yAxis
  2. 極坐標系[餅圖], radiusAxis angleAxis
  3. 雷達圖坐標系[雷達圖], radar
  4. 平行坐標系[], parallel parallelAxis
  5. 單一軸/線性 singleAxis
  6. 地理坐標系[地圖], geo
  7. 日歷坐標系[日歷組件] calendar

坐標系一般配置項

{
  // 直角坐標系
  xAxis: {
    // 坐標軸類型
    type: 'category',
    // 坐標軸標題
    name: 'xxx',
    // 坐標軸位置
    position: 'top',
    // 多個坐標軸之間的偏移量
    offset: 10,
    // 軸線
    axisLine: {
      // 線樣式
      lineStyle: { type: 'deshed' }
    },
    // 刻度
    axisTick: {
      // 線樣式
      lineStyle: { type: 'deshed' }
    },
    // 刻度標簽
    axisLable: {
      // 顯示格式
      formatter: '{value}元' 
    }
  }
}

樣式/ 主題

全局調色

{
  // 圖表將根據排列順序獲取配色
  color: [
    'red',
    'orange',
    ...
  ],
  dataset: [
    ['product', '2014', '2015', '2016'],
    [
        '毛毯',
        // red
        10,
        // 'orange'
        20,
        ....
    ]
  ]
}

獨立調色

series: [
  {
    type: 'bar',
    color: [ 'red', 'orange' ],
    data: ['毛毯', 10, 20, 30] // 缺失的配色將使用默認色
  }
]
// 全局調色優先級高于獨立調色

[圖片上傳失敗...(image-30c84b-1633271812626)]

細分樣式

不同組件或圖表存在細分的樣式配置屬性, 具體配置參考: 配置文檔

{
  xAixs: {
   // 標簽樣式   
   axisLabel: {
      color: '#fff',
      fontSize: 14
    },
    // 隱藏刻度線
    axisTick: false
  },
  series: [
    type: 'bar',
    color: 'orange',
    // 顯示柱狀圖背景
    showBackground: true
  ]
}

高亮樣式

emphasis 鼠標滑入高亮樣式

{
  series: {
    emphasis: { .... }   
 }
}

使用內置主題

var chart = echarts.init(dom, 'dark');

導入主題

// json 主題
$.getJSON('主題文件地址.json', function(themeJSON) {
  // 注冊主題
  echarts.registerTheme('主題名稱', JSON.parse(themeJSON));
  // 使用主題
  var chart = echarts.init(dom, '主題名稱');
});

// umd 主題
import '../主題文件.js'
// 使用主題
var chart = echarts.init(dom, '主題名稱');

交互| 事件、行為

綁定事件

cosnt chart = echarts.init(...)
chart.on('click', (params) => {....})

區分觸發區域

myChart.on('click', function(params) {
  if (params.componentType === 'markPoint') {
    // 點擊到了 markPoint 上
    if (params.seriesIndex === 5) {
      // 點擊到了 index 為 5 的 series 的 markPoint 上。
    }
  } else if (params.componentType === 'series') {
    if (params.seriesType === 'graph') {
      if (params.dataType === 'edge') {
        // 點擊到了 graph 的 edge（邊）上。
      } else {
        // 點擊到了 graph 的 node（節點）上。
      }
    }
  }
});

指定可觸發區域

// 單一區域
const query = 'series.line',


// or


// 多區域
const query = {
  ${mainType}Index: number // 組件 index
  ${mainType}Name: string // 組件 name
  ${mainType}Id: string // 組件 id
  dataIndex: number // 數據項 index
  name: string // 數據項 name
  dataType: string // 數據項 type，如關系圖中的 'node', 'edge'
  element: string // 自定義系列中的 el 的 name
}


// 綁定區域
chart.on('click', query, function() {});

主動觸發事件

chart.dispatchActon({
  type: 'hightlight'， // 事件類型
  seriesIndex: 0,  // 觸發圖表
  dataIndex: currentIndex // 數據項
})

富文本標簽

[圖片上傳失敗...(image-373852-1633271812626)]

提供多樣的自定義文本展示

{
  series: [
    ...,
    data: [
      {
        value: [10, 20, 30],
        label: {
          // 使用格式 {樣式片段名稱| 文本內容 }
          formatter: [
             '標題'，
             '{textStyle| 文本內容 }'
          ].join('\n')
        }
      }
    ]
  ],
  // 定義富文本樣式
  rich:{
    textStyle: {
      fontFaily: 'siyuan',
      fontSize: 14,
      borderRadius: [4, 4, 0, 0],
      align： 'center', // 定位
      color: 'orange' 
      backgroundColor: { image: '../bg.jpg' } // 圖片背景
    }
  }
}

ecahrts 常用API

  • init 初始化創建實例
  • disponse 銷毀指定實例、或元素上掛載的實例
  • use 注冊組件
  • registerTheme 注冊主題
  • registerMap 注冊geo或map圖表

echart實例常用API

  • setOption 設置/更新圖表
  • dispose 注銷實例
  • clear 清空組件和圖表
  • reseize 設置圖表尺寸, 不傳值時默認填充整個容器
  • on 綁定事件
  • off 取消事件
  • dispatchAction 主動觸發事件
  • showLoading 顯示加載動畫
  • hideLoading 隱藏加載動畫
  • group 分組

參考文檔

官方文件

API文檔

主題編輯器

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ECharts的快速上手 ECharts 的入門使用特別簡單, 5分鐘就能夠上手. 他大體分為這幾個步驟 步驟1：...
    東邪_黃藥師閱讀 912評論 0贊 4
  • 前言：策略模式和適配器模式很像 但前者策略的接口和相關類會暴露出來，并且每個策略的“計算內容”都不同【常用于計...
    程序員ken閱讀 1,032評論 0贊 0
  • 1.引入 官網下載js引入，npm引入，cdn引入 2.使用 首先準備一個具備寬高的容器，然后通過echarts提...
    三十六計至做筆記閱讀 1,782評論 0贊 0
  • 初次接觸 web 圖表開發的工程師，面對眾多的可視化工具庫難免會有疑惑，比如說： 這庫的產品定位？ 哪個更好學？ ...
    子龍0322閱讀 24,581評論 0贊 37
  • 16宿命：用概率思維提高你的勝算 以前的我是風險厭惡者，不喜歡去冒險，但是人生放棄了冒險，也就放棄了無數的可能。 ...
    yichen大刀閱讀 6,099評論 0贊 4