Echarts website

Get ECharts

There are 4 ways to get started with Echarts in 5 minutes. For example: 1, from the official website download interface to choose the version you need to download

The introduction of ECharts

ECharts 3 will no longer be forced to use AMD on demand and will no longer have an AMD loader built into the code. So the way to import is much easier, just like a normal JavaScript library with script tags to import.

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <! ECharts --> <script SRC ="echarts.min.js"></script>
</head>
</html>
Copy the code

Draw a simple diagram

Before drawing, we need to prepare a DOM container with the height and width for ECharts.

<body> <! Prepare a DOM with size (width and height) for ECharts --> <div id="main" style="width: 600px; height:400px;"></div>
</body>
Copy the code

You can then initialize an echarts instance using the echarts.init method and generate a simple bar graph using the setOption method. The complete code is shown below.

<! DOCTYPE html> <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"Var myChart = echarts.init(document.getelementById ())'main')); 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 code

And you have your first chart!

You can also go directly to the ECharts Gallery to see examples of editing

The above is the simplest configuration. The following describes common configuration items

Take a line chart for example

Go to the code first, configure the code

var data = [["The 2000-06-05 1", 116], ["The 2000-06-05 8", 196], ["The 2000-06-05 10", 1], ["The 2000-06-06 10", 129], ["The 2000-06-07 10", 135], ["The 2000-06-08 10", 86], ["The 2000-06-09 10", 73], ["The 2000-06-10 5", 85], ["The 2000-06-10 6", 185], ["The 2000-06-10 7", [5]"The 2000-06-11 10", 73], ["The 2000-06-12 10", 68], ["The 2000-06-13 10", 92], ["The 2000-06-14 10", 130], ["The 2000-06-15 10", 245], ["The 2000-06-16 10", 139]]; var dateList = data.map(function (item) {
	return item[0];
});
var valueList = data.map(function (item) {
	return item[1];
});

option = {
	title: {
		left: 'center',
		text: Health Concern Index,
		subtext: ' ',
		top: 0,
		textStyle:{
			color: '#07d2b8',
			fontSize: 30,
			fontWeight: 'bold',
		}
	},
	grid: {
		top: 110,
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			animation: false,
			label: {
				fontSize: 18,
				backgroundColor: '#07d2b8',
				borderColor: '#aaa',
				borderWidth: 1,
				shadowBlur: 0,
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				textStyle: {
					color: '#fff'
				}
			}
		},
	},
	xAxis: {
		show: true,
		data: dateList,
		splitNumber : 7,
		axisLabel:{
			fontSize: 18,
			// rotate: 20,
			formatter: function (value, idx) {
				var date = new Date(value);
				// return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join(The '-')+ ` ` + date.getHours()
				return idx === 0 ? value : value
			}
		},
		boundaryGap: false,
		name: 'time',
		nameLocation: 'end',
		nameTextStyle:{
			color: '# 333',
			fontSize: 20,
			fontWeight: 'bold',
		},
	},
	yAxis: {
		show: true,
		splitLine: {show: false},
		axisLabel:{
			fontSize: 18,
		},
		name: 'Watch index',
		nameLocation: 'end',
		nameTextStyle:{
			color: '# 333',
			fontSize: 20,
			fontWeight: 'bold',
		},
		nameGap: 60,
	},
	series: [{
		type: 'line',
		lineStyle: {
			color: '#07d2b8',
			width: 3,
		},
		itemStyle:{
			color:'#fff',
			borderColor :'#07d2b8',
			borderWidth : 3,
		},
		label: {
			normal: {
				color: '#07d2b8',
				fontSize: 20,
				show: true,
				position: 'top'
			}
		},
		markPoint: {
			symbol: 'roundRect',
			symbolOffset: [0,-40],
			data: [
				{
					type: 'max',
					name: 'maximum',
					// value :'the highest'}, {type: 'min', 
					name: 'minimum', // symbolOffset: [0,40],},], label: {normal: {color:'#07d2b8',
					fontSize: 20,
				},
			},
			itemStyle:{
				color:'#fff',
				shadowColor :'# 999',
				shadowBlur: 1,
				shadowOffsetX: 2,
				shadowOffsetY: 2,
			},
			symbolSize: 55,

		},
		areaStyle: {
			normal: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: 'rgba (7, 210, 184, 0.8)'
				}, {
					offset: 1,
					color: '#fff'
				}])
			}
		},
		symbolSize: 20,
		hoverAnimation: false, data: valueList }] }; Var myChart = echarts.init(document.getelementById ())'tendencyChart')); // Display the chart using the configuration items and data you just specified. myChart.setOption(option);Copy the code

Effect:

Official configuration item manual

Common Configuration Items

Grid: offset of the overall graph Tooltip: Tooltip component xAxis: X-axis

  • Data: displays data on the X-axis
  • AxisLabel: format for X-axis subscript text
  • BoundaryGap: White-space strategies on both sides of the coordinate axes, where category axes and non-category axes are set and performed differently.
  • Name: indicates the name of the X-axis
  • NameLocation: X axis nameLocation

YAxis: the Y-axis. Other configurations are the same as the X-axis

  • NameGap: indicates the offset of the Y-axis name

Series: a list of series. Each series determines its own chart type by type

  • Type: ‘line’
  • LineStyle: Line Settings for a line chart
  • ItemStyle: Style of the inflection mark
  • Label: indicates the text setting at the inflection point of a broken line
  • MarkPoint: chart marking.
    • Symbol: ’roundRect’. The tag types provided by ECharts include ‘circle’, ‘rect’, ’roundRect’, ‘triangle’, ‘Diamond ‘, ‘pin’, ‘arrow’
    • SymbolOffset: The offset of the mark relative to its original location
    • Data: This can be marking Max, min, a certain coordinate, a certain screen coordinate, fixed X pixel position, etc
    • Label: Sets the label text
    • ItemStyle: Sets the style of the marked graphic
    • SymbolSize: The size of the symbol

AreaStyle: Area fill style. Data: You can specify the Y-axis data here. Note that if the series does not specify data and option has a dataset, the first dataset is used by default. Dataset is not used if data is specified.