echarts 从0到1

copy_left

发布于 2021-12-08 10:09:57

1.5K00

代码可运行

文章被收录于专栏：方球方球

运行总次数：0

代码可运行

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类型:

number 数字
ordinal 字符
time 日期
float
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'
      }
    }
  ]
}

坐标轴

不同的图表使用不同的坐标系，对应的设置项也不同。

一般分为:

直角坐标系[柱状图], xAxis yAxis
极坐标系[饼图], radiusAxis angleAxis
雷达图坐标系[雷达图], radar
平行坐标系[], parallel parallelAxis
单一轴/线性 singleAxis
地理坐标系[地图], geo
日历坐标系[日历组件] 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文档

主题编辑器

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/10/3 下，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

api

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

api

登录后参与评论

0 条评论

热度