基础折线图显示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#main {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<!--1 建立一个dom文件 -->
<div id="main">
</div>
<!--2 引入Echarts.js文件 -->
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//3 实例化Echarts
// 基于准备好的dom,初始化Echarts实例
var dom = document.getElementById('main')
var myChart = echarts.init(dom)
// 4、建立图标配置项
var option = {
// 标题
title: {
text: '基础折线图'
},
//x轴数据
xAxis: {
type: 'category',
data: ['阿木木', '提莫', '露露', '波比', '薇古丝', '库奇', '维嘉']
},
//y轴数据
yAxis: {
type: 'value'
},
series: [{
//数据随意定义
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
//5.显示图表
myChart.setOption(option)
</script>
</body>
</html>
页面显示