Echarts- Data visualization

Introduce Echarts –

ECharts is an open source visualization library using JavaScript, which can run smoothly on PC and mobile devices. It is compatible with most browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and relies on ZRender, the vector graphics library. Provide intuitive, interactive and highly customizable data visualization charts.

Opacity:

Is a JS plug-in
Good performance can run smoothly on PC and mobile devices
Compatible with mainstream browsers
Provides many commonly used diagrams and can be customized.

Echarts experience –

Official tutorial: Five minutes to get started with ECharts

Own steps:

Download echarts echarts.apache.org/zh/download…
The introduction of echartsdist/echarts.min.js
Prepare a DOM with size (width and height)

<div id="main" style="width: 600px; height:400px;"></div>
Copy the code

Initialize an echart instance

var myChart = echarts.init(document.getElementById('main'));
Copy the code

Specify the configuration items and data for the diagram (follow the documentation for examples to find options)

var option = {
    xAxis: {
        type: 'category'.data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']},yAxis: {
        type: 'value'
    },
    series: [{
        data: [820.932.901.934.1290.1330.1320].type: 'line'}};Copy the code

Display the chart using the configuration items and data you just specified

myChart.setOption(option);
Copy the code

Echarts- Basic configuration

Series xAxis yAxis Grid Tooltip Title Legend Color

series
- Series list. Each series passes throughtypeDecide on your own chart type
- In plain English: icon data, which specifies what type of icon can be overlapped by multiple charts.
XAxis: The x axis of a rectangular coordinate system grid
YAxis: The y axis of a rectangular coordinate system grid
Grid: Drawing grid in a rectangular coordinate system
Title: Title component
Tooltip: Tooltip component
Legend: legend component
Color: Palette color list

Demo code:

var option = {
    xAxis: {
        type: 'category'.data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']},yAxis: {
        type: 'value'
    },
    series: [{
        data: [820.932.901.934.1290.1330.1320].type: 'line'.name:'Line chart'
    },
    {
        data: [22.333.111.222.444.Awesome!.777].type: 'bar'.name:'Pie chart'}].grid: {
        show: true
    },
    title: {
        text: 'title'
    },
    tooltip: {
        padding: 20
    },
    legend: {
        data: ['Line chart']},color: ['red'.'green']};Copy the code

Echarts – pie chart

Step analysis

Encapsulate the function in preparation for subsequent incoming real data
Initialize echarts
To set the configuration item, use an empty option
Create a chart
Find the official example
You can customize charts as required

Step 1: Echarts basic steps

function pieChart() {
  let myChart = echarts.init(document.querySelector('.pie'));
	let option = {};
	myChart.setOption(option);
}
Copy the code

Step 2: Follow the official example

Official (example: echarts.apache.org/examples/zh…

Leave only series data configuration, delete all others.

Step 3: Customize the configuration

Add a title with the title color # 6D767E
Added mouse moving prompt. (for example: “Students from all over Beijing, 12 students accounting for 6.8%”)
Series data
- Change name to ‘Local Student Distribution’
- Pie chart, 10% inside radius, 60% outside radius
- centered
- Area of the model
- Fan-shaped rounded corners (4px)

The configuration items are as follows:

let option = {
  tooltip: {
    // {a} represents the name of a series
    // {b} represents the name of series. Data in the data
    // {c} represents the value of each item
    // {d} represents percentages
    formatter: '{a} 

{b} {c}
  },
  title: {
    text: 'native Hometown'.textStyle: {
      color: '#6d767e' // Title demo}},series: [{name: 'Regional Population Distribution'.type: 'pie'.// pie indicates a pie chart
      radius: ['10%'.'65%'].// The radius of the inner and outer circles
      center: ['50%'.'50%']./ / center
      roseType: 'area'.// Area indicates the area mode and RADIUS indicates the radius mode
      itemStyle: { // Set each item
        borderRadius: 4.// Fan-shaped edges with rounded corners
      },
      data: [{value: 40.name: 'Beijing' },
        { value: 38.name: 'shandong' },
        { value: 32.name: 'Shanghai' },
        { value: 30.name: 'jiangsu' },
        { value: 28.name: 'hebei' },
        { value: 26.name: 'the shanxi' },
        { value: 22.name: 'henan' },
        { value: 18.name: 'the liaoning'}]}]};Copy the code

Echarts – line chart

Step analysis

Encapsulate the function in preparation for subsequent incoming real data
Initialize echarts
To set the configuration item, use an empty option
Create a chart
Find the official example
You can customize charts as required

Step 1: Echarts basic steps

function lineChart() {
  let myChart = echarts.init(document.querySelector('.line'));
  let option = {};
  myChart.setOption(option);
}
Copy the code

Step 2: Follow the official example

Official (example: echarts.apache.org/examples/zh…

Tooltip – Enter a prompt for moving in
Title – title
XAxis – x axis
YAxis – y
DataZoom — Data scaling component
Series — Series data

Keep the preceding configuration items and delete others

Step 3: Customize the configuration

Remove the code from the official example except option, and add your own X-axis data and series data.
Series data
- Add a line
- Change name to ‘expected salary’ and ‘actual salary’
- The inflection point of line is the smooth inflection point
- Line and X-axis alignment position, no special markingsymbol: 'none'
Analyze data scaling component dataZoom
Add a title with the title color # 6D767E
Analyze tooltip (official sample included).
Add legend 20px from the top.
Analyze the stratygap strategy

The configuration option is as follows:

let option = {
  / / legend
  legend: {
    top: 20,},// Mouse over prompt
  tooltip: {
    trigger: 'axis'./ / shaft trigger
    position: function (pt) {
      // pt is an array, pt[0] represents the x-coordinate position, and '10%' represents the Y-axis direction always remaining 10% away from the top
      // So this means that the position of the prompt box will move left and right with the mouse, but the vertical position will always remain the same.
      return [pt[0].'10%']; }},/ / title
  title: {
    text: 'pay Salary.textStyle: {
      color: '#6d767e'}},xAxis: {
    type: 'category'.boundaryGap: false.// White space on both sides of the X-axis. False indicates that no space is left
    data: ['Joe'.'bill'.'zhang fei'.'zhaoyun'.'dog elder brother'.'Joe'.'bill'.'zhang fei'.'zhaoyun'.'dog elder brother'.'Joe'.'bill'.'zhang fei'.'zhaoyun'.'dog elder brother'.'Joe'.'bill'.'zhang fei'.'zhaoyun'.'dog elder brother']},yAxis: {
    type: 'value'.// If the Y-axis type is value, the white space policy refers to the extension of the data.
    For example, if the maximum number in the graph is 17000, the maximum number on the Y-axis is about 17000 + 17000 * 50%
    boundaryGap: [0.'50%'],},// Data scaling component
  dataZoom: [
    / / {
    // type: 'inside', // Put the drag bar inside the axis, it is invisible, but can be dragged
    // start: 0,
    // end: 10
    // },
    {
      type: 'slider'.// Drag the bar to the outside of the axis (default is slider)
      start: 0.// Drag the slider to the starting position (this is a percentage)
      end: 15 // Drag the slider to the end position (this is a percentage)}].// Data section
  series: [{name: 'Expected salary'.type: 'line'.smooth: true.// Indicates a smooth curve
      symbol: 'none'.// The style of the inflection position on the line, none means none; Can also be a solid circle, hollow circle, square.....
      itemStyle: { // Control the color of this line separately
        color: '#ee6666'
      },
      data: [8300.9600.15000.17000.12000.8300.9600.15000.17000.12000.8300.9600.15000.17000.12000.8300.9600.15000.17000.12000] {},name: 'Real salary'.type: 'line'.smooth: true.symbol: 'none'.itemStyle: { // Control the color of this line separately
        color: '#5470c6'
      },
      data: [9600.15000.17000.12000.8300.9600.15000.17000.12000.8300.9600.15000.17000.12000.8300.9600.15000.17000.12000.13000]]}};Copy the code

Echarts – histogram

Step analysis

Encapsulate the function in preparation for subsequent incoming real data
Initialize echarts
To set the configuration item, use an empty option
Create a chart
Find the official example
You can customize charts as required

Step 1: Echarts basic steps

function barChart() {
  let myChart = echarts.init(document.querySelector('.barChart'));
  let option = {}
  myChart.setOption(option);
}
Copy the code

Step 2: Follow the official example

Official (example: echarts.apache.org/examples/zh…

Tooltip tooltip component
Legend legend
XAxis x
YAxis y
Series data

Keep the preceding configuration items and delete others.

Step 3: Customize the configuration

Modify data in X-axis and series

[Group '1'.'2 groups'.'three groups'.'four groups'.'5'.'6 groups'.'seven groups']
[83.57.90.78.66.76.77.87.69.92.88.78]
[2.1.3.4.2.5.2.2.4.1.6.2]
[3.2.1.5.1.2.3.4.5.2.2.4]
[3.2.1.5.1.2.3.4.5.2.2.4]
Copy the code

Multiple Y
- The first Y-axis (index 0) represents the average score, ranging from 0 to 100. According to the number 10, the Y-axis is divided into 10 parts
- The second Y-axis (index 1) represents the number of students, ranging from 0 to 10 (depending on the class). According to the number 1, the Y-axis is divided into 10 parts.
Series data
- Add four groups of data and change the name of each group
- Change the width of each column to 15px
- Let the average score use the first Y-axis (yAxisIndex: 0), let the number of people use the second Y-axis (yAxisIndex: 1)
Adjust grid (width and height of chart)
- 30px up or down, about 7%
Analyzing tooltip (official sample included)

let option = {
  // Grid (entire chart locale)
  grid: {
    top: 30.bottom: 30.left: '7%'.right: '7%'
  },
  // Mouse over prompt
  tooltip: {
    trigger: 'axis'.// Trigger mode, axis represents axis trigger, item represents each item
    axisPointer: {   // Axis indicator configuration item
      // The other options are line, shadow, and None.
      type: 'cross'.crossStyle: {
        color: '# 999'}}},/ / legend
  legend: {},
  / / the X axis
  xAxis: [{type: 'category'.data: [Group '1'.'2 groups'.'three groups'.'four groups'.'5'.'6 groups'.'seven groups'].axisPointer: { // The axis indicator is a shadow, which is combined with the Settings in the Tooltip to form a crosshair
        type: 'shadow'}}]./ / Y
  yAxis: [{type: 'value'.min: 0.// Minimum Y-axis data
      max: 100.// Maximum value of Y-axis data
      interval: 10.// step indicates the step size of the Y-axis
      axisLabel: { // Set the Y axis text
        formatter: '{value} points'.// Y-axis text}}, {type: 'value'.min: 0.max: 10.interval: 1.axisLabel: {
        formatter: '{value} people'}}].// Data (4 groups of data)
  series: [{name: 'Average score'.type: 'bar'.data: [83.57.90.78.66.76.77.87.69.92.88.78].barWidth: '15'}, {name: 'Number of people under 60'.type: 'bar'.data: [2.1.3.4.2.5.2.2.4.1.6.2].barWidth: '15'.yAxisIndex: 1.// Y-axis index, 1 indicates the use of the second Y-axis
    },
    {
      name: 'Between 60 and 80'.type: 'bar'.yAxisIndex: 1.// Y-axis index, 1 indicates the use of the second Y-axis
      barWidth: '15'.data: [1.4.2.4.5.2.1.3.3.2.2.4] {},name: 'Number of people with scores above 80'.type: 'bar'.yAxisIndex: 1.// Y-axis index, 1 indicates the use of the second Y-axis
      barWidth: '15'.data: [3.2.1.5.1.2.3.4.5.2.2.4]]}};Copy the code

Echarts community

The community is a place for active Echart users to communicate and contribute customized charts.

Here you can find some highly customized diagrams based on Echart, the equivalent of a jquery-based plug-in, and third-party diagrams based on Echarts.

Community example: www.makeapie.com/explore.htm…

Echarts- Examples of using the community

Project for use in a community sample address: www.makeapie.com/editor.html…

Key points:

To use the community sample, you must see which external JS files the sample introduces.

Implementation steps:

First need to download China. Js to provide China map JS file
After the import, use the configurations provided by the community.
To modify the
- Change the background color to white
- Combine the visual mapping component (visualMap) in theshowInstead offalse
- Others may be modified voluntarily.

Conclusions you must know:

Which data corresponds to which data must be consistent
What data can be more, can be wrong
What data can not be more, can not be wrong

Introduce Echarts –

Echarts experience –

Echarts- Basic configuration

Echarts – pie chart

Step analysis

Step 1: Echarts basic steps

Step 2: Follow the official example

Step 3: Customize the configuration

Echarts – line chart

Step analysis

Step 1: Echarts basic steps

Step 2: Follow the official example

Step 3: Customize the configuration

Echarts – histogram

Step analysis

Step 1: Echarts basic steps

Step 2: Follow the official example

Step 3: Customize the configuration

Echarts community

Echarts- Examples of using the community

Related Posts

Talk about CSS3 new feature: Border Border

Interview must ask! This article takes you into asynchronous programming

Vuex refresh prevents data loss