echarts是一个基于javascripts的开源可视化图表库
画图步骤：
1.引入echarts.js文件
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>也可将文件下载到本地通过src引入。
2. 准备一个呈现图表的盒子：
<div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div>3.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('dd'));4. 准备配置项：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};5. 将配置项设置给echarts实例对象：
myChart.setOption(option);这样我们就可以获得一个echarts图了
柱形图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('dd'));
option = {
xAxis: {
type: 'category', //类目轴
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value' //数据轴
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
myChart.setOption(option);
</script>
</body>
</html>相关配置项：title //标题组件
xAxis //x轴
yAxis //y轴
series //系列列表，通过type绝定图表类型
相关配置可查看echats官网：https://echarts.apache.org/zh/option.html#title
折线图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
<style>
.box{
width: 900px;
height: 600px;
background-color:aqua;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var myChart = echarts.init(document.querySelector(".box"));
var options = {
title:{
text:'条形图',
subtext:'',
textstyle:{
color:'red',
fontSize:12
},
textAlign:'center',
left:'50%'
},
xAxis:{
type:'category',
data:['浏览量','点赞数','转发数','收藏数','评论量'],
name:'x轴'
},
yAxis:{
type:'value',
name:'y轴'
},
series:[{
type:'line',
data:[5000,800,200,300,150],
},
{
type: 'line',
data:[12000,2500,200,800,400],
},]
}
myChart.setOption(options);
</script>
</body>
</html>散点图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="scatter" style="width: 600px; height: 400px;"></div>
<script>
var scatter_chart = echarts.init(document.getElementById("scatter"));
var scatter_option = {
title:{
text:"Echart"
},
xAxis:{},
yAxis:{},
series:[{
symbolSize:20,
data:[
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6, 7.24],
[4.2, 4.62],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.58],
],
type:'scatter'
}]
};
scatter_chart.setOption(scatter_option);
</script>
</body>
</html>
饼图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="app" style="width: 600px;height: 400px;"></div>
<script>
// 3.将type设置为pie
var myCharts = echarts.init(document.querySelector('#app'))
// 需要设置给饼图的数据
var sl = [
{
name: '2018',
value: '30'
},
{
name: '2019',
value: '10'
},
{
name: '2020',
value: '10'
},
{
name: '2021',
value: '10'
},
{
name: '2022',
value: '20'
},
{
name: '2023',
value: '10'
}
]
var option = {
legen:{
show:true,
align:'left',
left:0,
},
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
series: [
{
type: 'pie',
data: sl,
radius:["20%","60%"],
// roseType:"area"
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
roseType:"area" 可以将饼图设置为玫瑰图。
