1. Introduce ECharts
-
Introduced through CDN such as jsDelivr
-
Tag directly into the built Echarts file
-
NPM download, import import
npm install echarts –save
import * as echarts from ‘echarts’;
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<! ECharts -->
<script src="echarts.min.js"></script>
</head>
</html>
Copy the code2. Simple drawing of charts
Initialize an echarts instance with the echarts.init method and generate a simple bar graph with the setOption method
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<! Echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<! -- Prepare a Dom with size (width and height) for ECharts
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
// Initializes the echarts instance based on the prepared DOM
var myChart = echarts.init(document.getElementById('main'));
// Specify the chart configuration items and data
var option = {
title: {
text: 'Getting started with ECharts'
},
tooltip: {},
legend: {
data: ['sales']},xAxis: {
data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},
series: [{
name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]]}};// Display the chart using the configuration items and data you just specified.
myChart.setOption(option);
</script>
</body>
</html>
Copy the code3. Performance optimization
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';
// Introduce bar Chart and Chart with suffix Chart
import {
BarChart
} from 'echarts/charts';
// Introduce prompt box, title, cartesian Component, Component suffix is Component
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components';
// Introduce Canvas renderer. Note that introducing CanvasRenderer or SVGRenderer is a necessary step
import {
CanvasRenderer
} from 'echarts/renderers';
// Register the required components
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);
Copy the code4. Detailed explanation of components and their properties
let option = {
backgroundColor:'rgba (0,0,0,0)'.// Default palette
color: ['#ff7f50'.'#87cefa'.'#da70d6'.'#32cd32'.'#6495ed'.'#ff69b4'.'#ba55d3'.'#cd5c5c'.'#ffa500'.'#40e0d0'.'#1e90ff'.'#ff6347'.'#7b68ee'.'#00fa9a'.'#ffd700'.'#6699FF'.'#ff6666'.'#3cb371'.'#b8860b'.'#30e0e0'].// Chart title
title: {
x: 'left'.// Horizontal position, default left alignment, optional:
// 'center' takes 'right'
// D {number} (x coordinates, unit: px)
y: 'top'.// Vertical position, default is the top of the full picture, optional:
// 'top' l 'base' l 'center'
// D {number} (y, unit: px)
//textAlign: null // Horizontal alignment, automatically adjusted by default based on x Settings
backgroundColor: 'rgba (0,0,0,0)'.borderColor: '#ccc'.// Title border color
borderWidth: 0.// Title border line width, unit px, default 0 (no border)
padding: 5.// Title margin, unit: px, default margin 5 in each direction,
// Accept arrays with upper, right, lower, and left margins, as with CSS
itemGap: 10.// Vertical spacing of main and subtitle, unit px, default is 10,
textStyle: {
fontSize: 18.fontWeight: 'bolder'.color: '# 333' // Main heading text color
},
subtextStyle: {
color: '#aaa' // Subtitle text color}},/ / legend
legend: {
orient: 'horizontal'.// The layout mode is horizontal by default. The options are:
/ / 'horizontal' ¦ 'vertical'
x: 'center'.// Horizontal position, default is the full image center, optional:
// 'center' takes 'right'
// D {number} (x coordinates, unit: px)
y: 'top'.// Vertical position, default is the top of the full picture, optional:
// 'top' l 'base' l 'center'
// D {number} (y, unit: px)
backgroundColor: 'rgba (0,0,0,0)'.borderColor: '#ccc'.// Legend border color
borderWidth: 0.// The width of the border, in px, defaults to 0 (no border)
padding: 5.// Inner margin of legend, unit: px, default inner margin of each direction is 5,
// Accept arrays with upper, right, lower, and left margins, as with CSS
itemGap: 10.// The interval between items, in px, defaults to 10,
// In a horizontal layout, the spacing is horizontal; in a vertical layout, the spacing is vertical
itemWidth: 20.// Legend graphic width
itemHeight: 14.// Figure height
textStyle: {
color: '# 333' // Legend text color}},/ / domain
dataRange: {
orient: 'vertical'.// The layout mode is vertical by default. The options are:
/ / 'horizontal' ¦ 'vertical'
x: 'left'.// Horizontal position, default is left aligned, optional:
// 'center' takes 'right'
// D {number} (x coordinates, unit: px)
y: 'bottom'.// Vertical position, default is the bottom of the whole image, optional:
// 'top' l 'base' l 'center'
// D {number} (y, unit: px)
backgroundColor: 'rgba (0,0,0,0)'.borderColor: '#ccc'.// Range border color
borderWidth: 0.// Range border line width, unit px, default 0 (no border)
padding: 5.// The unit is px. The default value is 5.
// Accept arrays with upper, right, lower, and left margins, as with CSS
itemGap: 10.// The interval between items, in px, defaults to 10,
// In a horizontal layout, the spacing is horizontal; in a vertical layout, the spacing is vertical
itemWidth: 20.// The width of the field graph, linear gradient horizontal layout width of this value * 10
itemHeight: 14.// The height of the linear gradient vertical layout is this value * 10
splitNumber: 5.// Number of segments, default is 5, 0 is a linear gradient
color: ['#1e90ff'.'#f0ffff']./ / color
//text:[' high ',' low '], //text, numeric text by default
textStyle: {
color: '# 333' // Range text color}},toolbox: {
orient: 'horizontal'.// The layout mode is horizontal by default. The options are:
/ / 'horizontal' ¦ 'vertical'
x: 'right'.// Horizontal position, default to the right of the full picture, optional:
// 'center' takes 'right'
// D {number} (x coordinates, unit: px)
y: 'top'.// Vertical position, default is the top of the full picture, optional:
// 'top' l 'base' l 'center'
// D {number} (y, unit: px)
color: ['#1e90ff'.'#22bb22'.'#4b0082'.'#d2691e'].backgroundColor: 'rgba (0,0,0,0)'.// Toolbox background color
borderColor: '#ccc'.// Toolbox border color
borderWidth: 0.// Box border width, unit: px, default: 0 (no border)
padding: 5.// Box margin, unit: px, default margin in each direction is 5,
// Accept arrays with upper, right, lower, and left margins, as with CSS
itemGap: 10.// The interval between items, in px, defaults to 10,
// In a horizontal layout, the spacing is horizontal; in a vertical layout, the spacing is vertical
itemSize: 16.// Toolbox graphic width
featureImageIcon: {}, // Custom picture icon
featureTitle: {
mark: 'Auxiliary wire switch'.markUndo: 'Delete guides'.markClear: 'Clear the guides'.dataZoom: 'Region scaling'.dataZoomReset: 'Region scaling back'.dataView: 'Data view'.dataView: 'Data view'.lineChart: 'Line chart Switch'.barChart: 'Bar chart switch'.restore: 'reduction'.saveAsImage: 'Save as picture'}},/ / prompt dialog box
tooltip: {
trigger: 'item'.// Trigger type, default data trigger, optional: 'item' axis
showDelay: 20.// Display delay, add display delay to avoid frequent switching, unit ms
hideDelay: 100.// Hide delay in ms
transitionDuration: 0.4.// Animation transform time, unit s
backgroundColor: 'rgba (0,0,0,0.7)'.// Prompts the background color, which defaults to black with transparency of 0.7
borderColor: '# 333'.// Prompts the border color
borderRadius: 4.// Display a rounded border, unit px, default 4
borderWidth: 0.// Prompt border line width, unit px, default 0 (no border)
padding: 5.// The unit is px. The default value is 5 in all directions.
// Accept arrays with upper, right, lower, and left margins, as with CSS
axisPointer: { // Axis indicator. Axis trigger works
type: 'line'./ / the default value is linear, optional: 'the line' | 'shadow'
lineStyle: { // Line indicator style Settings
color: '#48b'.width: 2.type: 'solid'
},
shadowStyle: { // Shadow indicator style Settings
width: 'auto'.// Shadow size
color: 'rgba (150150150,0.3)' // Shadow color}},// Format the display
formatter:function(params){
let showHtm="";
for(let i=0; i<params.length; i++){/ / name of the x axis
let name = params[i][1];
/ / name
let text = params[i][3];
/ / value
let value = params[i][2];
showHtm+= text+ The '-' + name + 'Score:' + value+'<br>'
}
return showHtm;
},
textStyle: {
color: '#fff'}},// Area scaling controller
dataZoom: {
orient: 'horizontal'.// The layout mode is horizontal by default. The options are:
/ / 'horizontal' ¦ 'vertical'
// x: {number}, // horizontal position, default according to the grid parameter adaptation, optional:
// {number} (x coordinates, unit px)
// y: {number}, // vertical position, default based on grid parameters, optional:
// {number} (y coordinates, unit px)
// width: {number}, // specify the width, landscape layout default according to the grid parameters
// height: {number}, // Specify the height
backgroundColor: 'rgba (0,0,0,0)'.// Background color
dataBackgroundColor: '#eee'.// Data background color
fillerColor: 'rgba (144197237,0.2)'.// Fill the color
handleColor: 'rgba (70130180,0.8)' // Handle color
},
/ / grid
grid: {
x: 80.y: 60.x2: 80.y2: 60.// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba (0,0,0,0)'.borderWidth: 1.borderColor: '#ccc'
},
// Default line chart parameters
line: {
itemStyle: {
normal: {
// color: different,
label: {
show: false
// position: default adaptive, horizontal layout is 'top', vertical layout is 'right', optional
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // the global textStyle is used by default. See textStyle
},
lineStyle: {
width: 2.type: 'solid'.shadowColor: 'rgba (0,0,0,0)'.// Transparent by default
shadowBlur: 5.shadowOffsetX: 3.shadowOffsetY: 3}},emphasis: {
// color: different,
label: {
show: false
// position: default adaptive, horizontal layout is 'top', vertical layout is 'right', optional
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // the global textStyle is used by default. See textStyle}}},//smooth : false,
//symbol: null, // Inflection point graphic type
symbolSize: 2.// Graph size of inflection point
//symbolRotate: null, // Inflection point graphics rotation control
showAllSymbol: false // By default, only the main axis is displayed.
},
// Text style Settings
textStyle: {
decoration: 'none'.fontFamily: 'Arial, Verdana, sans-serif'.fontFamily2: Microsoft Yahei.// IE8- Font is fuzzy and does not support mixing of different fonts, specify an extra copy
fontSize: 12.fontStyle: 'normal'.fontWeight: 'normal'}}Copy the code