1.一些图表库
1. echarts https://echarts.apache.org/zh/index.html
2. hicharts https://www.hcharts.cn/
3. antv https://antv.vision/
4. echarts社区 https://www.makeapie.cn/echarts
如果是地图还需要引入china.js文件
2. Echarts使用
快速入门官方文档: 快速上手 - 使用手册 - Apache ECharts
1.新建HTML文件, 根据文档的指示, 引入ECharts的js文件
https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js
2.准备一个具备宽高的DOM容器
<div id="main" style="width: 600px; height: 400px"></div>
3.初始化Echarts实例
let myEchart = echarts.init(document.querySelector('#main'))
4.准备配置项
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
5.给echarts实例配置进入, 即可得到一个相关的柱形图表
myEchart.setOption(option)
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</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>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 配置图表
var option = {
title: {
text: '柱状图示例'
},
xAxis: {
type: 'category',
data: ['苹果', '香蕉', '橙子', '西瓜', '葡萄']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar',
data: [30, 50, 20, 80, 60]
}]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>