echarts数据可视化案例
时间: 2023-10-23 11:45:43 浏览: 30
以下是一个简单的 ECharts 数据可视化案例,用于展示各个省份的人口数量:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts Demo</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个容器来放置图表 -->
<div id="myChart" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '各省份人口数量',
subtext: '数据来自国家统计局'
},
tooltip: {},
legend: {
data:['人口数量']
},
xAxis: {
data: ["北京","上海","广东","江苏","浙江","山东","河南","河北","四川","湖南"]
},
yAxis: {},
series: [{
name: '人口数量',
type: 'bar',
data: [2153, 2424, 11346, 7866, 5737, 10047, 9605, 7556, 8041, 6860]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
该案例使用了 ECharts 的 bar 类型图表,通过设置 xAxis 和 yAxis 来定义横纵坐标轴,设置 series 来定义数据系列。最后使用 setOption 方法将配置项和数据应用到图表中。