数据可视化--ECharts图--HBuilderX--柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="echarts.min.js">
</script>
</head>
<body>
<div style="width:800px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.querySelector('div'))
var xdata= ['张三','李四','王五','闰土','小明','茅台','二妞','大强']
var ydata = [88,92,63,77,94,80,72,86]
var ydata1 =[96,52,72,25,85,58,83,73]
// 指定图表的配置项和数据
var option = {
color:['red','blue'],
title:{
text:'成绩展示',
link:'https://www.baidu.com/?tn=62095104_19_oem_dg',
target:'blank',
top: "0%",
left:"20%",
textStyle:{
fontSize: 18,
color:'orange',//颜色
fontStyle:'italic', //字体风格
fontWeight:'bold',//字体粗细
fontFamily: "serif",//字体样式
},
borderWidth:3,//边框粗细
shadowOffsetX: 1.5,//边框阴影偏移
shadowOffsetY: 2,//边框阴影偏移
borderColor:'blue', //边框颜色
borderRadius:20,//边框圆角半径
},
tooltip:{
trigger:'item',//数据项图形触发
truggerOn:'click',//提示框触发的条件;鼠标点击时触发
formatter:function(arg){
console.log(arg)//查看数据
return arg.name+'的'+arg.seriesName+'分数:'+arg.data
// console.log(arg)
}
},
legend: {
data:['语文',"数学"],
},
toolbox:{
feature:{
saveAsImage:{},//保存为图片
dataView:{},//数据视图工具
restore:{},//配置项还原
dataZoom:{},//数据区域缩放
magicType:{//动态类型切换
type:['line','bar','stack','tiled']
},
}
},
xAxis:{
type:'category',//类目轴，适用于离散的类目数据
data: xdata
// type:'value'
},
yAxis: {
// type:'category',
// data: xdata
type:'value'
},
series: [{
name: '语文',
type: 'bar',
markPoint:{//最大最小值
data:[
{
type:'max',name:'最大值'
},
{
type:'min',name:'最小值'
}
]
},
markLine:{//平均值
data:[
{
type:'average',name:'平均值'
}
]
},
label:{
show:true,//是否显示标签
rotate:60//标签旋转
},
barWidth:'30%',//柱条的宽度，不设时自适应
data: ydata
},{
name: '数学',
type: 'bar',
data:ydata1,
markPoint:{
data:[
{
type:'max',name:'最大值'
},
{
type:'min',name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
},
label:{
show:true,
rotate:60
},
barWidth:'30%',
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
参考网址：Echarsts官网
注：查看数据，需要在网页上进行----右键（查看源码或者检查源码或者审查元素）也可以按F12