[echart] II. User manual and configuration item reading notes

Introduction

first echart

• introduce echart

npm install echarts --save

• vue

<template>
  <div class="about">
    <!--  by  ECharts  Prepare a with defined width and height  DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    
  components: {
    
  },
  mounted () {
    
    //  Based on the prepared dom, initialization echarts example 
    var myChart = echarts.init(document.getElementById('main'));
    //  Charting 
    myChart.setOption({
    
      title: {
    
        text: 'ECharts  Introductory example '
      },
      tooltip: {
    },
      xAxis: {
    
        data: [' shirt ', ' Woolen sweater ', ' Snow spins unlined upper garment ', ' The trousers ', ' High heels ', ' socks ']
      },
      yAxis: {
    },
      series: [
        {
    
          name: ' sales ',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  },
  data () {
    
    return {
    
    }
  },
}
</script>

echart5 New features

1. Dynamic narrative
The animation effect of smooth transition is added in the data switching

2. Visual design

• Optimize color matching ： The color saturation of the same type of data is consistent , Make the expressed importance consistent
• Labels in reports ： Not in a huddle , Labels can be displayed gracefully in confined space through layout strategies
• time axis
• focus Prompt box ： Beautification interface 、 And the function of sorting by category or value is added
• The dashboard
• Fan fillet ： In pie chart 、 Sunrise chart 、 Rectangular tree , You can adjust border-radius
• Decals

3. Interactivity

• State management
  When mouse focus To an element ,echart4 Will highlight the target through the highlighted state , but hover After the element ,echart4 The highlight will be cancelled , Change the target from the highlighted state to the normal state . stay echart4 On the basis of ,echart5 Added Fade out Characteristics of , stay focus After reaching the target , The target will highlight , Other elements fade out .

4. Performance improvement

5. Development experience

• Data sets ：ECharts 5 Strengthen the data conversion ability of data set
• internationalization

Advanced

echart The style of

echart The style of , It can be adjusted by the following means ：
Color theme （Theme）
Palette
Direct style setting （itemStyle、lineStyle、areaStyle、label、…）
Visual mapping （visualMap）

Data sets

  Data sets （dataset） Is a component dedicated to managing data . Although each series can be in series.data Set data in , But from ECharts4 Support Data sets Start , More recommended Data sets To manage data . Because of this , Data can be reused by multiple components , It is also convenient for “ Data and other configurations ” Separate configuration style . After all , At run time , Data is the most frequently changed , Most of the other configurations will not change .

  Conventional series Users are often required to process data first , Set the data partition to each series （ And category axis ） in . Besides , It is not conducive to multiple series sharing a single piece of data , It is also not conducive to chart type based on original data 、 The mapping arrangement of the series .

  The benefits of using datasets are as follows ：

• It can be close to the common thinking mode of data visualization ：（I） Provide data ,（II） Specify data to visual mapping , To form a chart .
• Data and other configurations can be separated . Data constant , Other configurations remain unchanged . Separate and easy to manage separately .
• Data can be reused by multiple series or components , For big data scenarios , You don't have to create a data for each series .
• Support more common formats of data , For example, a two-dimensional array 、 Object array, etc , To a certain extent, users are prevented from converting for data format .

It should be noted that ,dataset There are also two formats ： Two dimensional array and An array of objects

seriesLayoutBy It can be understood as taking what as x Axis
If the first act x Axis , Then the first column is the dimension ; If the first column is x Axis , Then take the first behavior dimension
As for the data , It's always y Axis

take dataset Data is mapped into a series of charts series, Yes, it is series.encode To configure the .

Not all charts currently support dataset. Support dataset The charts for are ： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom. In the future, there will be more charts to support

Axis

Rectangular coordinate system （grid/cartesian）： Namely x Axis 、y Axis
Uniaxial （singleAxis）：
Polar system （polar）： It is a circular report
Geographic coordinate system （geo）： It's a map
For some graphs without coordinate system , For example, pie chart 、 Funnel chart, etc

Configuration article

echart5 Supported graphics

echart5 The currently supported graphics can be viewed in the configuration item manual , As shown in the figure below