1. A histogram
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A histogram</title>
<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts-en.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: 'Bar chart'
},
tooltip: {},
legend: {
data: ['Familiarity']},xAxis: {
data: ["javascript"."css3"."html5"."vue"."webpack"."jQuery"]},yAxis: {},
series: [{
name: 'Familiarity'.type: 'bar'.data: [80.90.88.70.78.80]]}};// Display the chart using the configuration items and data you just specified.
myChart.setOption(option);
</script>
</body>
</html>
Copy the code 
\
\
2. The pie chart
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts-en.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'));
option = {
title : {
text: 'Source of user visits to a site'.subtext: 'Pure fiction'.x:'center'
},
tooltip : {
trigger: 'item'.formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical'.left: 'left'.data: ['Direct access'.'Email marketing'.'Affiliate advertising'.'Video advertising'.'Search engines']},series: [{name: 'Access source'.type: 'pie'.radius : '55%'.center: ['50%'.'60%'].data:[
{value:335.name:'Direct access'},
{value:310.name:'Email marketing'},
{value:234.name:'Affiliate advertising'},
{value:135.name:'Video advertising'},
{value:1548.name:'Search engines'}].itemStyle: {
emphasis: {
shadowBlur: 10.shadowOffsetX: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}}}]};// Display the chart using the configuration items and data you just specified.
myChart.setOption(option);
</script>
</body>
</html>
Copy the code 
3. Line charts
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts-en.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'));
option = {
title: {
text: 'Temperature changes in the coming Week'.subtext: 'Pure fiction'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Maximum temperature'.'Minimum temperature']},toolbox: {
show: true.feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line'.'bar']},
restore: {},
saveAsImage: {}}}.xAxis: {
type: 'category'.boundaryGap: false.data: ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday.'Sunday']},yAxis: {
type: 'value'.axisLabel: {
formatter: '{value} ° C'}},series: [{name:'Maximum temperature'.type:'line'.data: [11.11.15.13.12.13.10].markPoint: {
data: [{type: 'max'.name: 'maximum'},
{type: 'min'.name: 'minimum'}},markLine: {
data: [{type: 'average'.name: 'Average'}]}}, {name:'Minimum temperature'.type:'line'.data: [1, -2.2.5.3.2.0].markPoint: {
data: [{name: 'Weekly minimum'.value: -2.xAxis: 1.yAxis: -1.5}},markLine: {
data: [{type: 'average'.name: 'Average'[{},symbol: 'none'.x: '90%'.yAxis: 'max'
}, {
symbol: 'circle'.label: {
normal: {
position: 'start'.formatter: 'maximum'}},type: 'max'.name: 'Highest point'}]]}}]};// Display the chart using the configuration items and data you just specified.
myChart.setOption(option);
</script>
</body>
</html>
Copy the code 
\