echarts 从0到1

作者: copyLeft | 来源:发表于2021-10-03 22:38 被阅读0次

echarts 从0到1
从0到0，从0到1。
从 0 到 1 认识从 0 到 1
从1到0，0到1。
从0到1
从0到1
从0到1
《从0到1》
从0到1
从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类型:

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文档

主题编辑器

echarts 从0到1
echart从0到1Apache ECharts 一个基于 JavaScript 的开源可视化图表库，这里记录e...
从0到0，从0到1。
昨天和一客户交流，听到这么一句话，我现在的阶段勉强算0到0的阶段，到那个1的阶段还没有看到，或者说并不知道那个1在...
从 0 到 1 认识从 0 到 1
看了太多从 0 到 1 的标题了，总感觉那是在乱用流行的标题，记得这个标题是从阿里开始的，从 0 到 1 的书，活...
从1到0，0到1。
把经历过的一切事情都归零是件很难可以做到的事情，并不会像计算器那么简单。有时候想，如果人的大脑能像机器那样多好，...
从0到1
【阅读感悟】书名《书都不会读，你还想成功》听了猫叔“更好的表达课”，发现自己太差劲了，做什么事都是三分热度，不...
从0到1
1第一层境界：企业只是制造满足市场需求的产品，只要有原型，工业流水线可以让产品大量地复制生产出来。但产品有生命周期...
从0到1
1创造性垄断就是新产品既让大众受益，又可以给创造者带来长期利润。竞争意味着大家都没有利润，产品没有实质差异，而且...
《从0到1》
经营一个优秀企业的七大问题：工程问题、时机问题、垄断问题、团队问题、销售问题、持久问题、秘密问题。——《从0到1：...
从0到1
开一间工作室是我的梦想。为此，我上了创业课，读了大量书，取得了正面管教讲师资格，成为了一名鼓励咨询师和个人成长建...
从0到1
这两天没上班，最大的变化是什么？那就是对时间的使用方式。用一句话概括，就是从浪费时间到打发时间的转变。浪费时间，...