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