Echarts basic configuration items on the official line chart

How do newcomers to react projects use Echarts to create simple line charts that show you simple steps and basic configuration instructions

The first step is to introduce the download Echarts plug-in

  • There are three installation modes:

Get it from gitHup

The Release page of the Apache/Echarts project provides links to each version. Click the Source Code in Assets at the bottom of the download page. After decompression, echarts.js in dist directory is the complete echarts function file.

From NPM

npm install echarts --save
Copy the code

The value is obtained from the CDN

It is recommended to reference Echarts from jsDelivr.

Online customization

If you only want to introduce some modules to reduce package size, you can use ECharts online customization.

Step 2, how do YOU introduce Echarts into your project

  • Once you have installed Echarts, regardless of how you installed it, you can do the following

The introduction of Echarts

import * as echarts from 'echarts'; Var myChart = echarts.init(document.getelementById ('main')); Mychart.setoption ({title: {text: 'ECharts starting example '}, Tooltip: {}, xAxis: {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, series: [{name: 'sales' type:' bar 'data: [5, 20, 36, 10, 10, 20]}]})Copy the code

Import ECharts diagrams and components as needed

The above code will import all the diagrams and components in ECharts, but if you don’t want to import all the components, you can also use ECharts’ import on demand interface to package the necessary components.

// Introduce the Echarts core module, which provides the interface required for echarts use. import * as echarts from 'echarts/core'; Chart import {BarChart} from 'echarts/charts'; // Introduce prompt box, title, cartesian coordinate system, data set, built-in data converter component, Component import {TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent } from 'echarts/components'; Import {LabelLayout, UniversalTransition} from 'echarts/features'; Import {CanvasRenderer} from 'echarts/renderers'; Echarts. Use ([TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, BarChart, LabelLayout, UniversalTransition, CanvasRenderer ]); Var myChart = echarts.init(document.getelementById ('main')); var myChart = echarts.init(document.getelementById ('main')) myChart.setOption({ // ... });Copy the code

As for some simple text description of configuration items, I have made a small demo to briefly introduce, if only a simple line graph or bar graph, it is completely sufficient

In the figure, you can see the small icon in the upper right corner. You can switch the current line chart to the bar chart, counting the fifth from right to left

The fourth is the current line chart style, the sixth is the refresh of list data, the seventh is the ability to download the current chart, and the third is the effect of switching to the visual data view

  • A histogram

  • Visual data view

. Is there anything I can leave a comment about in the speed update