1、引入js
2、初始化图表
<div id="chart"></div>
<script>
var chart = echarts.init(document.getElementById('chart'),
'macarons', // 设置主题
{width:800, // 设置宽高
height:400,
render:'svg'}, // 设置图片类型 svg矢量图 canvas多次加载时使用
)
chart.setOption({
title:,
xAxis:,
yAxis:,
toolbox:,
series:[{
}],
})
</script>
3、图表类型及需要设置的参数见
Documentation - Apache ECharts
4、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="echarts/echarts.js"> </script>
<script src="macarons.js"></script>
<title>Title</title>
<style>
#chart{
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var chart = echarts.init(document.getElementById('chart'),
'macarons',
{width:800,
height:400,
render:'svg'},
)
chart.setOption({
title:{
text:'近10年来济南民航客运量变化',
textStyle:{
color:'#f7906d'
},
left:'200px'
},
xAxis:{data:['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019'],
name:'年份',
nameTextStyle:{
color:'rgb(0,0,0)'
},
},
yAxis:{
min:0,
// max:400000,
type:'value',
name:'万人',
nameTextStyle:{
color:'rgb(0,0,0)'
},
},
toolbox:{
feature:{
restore:{},
saveAsImage:{
type:'jgp'
}
}
},
series:[
{
data:[379.2,433.0,426.0,452.8,488.1,533.1,645.1,785.6,894.1,936.1], //济南民航
type:'bar',
showBackground:false,
itemStyle:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6a3387' },
{ offset: 0.5, color: '#cfb3d7' },
{ offset: 1, color: '#ead8e3' }])
},
emphasis:{
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#ead8e3' },
{ offset: 0.7, color: '#cfb3d7' },
{ offset: 1, color: '#6a3387' }])
}
}
}]
})
</script>
</body>
</html>