$(function () { $(".tooltip-options i").tooltip({html : true });});
时间: 2024-04-28 21:22:13 浏览: 14
这是一个 jQuery 的代码段,用于初始化一个 Tooltip 工具。具体来说,它会将一个带有 `.tooltip-options` 类的元素下的子元素 `i` 都初始化为 Tooltip 工具,并且将其设置为支持 HTML 内容。也就是说,当用户将鼠标悬停在这些元素上时,会弹出一个浮动层,显示相应的提示信息。
相关问题
处理数据通过ecarts绘制一个图表拥有两个坐标系的多列柱状图var options={ data:[ { "column1": "男", "column2": 165, "column3": "2022-10" }, { "column1": "男", "column2": 178, "column3": "2022-11" }, { "column1": "男", "column2": 197, "column3": "2022-12" }, { "column1": "男", "column2": 120, "column3": "2023-01" }, { "column1": "男", "column2": 130, "column3": "2023-02" }, { "column1": "男", "column2": 137, "column3": "2023-03" }, { "column1": "女", "column2": 150, "column3": "2022-10" }, { "column1": "女", "column2": 201, "column3": "2022-11" }, { "column1": "女", "column2": 225, "column3": "2022-12" }, { "column1": "女", "column2": 104, "column3": "2023-01" }, { "column1": "女", "column2": 188, "column3": "2023-02" }, { "column1": "女", "column2": 148, "column3": "2023-03" } ] }
可以使用 Echarts 的 option 配置项,具体代码如下:
```javascript
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['男', '女']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: options.data.map(function (item) {
return item.column3;
})
}],
yAxis: [{
type: 'value',
name: '人数'
}],
series: [{
name: '男',
type: 'bar',
data: options.data.filter(function (item) {
return item.column1 === '男';
}).map(function (item) {
return item.column2;
})
}, {
name: '女',
type: 'bar',
data: options.data.filter(function (item) {
return item.column1 === '女';
}).map(function (item) {
return item.column2;
})
}]
};
```
在这个 option 中,我们定义了两个坐标系,一个是横坐标,表示日期,另一个是纵坐标,表示人数。我们使用了 Echarts 的柱状图(`type: 'bar'`)来展示数据。
其中,`options.data` 是你提供的数据,我们使用了 `Array.prototype.map()` 和 `Array.prototype.filter()` 方法对数据进行处理,生成了两组数据,分别对应男性和女性的数据。
最后,我们将 option 传给 Echarts 实例的 `setOption()` 方法,即可根据数据绘制出多列柱状图。
通过echarts绘制带有下钻功能3d立体柱状图var options={ data:[ { "column1": "2022", "column2": "1", "column3": "100.0" }, { "column1": "2022", "column2": "2", "column3": "200.0" }, { "column1": "2022", "column2": "3", "column3": "300.0" }, { "column1": "2023", "column2": "1", "column3": "100.0" }, { "column1": "2023", "column2": "2", "column3": "200.0" }, { "column1": "2023", "column2": "3", "column3": "300.0" }, ] }
以下是使用 ECharts 绘制带有下钻功能的 3D 立体柱状图的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 3D 柱状图下钻示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.2.1/dist/echarts-gl.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
<script>
// 初始化 ECharts 实例
var chart = echarts.init(document.getElementById('chart'));
// 配置项
var options = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
data: ['2022', '2023']
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
// 开启鼠标旋转、缩放
autoRotate: true,
distance: 200
}
},
xAxis3D: {
type: 'category',
data: ['1', '2', '3']
},
yAxis3D: {
type: 'category',
data: ['2022', '2023']
},
zAxis3D: {
type: 'value'
},
series: [{
name: '2022',
type: 'bar3D',
data: [[0, 0, 100], [1, 0, 200], [2, 0, 300]],
}, {
name: '2023',
type: 'bar3D',
data: [[0, 1, 100], [1, 1, 200], [2, 1, 300]],
}]
};
// 点击柱状图时触发的事件
chart.on('click', function(params) {
// 判断是否是系列柱状图
if (params.componentType === 'series') {
// 获取点击的数据
var data = params.data;
// 判断是否存在下一级数据
if (data.next) {
// 更新数据
chart.setOption({
xAxis3D: {
data: data.next.xAxisData
},
yAxis3D: {
data: data.next.yAxisData
},
series: {
data: data.next.seriesData
}
});
}
}
});
// 渲染图表
chart.setOption(options);
</script>
</body>
</html>
```
在上面的代码中,我们先初始化了一个 ECharts 实例,并定义了图表的配置项,其中包括了一个 3D 柱状图和点击事件的处理函数。在点击事件处理函数中,我们判断了点击的是否是系列柱状图,并获取了点击的数据。如果该数据存在下一级数据,我们就更新了图表的配置项,使之可以进行下钻操作。
需要注意的是,我们需要为每个柱状图数据设置一个 `next` 属性,用来存储该数据的下一级数据。在示例代码中,我们假设下一级数据是通过 AJAX 请求获取的,然后将数据更新到图表中。
以上就是使用 ECharts 绘制带有下钻功能的 3D 立体柱状图的示例代码。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)