首先要先引用echarts.js

如：<script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script>

然後在html檔案中新增一個容器

如： <div id="main" style="height: 500px; width: 600px;"></div>

最後寫入js

如：

<script>

var mychart = echarts.init(document.getElementById("main"));
mychart.setOption({
title: {
text: '總人數：888人',
left: 'right',
textStyle: {//title字型的樣式
color: '#999',
fontWeight: 'normal',
fontSize: 20
}
},
tooltip: {
trigger: 'axis'
},
grid: {//邊距
left: '6%',
right: '4%',
containLabel: false
},
xAxis: {
type: 'category',
axisLabel: { //調整x軸的lable  
textStyle: {
fontSize: 20 // 讓字型變大
}
},
axisLine: {
lineStyle: {
color: '#ddd',
width: 4, //這裡是為了突出顯示加上的  
}
},
boundaryGap: false,
data: ['6-20', '6-21', '6-22', '6-23', '6-24', '6-25']
},
yAxis: {
type: 'value',
axisLabel: { //調整y軸的lable  
textStyle: {
fontSize: 20 // 讓字型變大
}
},
name: '實名人數',
axisLine: {
lineStyle: {
color: '#ddd',
width: 4, //這裡是為了突出顯示加上的  
}
},
},
textStyle: {//字型的樣式
fontSize: 18,
color: "#999"
},
series: [{
name: '實名人數',
type: 'line',
symbolSize: 10,//折線圖折中的圓點大小
itemStyle: {
normal: {
color: '#0a94e8',
lineStyle: {
color: '#6a9bf0'
}
}
},
data: [180, 300, 220, 390, 520, 400]
}]

})

</script>