jquery在echarts中的使用
时间: 2023-11-07 14:04:48 浏览: 92
echarts文件中有dist\echarts.js,引入到自己的echrts中即可使用
在echarts中使用jQuery有两种方式:
1. 直接在HTML文件中引入jQuery库文件,并在JavaScript代码中使用jQuery的API来操作echarts实例。示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts jQuery 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
$(function () {
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;
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);
});
</script>
</body>
</html>
```
2. 使用echarts提供的`$`对象来代替jQuery,直接在JavaScript代码中使用`$`对象来操作echarts实例。示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts $ 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;
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'
}]
};
$.setOption(option);
$.resize();
$.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 1
});
</script>
</body>
</html>
```
阅读全文