HTML Echart完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Echart示例</title>
<!-- 引入Echart庫(kù) -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<!-- 創(chuàng)建一個(gè)DOM容器 -->
<div id="chart" style="width: 600px;height:400px;></div>
<!-- 使用JavaScript來(lái)繪制圖表 -->
<script>
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('chart'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'Echart示例',
subtext: '生活費(fèi)用'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['消費(fèi)比例']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false, // 去除圖表左右邊界
data: ['餐飲','交通','住宿','娛樂(lè)','其它']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 元'
}
},
series: [
{
name:'消費(fèi)比例',
type:'bar',
barMaxWidth: '60%',
data:[4000, 2000, 3000, 1000, 500]
}
]
};
// 使用以上配置項(xiàng)和數(shù)據(jù)繪制圖表
myChart.setOption(option);
</script>
</body>
</html>