echarts：在html中使用_echarts html-优快云博客

本文链接：https://blog.youkuaiyun.com/jayLog/article/details/123454750

本文介绍了如何在HTML中安装和使用ECharts库创建图表。首先，可以通过官网下载或npm安装ECharts。接着，在HTML文件中引入echarts.js，并定义图表容器。然后，初始化ECharts实例并定义配置，包括标题、坐标轴和数据系列。最后，通过`setOption`方法将配置应用到实例上，生成柱状图。示例代码展示了完整的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

安装

两种安装方式：

可以在官网下载个版本的包
也可以使用npm下载
```
npm install echarts
```

请添加图片描述
我们只需要echarts.js或echarts.min.js。这是打包好的文件

在html中使用

引入echarts

<script type="text/javascript" src="./echarts.js"></script>

定义外边

<style type="text/css">
    #demo{/* 必须设置宽高*/
        width: 300px;
        height: 200px;
    }
</style>
<div id="demo">
</div>

### 初始化

let  ecDemo = echarts.init(document.getElementById("demo"))

定义配置

let options = {
    // 标题设置
    title:{text:'标图标题'},
    tooltip:{},//提示框
    legend:{// 数据标识
        data:["人数"]
    },
    // x轴标记
    xAxis:{
        data:["vue","react","au",'jq']
    },
    // y轴标记
    yAxis:{},
    // 数据系列
    series:[
        {
            name:'人数',
            type:'bar',
            data:[200,300,100,200]
        }
    ]

}

请添加图片描述

把配置添加到对象中

ecDemo.setOption(options)

效果：

请添加图片描述

完整代码如下 :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--  要确认echarts.js所在的路径是正确的 -->
	<script type="text/javascript" src="./echarts.js"></script>
	<title></title>
</head>
<body>
	<style type="text/css">
	    #demo{/* 必须设置宽高*/
	        width: 300px;
	        height: 200px;
	    }
	</style>
	<div id="demo">
</div>
</body>
<script type="text/javascript">
	let  ecDemo = echarts.init(document.getElementById("demo"))
	let options = {
	    // 标题设置
	    title:{text:'标图标题'},
	    tooltip:{},//提示框
	    legend:{// 数据标识
	        data:["人数"]
	    },
	    // x轴标记
	    xAxis:{
	        data:["vue","react","au",'jq']
	    },
	    // y轴标记
	    yAxis:{},
	    // 数据系列
	    series:[
	        {
	            name:'人数',
	            type:'bar',
	            data:[200,300,100,200]
	        }
	    ]
	}
	ecDemo.setOption(options)
</script>
</html>

结束~，下一节说下如何在vue中使用