文章介绍了如何使用Echarts插件在网页中实现预览功能，包括柱状图和条形图的代码示例，详细讲解了数据标题、效果设置和坐标轴数据配置，以及如何通过JavaScript设置Echarts实例和配置项。
这个插件可以实现预览
目录
1.柱形图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 步骤1：引入echarts.js文件 -->
<script src="js/echarts.min.js"></script>
<!--
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象
-->
</head>
<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
// 步骤4：准备配置项
var option = {
xAxis: {
type: 'category',
data: ['小明', '小红', '小王']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 92, 87]
}
]
}
// 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
2.折线图
1.设置数据的标题
2.效果的设置
3.x.y轴的数据设置
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: '成绩表',
subtext: '成绩来源',
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['2023年', '2024年'],
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true },
},
},
calculable: true,
xAxis: [
{
type: 'category',
data:['2月','4月','6月','9月','11月','1月']
},
],
yAxis: [
{
type: 'value',
data: ['等于号'],
},
],
series: [
{
name: '2023年',
type: 'line',
data: [65,75,66,80,90,73],
},
{
name: '2024年',
type: 'line',
data: [65,88,75,40,60,72],
},
],
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
3.条形图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: '3班成绩表',
subtext: '数据来自辅导员',
},
legend: {
data: ['计算机基础','数据可视化'],
},
calculable: true,
xAxis: [
{
type: 'value', //设置柱状图
boundaryGap: ['20%','20%'],
},
],//xAxis：设置X轴的类型为“value”（数值轴），并设置柱状图的间隙（boundaryGap）。
yAxis: [
{
type: 'category',
data: ['明明','红红','高高'],
},
],//yAxis：设置Y轴的类型为“category”（类别轴），并设置其数据为“明明”、“红红”和“高高”。
series: [
{
name: '计算机基础',
type: 'bar',
data: [80,88,70],
markPoint: { // 标记点
},
},
{
name: '数据可视化',
type: 'bar',
data: [60,90,80,],
markPoint: { // 标记点
},
},//series：设置图表的系列数据。
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
————————————————
扫一扫
2568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
