首页echarts多个标题组件实例代码,四个组件分别是柱状图折线图饼图和散点图

echarts多个标题组件实例代码,四个组件分别是柱状图折线图饼图和散点图

时间: 2024-10-23 16:18:25 浏览: 18

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`属性用于设定标题。你需要将`// 其他...`部分替换为对应图表的详细配置选项，如数据、系列等。

阅读全文