效果图：
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="padding-top: 30px;">
<span style="padding-left: 600px;"><input type="button" value="废铜">
<span style="padding-left: 50px;"><input type="button" value="塑料">
<span style="padding-left: 50px;"><input type="button" value="废纸"></span>
<span style="padding-left: 50px;"><input type="button" value="纸盒">
<span style="padding-left: 50px;"><input type="button" value="金属">
<span style="padding-left: 50px;"><input type="button" value="铝"></span>
</div>
<div id="main" style="width: 600px;height:400px;padding-left: 600px;padding-top: 50px;"></div>
<div><span style="padding-left: 750px;"><label>行情报价</label></span><span style="padding-left: 200px;"><label>300元</label></span></div>
<div style="padding-left: 600px;padding-top: 50px;">
<div style="float: left;padding-left: 50px;">
[外链图片转存失败(img-Ym9Pqr2i-1562151889638)(https://mp.csdn.net/mdeditor/images/070201.jpg)]
</div>
<div style="float:left">
<p style="line-height: 1px;padding-left: 55px;">杂纸张A级</p>
<p style="padding-left: 55px;">单价：2.2元</p>
<p style="padding-left: 55px;line-height: 1px;">11kg</p>
</div>
<!--<div style="float: left;padding-top: 30px;padding-left: 20px;">
<label>1000元</label>
</div>-->
<div style="float: left;padding-left: 10px;">
[外链图片转存失败(img-UMpq2Z6t-1562151889640)(https://mp.csdn.net/mdeditor/images/070202.jpg)]
</div>
<div style="float:left">
<p style="line-height: 1px;padding-left: 55px;">黄纸张B级</p>
<p style="padding-left: 55px;">单价：12.2元</p>
<p style="padding-left: 55px;line-height: 1px;">11kg</p>
</div>
<!--<div style="float: left;padding-top: 5px;padding-left: 20px;">
<label>1000元</label>
</div>-->
</div>
<div style="padding-left: 600px;padding-top: 150px;">
<div style="float: left;padding-left: 50px;">
[外链图片转存失败(img-Kf5Zfund-1562151889641)(https://mp.csdn.net/mdeditor/images/070201.jpg)]
</div>
<div style="float:left">
<p style="line-height: 1px;padding-left: 55px;">杂纸张A级</p>
<p style="padding-left: 55px;">单价：12.2元</p>
<p style="padding-left: 55px;line-height: 1px;">24kg</p>
</div>
<!--<div style="float: left;padding-top: 30px;padding-left: 20px;">
<label>1000元</label>
</div>-->
<div style="float: left;padding-left: 10px;">
[外链图片转存失败(img-1ie2Jdek-1562151889641)(https://mp.csdn.net/mdeditor/images/070202.jpg)]
</div>
<div style="float:left">
<p style="line-height: 1px;padding-left: 55px;">黄纸张A级</p>
<p style="padding-left: 55px;">单价：2.2元</p>
<p style="padding-left: 55px;line-height: 1px;">14kg</p>
</div>
<!--<div style="float: left;padding-top: 5px;padding-left: 20px;">
<label>1000元</label>
</div>-->
</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '回收价格（元）'
},
tooltip: {},
legend : {
data : [ '日期' ]
},
xAxis: {
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis: {},
series: [{
name: '价格',
type: 'line',//bar；图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
data: [5, 20, 36, 10, 10, 20,13]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>