Use echarts to convert data into required icons
But there are some basic functions to understand.
echartsInstance
The echarts instance is created through init.
const chart = echarts.init(dom, null, {
renderer: 'svg'});
The parameters are container, theme, and additional parameters, the last two can be empty, and the container is our contianer, div, etc.
The theme is an independent color matching system of echarts, you can color yourself, and then download these themes. There are many additional parameters , so I won't list them one by one.
dispose
After the initialization of echarts is completed, the instance can be destroyed by dispose, and the icon can be switched on the same container through this function
echarts.dispose(dom)
Please note that dispose is a method of echarts, not the method of the instance itself, which can be used through the instance
chart.clean()
To clear the option of the chart (the chart is available after clearing), in fact, only the series content of the icon can be cleared at present, which may be a bug.
setOption
Set the data and other configuration items of the icon instance
chart.setOption(option, notMerge, lazyUpdate);
some options
-
title: title component
-
legend: Legend component, which displays different series of symbols, colors and names. Which series are not displayed can be controlled by clicking on the legend.
-
grid: The grid component, the drawing grid in the Cartesian coordinate system, up to two X axes up and down, and two Y axes left and right can be placed in a single grid. Line charts, histograms, and scatter plots (bubble charts) can be drawn on the grid. A single instance can have any number of grid components
-
xAxis: The x-axis in the Cartesian coordinate system grid. Generally, a single grid component can only place up to two x-axes. If there are more than two x-axes, you need to configure the offset property to prevent overlapping of multiple x-axes at the same position. xAsis.type can set the type of x-axis, optional:
optional:- 'value' value axis, suitable for continuous data.
- 'category' category axis, suitable for discrete category data. When it is this type, the category data can be automatically obtained from series.data or dataset.source, or the category data can be set through xAxis.data.
- 'time' time axis, suitable for continuous time series data. Compared with the value axis, the time axis has time formatting, and the scale calculation is also different. For example, it will decide to use month, week, day or Scale for the hour range.
- 'log' logarithmic axis. Applies to logarithmic data.
-
yAxis: the y-axis in the rectangular coordinate system grid
-
polar: Polar coordinate system, which can be used for scatter plots and line charts. Each polar coordinate system has an angular axis and a radial axis.
-
radar: Radar chart coordinate system component, only applicable to radar charts.
-
dataZoom: The dataZoom component is used for area zooming, so that you can freely focus on the detailed data information, or overview the data as a whole, or remove the influence of outliers.
-
timeline: The timeline component provides the functions of switching, playing and other operations between multiple ECharts options
-
calendar: calendar coordinate system component.
-
dataset: dataset component
-
series: graphics components, determine whether the generated graphics are lines or circles or others
-
backgroundColor: background color component
-
useUTC: whether to use utc time
-
toolbox: tool component, built-in five tools for exporting pictures, data view, dynamic type switching, data area scaling, and reset.
-
geo: map component.
resize
To change the size of the chart, it needs to be called manually when the container size changes
window.onresize = function () {
showChart.resize();}
Use the above method to make the chart change automatically as the browser size changes
showLoading
hideLoadingDisplay the loading animation and call hide after loading