echarts多个标题组件实例代码,四个组件分别是柱状图 折线图 饼图和散点图
时间: 2024-10-23 15:18:25 浏览: 24
ECharts是一个强大的JavaScript图表库,要创建包含四种不同类型的图表并设置各自独立标题的实例,可以参考以下代码示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
</head>
<body>
<div id="bar-chart" style="width: 500px;height:400px;"></div>
<div id="line-chart" style="width: 500px;height:400px;"></div>
<div id="pie-chart" style="width: 500px;height:400px;"></div>
<div id="scatter-chart" style="width: 500px;height:400px;"></div>
<script>
// 柱状图配置
var barChart = echarts.init(document.getElementById('bar-chart'));
barChart.setOption({
title: {
text: '柱状图'
},
// 其他柱状图配置...
});
// 折线图配置
var lineChart = echarts.init(document.getElementById('line-chart'));
lineChart.setOption({
title: {
text: '折线图'
},
// 其他折线图配置...
});
// 饼图配置
var pieChart = echarts.init(document.getElementById('pie-chart'));
pieChart.setOption({
title: {
text: '饼图'
},
// 其他饼图配置...
});
// 散点图配置
var scatterChart = echarts.init(document.getElementById('scatter-chart'));
scatterChart.setOption({
title: {
text: '散点图'
},
// 其他散点图配置...
});
</script>
</body>
</html>
```
在这个例子中,每种图表都有自己的`title.text`属性用于设定标题。你需要将`// 其他...`部分替换为对应图表的详细配置选项,如数据、系列等。
阅读全文