用eclipse和ECharts库编写HTML的折线图和条形图
在Eclipse中创建一个简单的HTML页面,包含折线图和条形图的示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 折线图和条形图示例</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 容器 -->
<div id="line-chart" style="width: 600px;height:400px;"></div>
<div id="bar-chart" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var lineChart = echarts.init(document.getElementById('line-chart'));
var barChart = echarts.init(document.getElementById('bar-chart'));
// 指定图表的配置项和数据
var optionLine = {
title: {
text: '折线图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
var optionBar = {
title: {
text: '条形图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
lineChart.setOption(optionLine);
barChart.setOption(optionBar);
</script>
</body>
</html>
这段代码首先引入了ECharts库,然后创建了两个div
容器,分别用于显示折线图和条形图。接着,通过echarts.init
方法初始化了两个ECharts实例,并为它们指定了相应的配置项和数据。最后,使用setOption
方法将配置项应用到实例上,渲染出折线图和条形图。
评论已关闭