This is the first day of my November challenge
A lot of the time during development, we do development by looking at development documents
But in the development process, I found that echarts document configuration items too much, the development for the first time is really a headache, because I can’t find the configuration items they want, and I don’t know whether there will be some demand, so the development for the first time on a lot of pit, also help a lot of people at that time, find some requirements can be configured to achieve, Some special needs may require hand-writing
So write this down in the hope that it will help you as you grow
The installation
npm install echarts --save
Copy the codeThe introduction of
All the introduction of
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 codeYou can also write it this way
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
option && myChart.setOption(option);
Copy the codeThe above code will import all the diagrams and components in all ECharts if you want to import them on demand
You can use the following methods
Import ECharts diagrams and components as needed
// 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, DatasetComponentOption, 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 codeNote that in order to keep the package size to a minimum, ECharts does not provide any renderers when introduced on demand, so choose to introduce CanvasRenderer or SVGRenderer as renderers. The advantage of this is that if you only use SVG rendering mode, packaged results no longer contain unnecessary CanvasRenderer modules.
Our “Complete Code” TAB on the sample edit page provides a very convenient ability to generate on-demand import code. This feature dynamically generates minimal imported code based on the current configuration item. You can use it directly in your projects.
Configuration items
There is no specific value analysis below, you can find the configuration items you need here, and then look it up in the documentation
Common configuration items:
Show and hide: show
Title: the title
Title: the text
Title style: textStyle
Text size: fontSize
Subtitle: subtext
Subtitle style: subtextStyle
Text size: fontSize
Show and hide: show
Distance from the box left border: left
Distance from box top border: left
Legend: legend
Show and hide: show
Type: type,
Padding If it doesn’t look obvious, you can set the border to show the border
The borderColor: borderColor
Border line width: borderWidth
Height: The height of the large box where the legend is located
Can you click on a legend to show and hide related data in a control chart: selectedMode
The layout of the legend list is oriented: Orient
Legend list position control:
Top
Left
Legend interval: itemGap
Width of a single legend: itemWidth
Height: itemHeight
Custom formatting legend text: Formatter is more complex and will be covered separately as required
Location: the grid
Distance from the box top frame: TOP
Right border from the box: Right
Bottom border from the box: bottom
Distance from the box left border: left
X: xAxis
The X-axis represents the content name: name
The types of the coordinate axes are as follows: type Time, number, logarithm, etc
Scale of the axis: axisTick
Show and hide: show
Is the calibration line aligned with the X-axis calibration (mon, TUe, etc.) : alignWithLabel
Data: data
The relevant setting for the coordinate axis scale: axisLabel
Show and hide: show
FontSize: fontSize
Display interval of the scale label on the coordinate axis, valid in the category axis: interval
Y: yAxis
Because the Y-axis is sometimes on the left and sometimes on the right
Axis type: type
Scale name: data
Number of segments to be split: splitNumber Note that there are valid conditions
Minimum interval of the axes: minInterval
The maximum value displayed in the current state of the axis: Max Note that if your data exceeds this value, the graph will extend up, but will not automatically adapt
BoundaryGap: I haven’t come across a scenario where the configuration option boundaryGap is used, but I found online that the data on a boundary axis overlaps with the text on the edge, as shown in the figure below. It should be noted that this attribute has valid requirements, and the setting and presentation form of category axis and non-category axis are different.
The z axis
Chart type: Series
Line graph: type: ‘line’
Data: data [’11’, ’12’] This data format can also be recognized without further conversion
RBG [‘ RGB (51, 148, 246)’]
The value of a solid circle is ‘circle’.
Tag size: symbolSize
Bar chart: type: ‘bar’
Data: data [’11’, ’12’] This data format can also be recognized without further conversion
These are the configuration items I have encountered for the time being, which can meet simple customization requirements
If you have other questions, check out the current category of article solutions
If you have a better view can leave a message below for help or exchange ♥️
It will continue to be improved and modified