首先要先引用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>