You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
<!--
|
|
|
|
|
|
1.ECharts最基本的代码结构
|
|
|
|
|
|
2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
|
|
|
|
|
|
3.y轴数据：[88,92,63,77,94,80,72,86]
|
|
|
|
|
|
4.将type的值设置为bar
|
|
|
|
|
|
-->
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
<script src="../static/assets/js/echarts.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div style="width: 600px;height: 400px;"></div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var mCharts= echarts.init(document.querySelector('div'))
|
|
|
|
|
|
var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
|
|
|
|
|
|
var yDaraArr=[70,92,85,89,77,90,87,98]
|
|
|
|
|
|
var option={
|
|
|
|
|
|
|
|
|
|
|
|
xAxis:{
|
|
|
|
|
|
type:'value' //类目轴
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis:{
|
|
|
|
|
|
type:'category' ,//数值轴
|
|
|
|
|
|
data:xDataArr
|
|
|
|
|
|
},
|
|
|
|
|
|
series:[
|
|
|
|
|
|
{
|
|
|
|
|
|
name:'语文',
|
|
|
|
|
|
type:'bar', //bar是柱状图，line是线状，pie是饼状
|
|
|
|
|
|
markPoint:{
|
|
|
|
|
|
data:[
|
|
|
|
|
|
{
|
|
|
|
|
|
type:'max',name:'最大值'
|
|
|
|
|
|
},{
|
|
|
|
|
|
type:'min',name:'最小值'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
markLine:{
|
|
|
|
|
|
data:[
|
|
|
|
|
|
{
|
|
|
|
|
|
type:'average',name:'平均值'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
label:{
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position:'right'
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
barWidth:'30%',
|
|
|
|
|
|
data:yDaraArr
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
//步骤5：将配置项设置给echarts实例对象
|
|
|
|
|
|
mCharts.setOption(option)
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
