echarts直方图只有一个series,左半部分和右半部分name有两个,完整的代码例子给我一下
时间: 2023-05-24 15:04:48 浏览: 89
以下是一个使用 ECharts 绘制直方图的完整示例代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 直方图示例</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '直方图示例'
},
tooltip: {},
legend: {
data:['数据']
},
xAxis: {
type: 'value',
name: '数值'
},
yAxis: {
type: 'value',
name: '频数'
},
series: [{
name: '数据',
type: 'bar',
data: [
[10, 20],
[20, 40],
[30, 50],
[40, 60],
[50, 70],
[60, 80],
[70, 90],
[80, 100]
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
在上面的代码中,我们可以看到:
1. 我们在 HTML 文件中引入了 ECharts 的库文件,可以使用 ECharts 提供的 API 生成图表。
2. 在 JavaScript 部分,我们通过 `echarts.init` 函数初始化了一个 ECharts 实例,并将其绑定到一个 HTML 元素中。
3. 接着,我们定义了一个 `option` 对象,其中包含了图表的配置项和数据。
4. 在 `series` 中,我们定义了一个数据序列,使用 `type: 'bar'` 表示这是一个柱状图。数据分别为 `[10, 20]`、`[20, 40]`、`[30, 50]` 等。
5. 最后,我们使用 `myChart.setOption(option)` 函数将 `option` 对象传入 ECharts 实例中,并生成图表。