html引入echarts
时间: 2023-10-10 19:04:43 浏览: 42
要在HTML页面中引入Echarts,你可以按照以下步骤进行:
1. 首先,在Echarts官网下载Echarts的压缩包,解压后可以得到echarts.min.js文件。
2. 在HTML页面中引入jQuery和echarts.min.js文件。可以使用以下代码:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/echarts.min.js"></script>
```
其中,path/to/echarts.min.js是你下载并解压Echarts压缩包后得到的echarts.min.js文件的路径。
3. 在HTML页面中添加一个容器用于显示Echarts图表,例如:
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
其中,id为chart的div元素就是用于显示Echarts图表的容器。
4. 在JavaScript代码中,使用Echarts提供的API来绘制图表。例如:
```javascript
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这段代码将在id为chart的div元素中绘制一条简单的折线图。