用html和任意框架写出折线图可以自由切换柱形折线形,并且带有放大窗口点击即可弹出放大后图像
时间: 2024-03-19 16:44:05 浏览: 46
好的,下面是一个使用echarts框架实现的示例代码,可以实现折线图和柱形图的切换,并且可以通过点击图表来弹出放大后的图像。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折线图和柱形图切换示例</title>
<!-- 引入echarts库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个容器用于显示图表 -->
<div id="chart" style="width: 100%; height: 500px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 定义数据
var data = {
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
series1: [120, 200, 150, 80, 70, 110, 130],
series2: [80, 120, 160, 200, 180, 150, 100]
};
// 定义图表选项
var option = {
// 定义图表标题
title: {
text: '折线图和柱形图切换示例'
},
// 定义横轴
xAxis: {
type: 'category',
data: data.categories
},
// 定义纵轴
yAxis: {
type: 'value'
},
// 定义数据系列
series: [
{
name: '系列1',
type: 'line',
data: data.series1
},
{
name: '系列2',
type: 'bar',
data: data.series2
}
],
// 定义工具栏
toolbox: {
// 定义工具栏按钮
feature: {
// 切换折线图和柱形图
magicType: {
type: ['line', 'bar']
},
// 放大缩小
dataZoom: {
show: true,
yAxisIndex: false,
// 定义缩放区域
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100,
handleIcon: 'M0,0 v9.7h10v-9.7h-10Z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
]
},
// 保存为图片
saveAsImage: {
show: true
}
}
}
};
// 将选项设置给图表实例
myChart.setOption(option);
// 点击图表时弹出放大后的图像
myChart.on('click', function(params) {
var imageUrl = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
var imageHtml = '<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center;"><img src="' + imageUrl + '" style="max-width: 90%; max-height: 90%;"></div>';
document.body.insertAdjacentHTML('beforeend', imageHtml);
});
</script>
</body>
</html>
```
这个示例中使用了echarts框架来绘制图表,实现了折线图和柱形图的切换,以及放大缩小和保存为图片等功能。通过点击图表可以弹出放大后的图像。
阅读全文