简单的图表
2022-03-02 本文已影响0人
苍老师的眼泪
<!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>
<script src="echarts.js"></script>
</head>
<!--
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象
-->
<body>
<div id="chart" style="width: 600px; height: 400px"></div>
<script>
let charts = echarts.init(document.getElementById('chart'), 'dark')
let option = {
title: {
text: '小明和小红',
textStyle: {
color: "green"
},
link: 'https://www.baidu.com/s?wd=小明和小红',
subtext: '小学成绩',
subtextStyle: {
color: "green",
},
sublink: 'https://www.baidu.com/s?wd=小学成绩',
left: '40px',
},
legend: {
data: ['语文', '数学', '英语']
},
xAxis: {
// boundaryGap: false, // 折线图的起始位置紧挨边缘
type: 'category',
data: ['小明', '小红', '小黄'],
},
yAxis: {
type: 'value',
scale: true, // 脱离0值比例
},
tooltip: {
trigger: 'item',
// triggerOn: 'click',
// formatter: '科目: {a}<br>姓名: {b}<br>成绩: {c}'
formatter: argc => {
let { name, seriesName, value } = argc
return `科目: ${seriesName}<br>姓名: ${name}<br>成绩: ${value}`
}
},
toolbox: {
feature: {
saveAsImage: {
title: '保存为图片 ' // 空格用于占位
},
dataView: {}, // 数据视图，可以修改和保存数据
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: { // 动态图标类型切换
type: ['line', 'bar', 'stack']
},
},
},
series: [
{
name: '语文',
type: 'bar',
showBackground: true,
// barWidth: '50%', // 有可能把别的列挤出去
data: [34, 45, 80],
color: '#5470c6',
label: {
normal: {
show: true,
rotate: 30
}
},
// markLine: {
// data: [
// {
// type: 'average',
// name: '平均分'
// }
// ]
// },
// markPoint: {
// data: [
// {
// type: 'max', name:'最高分',
// },
// {
// type: 'min', name:'最低分',
// },
// ]
// }
markArea: { // 区间标记，比如及格、良好、优秀
data: [
[
{
name: '及格线',
yAxis: 60,
},
{
yAxis: 80
}
]
]
},
},
{
name: '数学',
type: 'bar',
showBackground: true,
data: [84, 75, 64],
color: 'cornflowerblue',
label: {
normal: {
show: true,
position: 'top',
}
},
},
{
name: '英语',
type: 'line',
showBackground: true,
smooth: true,
data: [50, 75, 56],
color: 'cornflowerblue',
label: {
normal: {
show: true,
position: 'top',
}
},
lineStyle: {
color: 'green',
type: 'dotted'
},
areaStyle: { // 填充风格
color: 'pink'
}
},
],
}
charts.setOption(option)
</script>
</body>
</html>
