Echart from 0 to 1Apache ECharts

An open source visual chart library based on JavaScript that documents the basic concepts and API usage of Echart

The installation

npm i -D echarts
// or
yarn add echarts
Copy the code

The introduction of

Import * as echarts from 'echarts' // import {BarChart} from 'echarts'Copy the code

Create chart instance

const echart = ecahrts.init(element)
Copy the code

Apply colours to a drawing

Const options = {title: {text: 'title'}, // legend: {}, // tooltip: {}, // xAxis: {// x axis category, data: {// x axis category, data: ['type01', 'type02', 'type03']}, // yAxis: {}, // graph mapping series: [{name: 'number', // graph type type: }]} // Render ecahrt.setOptions(options)Copy the code

Chart Basic Composition

  • Diagram container Element
  • Legend legend
  • Tooltip
  • Data set data
  • Legend chart
  • Coordinate system/coordinate axis axis
  • Event /action Event/Action

Data set, transformation

In addition to configuring each chart data independently, ECHART provides the DATASET to centrally manage data sets within instances.

A collection of patterns

Mapping management of data is tied to the ordering of collections

{dataset: {// Dataset source: [// The first column is the X-axis classification ['product', '2015', '2016', '2017'], // The following is the corresponding data set ['Matcha Latte', 43.3, 85.8, 93.7], // Each data corresponds to the x-type field. Equivalent: {product: 'Matcha places',' 2015 ': 43.3,' 2016 ':' 85.8 ', '2017' : 93.7} [' Milk Tea, 83.1, 73.4, 55.1], [the Cocoa ' 'is Cheese, 86.4, 65.2, 82.5], [' Walnut Brownie', 72.4, 53.9, 39.1]]}. XAxis: {type: 'category'}, yAxis: {}, // Each chart declaration corresponds to a source data series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar' }] }Copy the code

Object pattern

The mapping of data is linked by fields

Dataset: {// X-axis field order (dimensions: ['product', '2015', '2016', '2017']), source: [// Dataset mapped to graph by field {product: 'Matcha places',' 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': Walnut 72.4, '2016' : 53.9, '2017' : 39.1}}], xAxis: {type: 'category'}, yAxis: {}, series: [{type: "bar"}, {type: 'bar' }, { type: 'bar' }]Copy the code

Modifying row and column mappings

Set seriesLayoutBy to change the mapping mode of rows or columns. The default value is column, which is a column in the corresponding data of each serices

Row pattern is the opposite of column, where each row of serices corresponds to a row within the data

option = { legend: {}, tooltip: {}, dataset: { source: [/ / classification line [' product ', '2012', '2013', '2014', '2015'], / / data row [' Matcha places', / / column sorting / / data column 41.1, 30.4, 65.1, 53.3]. [' Milk Tea ', 86.5, 92.1, 85.7, 83.1], [the Cocoa ' 'is Cheese, 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 mode, corresponding rows {type: 'bar', seriesLayoutBy: 'row'}, {type: 'bar', seriesLayoutBy: 'row'}, {type: 'bar', seriesLayoutBy: 'row'}, // column mode, corresponding number of data columns {type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 } ] };Copy the code

Naming the dimension

You can use Dimensions to specify a name for each dimension data so that specific dimensions can be specified in subsequent configurations

Dataset: [dimensions: [// Mode 1: pure character, will be assigned to name attribute 'product' // Mode 2: Name attribute {name: 'product'} series {name: 'product', type: 'ordinal'}]]Copy the code

Type type:

  1. The number of digital

  2. The ordinal character

  3. The date time

  4. float

  5. int

Specifying a data map

Encode is used to specify the data corresponding to the display axis

{ dataset: { source: [[' score ', the 'amount', 'product'], [89.3, 58212, 'the Matcha places'], [57.1, 78254, "Milk Tea"]]}, xAxis: {}, yAxis: {type: 'category'}, series: [{type: 'bar', encode: {// map the "amount" column to the X-axis. 'amount', // map the 'product' column to the Y-axis. Y: 'product'}}]}Copy the code

coordinate

Different charts use different coordinate systems and have different Settings.

Generally divided into:

  1. Rectangular coordinate systemxAxis yAxis
  2. Polar coordinates [pie chart]radiusAxis angleAxis
  3. Radar map coordinate system [radar map],radar
  4. Parallel coordinate system [],parallel parallelAxis
  5. Single axis/linearsingleAxis
  6. Geographic coordinate system [map],geo
  7. Calendar coordinate system [calendar component]calendar

General configuration items of the coordinate system

{// Coordinate system xAxis: {// coordinate system type type: 'category', // coordinate system title name: 'XXX ', // coordinate system position: 'top', // Offset between coordinate axes: 10, // axis axisLine: {lineStyle: {type: 'deshed'}}, // scale axisTick: {// lineStyle lineStyle: {type: 'deshed'}}, // scale label axisLable: {// display format formatter: '{value} meta '}}}Copy the code

Style/Theme

Global color

{/ / chart according to the order for color matching color: [' red ', 'orange',... , the dataset: [[' product ', '2014', '2015', '2016'], [' blanket ', / / red 10, 20, / / 'orange'...]]}Copy the code

Independent toning

Series: [{type: 'bar', color: [' red', 'orange'], data: [' blanket ', 10, 20, 30] // Missing color matching will use the default color}] // Global color preference over independent color matchingCopy the code

Subdivision style

There are subdivided style configuration properties for different components or diagrams. For details, see configuration documentation

AxisLabel: {color: '# FFF ', fontSize: 14}, // Hide the calibration line axisTick: false}, series: [type: ShowBackground: true]}Copy the code

Highlighting the style

Emphasis Mouse slide into highlight style

{ series: { emphasis: { .... }}}Copy the code

Using built-in themes

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

Import the theme

// json theme $.getjson (' theme file address. Json ', function(themeJSON) {// registerTheme echarts.registertheme (' theme name ', json.parse (themeJSON)); Var chart = echarts.init(dom, 'theme name '); });Copy the code
// umd theme import '.. Var chart = echarts.init(dom, 'theme name ');Copy the code

Interactive | events and behavior

The binding event

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

Distinguish trigger areas

myChart.on('click', Function (params) {if (params.ponentType === 'markPoint') {// If (params.seriesIndex === 5) {// Click on markPoint for series with index 5. } } else if (params.componentType === 'series') { if (params.seriesType === 'graph') { if (params.dataType === 'edge') { // Click on the edge of the graph. } else {// Click on the graph's node. }}}});Copy the code

Specifies the trigger zone

// Single area const query = 'series.line', // or // multiple area const query = {${mainType}Index: number // component Index ${mainType}Name: String // Component name ${mainType}Id: string // Component Id dataIndex: number // Index name: string // Data item name dataType: String // Data item type, such as 'node', 'edge' element in the diagram: Chart. on('click', query, function() {}); chart.on('click', query, function() {});Copy the code

Active trigger event

Chart.dispatchacton ({type: 'hightlight', seriesIndex: 0, // trigger dataIndex: currentIndex // data item})Copy the code

Rich text tag

Provides a variety of custom text display

{series: [..., data: [{value: [10, 20, 30], label: {/ / use the format {style fragment name | text} the formatter: [' title ', '{textStyle | text}']. Join (' \ n ')}}]], / / define rich text style rich: {textStyle: {fontFaily: 'siyuan, fontSize: 14, borderRadius: [4, 4, 0, 0], align: 'center', /bg.jpg' // background}}}Copy the code

Ecahrts commonly used API

  • Init Initializes the creation of the instance
  • Disponse destroys the specified instance, or instances mounted on the element
  • Use Registered components
  • RegisterTheme Registers the theme
  • RegisterMap Registers geo or map charts

Common apis for echart instances

  • SetOption sets/updates the chart
  • Dispose Dispose instance
  • Clear Clears components and charts
  • Reseize sets the chart size and fills the entire container by default when no value is passed
  • On binding event
  • Off Cancel event
  • DispatchAction Actively triggers events
  • ShowLoading Displays loading animations
  • HideLoading hides loading animations
  • Group, a group

Reference documentation

Official documents

The API documentation

Theme editor