<!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>Document</title>
<!-- 1.引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!-- 2.呈现图表的盒子 -->
<div style="width:600px;height: 400px;"></div>
<script>
// 3.初始化echarts实例对象
// 参数，dom，决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
// 4.准备配置项
var option = {
// 标题
title: {
text: '成绩',
link: 'http://www.baidu.com',
textStyle: {
color: 'red',
},
// 标题边框
borderWidth: 5,
borderColor: 'blue',
borderRadius: 5,
// 标题位置
left: 10,
top: 10
},
//X轴是category竖向数据，Y轴是category横向数据
// x轴
xAxis: {
type: 'category',
data: ["小明", "小红", "小王", "小绿", "小黑", "小白"]
},
// y轴
yAxis: {
type: 'value',
},
//表头数据筛选
legend:{
data:['语文','数学']
},
// 轴数据
series: [{
name: '语文',
// 柱状图
type: 'bar',
// 数据标注
markPoint: {
data: [{
type: 'max',
name: '最大的值'
}, {
type: 'min',
name: '最小的值'
}],
},
// 平均线
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
// 每个分值的呈现
label: {
show: true,
// 数据旋转
rotate: 60,
// 数据位置
position: 'top',
},
barWidth: '30%',
data: [70, 92, 87, 40, 99, 88]
}, {
name: '数学',
// 柱状图
type: 'bar',
data: [80, 82, 97, 80, 79, 38]
}],
// 鼠标移入出发提示
tooltip: {
// 触发位置 trigger
// trigger:'item',
trigger: 'axis',
// 触发方式
// triggerOn:'click',
// 提示内容
//{a}系列名称{b}类目值{c}数值
// formatter:'{b}的{a}成绩是{c}'
//函数形式
formatter: function (arg) {
return arg[0].name + '的' + arg[0].seriesName + '成绩是:' + arg[0].data
}
},
toolbox: {
feature: {
//导出图片
saveAsImage: {},
//切换原始数据视图或修改数据
dataVuew: {},
//重置还原数据
restore: {},
//区域缩放
dataZoom: {},
magicType: {
type: ['bar']
}
}
}
}
// 5.将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
原创文章，作者：dweifng，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/275975.html