Echarts折线图绘制教程：两条曲线、平滑显示、美观布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts折线图</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 400px; margin: 0 auto;"></div>
<script>
// 模拟数据
var data = [
{ name: '商品A', sales: [120, 200, 150, 80, 70, 110] },
{ name: '商品B', sales: [80, 90, 120, 100, 150, 130] }
];
<pre><code> // 创建图表实例
var chart = echarts.init(document.getElementById('chart'));
// 设置图表配置项
var option = {
title: {
text: '商品销售额',
top: 'top',
left: 'center'
},
legend: {
data: ['商品A', '商品B'],
top: 'bottom'
},
xAxis: {
type: 'category',
data: data.map(function(item) { return item.name; }),
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: {
type: 'value'
},
series: data.map(function(item) {
return {
name: item.name,
type: 'line',
smooth: true,
data: item.sales
};
})
};
// 渲染图表
chart.setOption(option);
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/prjB 著作权归作者所有。请勿转载和采集!