echarts直方图只有一个series,左半部分和右半部分name不同,给我一个完整例子
时间: 2024-01-21 12:04:54 浏览: 20
好的,以下是一个完整的 echarts 直方图例子,其中左半部分的 name 为“左边”,右半部分的 name 为“右边”:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts 直方图示例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<!-- echarts 容器 -->
<div id="histogram" style="width: 800px; height: 600px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('histogram'));
// echarts 配置项
var option = {
// 图表标题
title: {
text: '直方图示例'
},
// x 轴配置项
xAxis: {},
// y 轴配置项
yAxis: {},
// 数据系列配置项
series: [{
// 数据类型为直方图
type: 'histogram',
// 数据数组
data: [5, 10, 20, 30, 40, 50, 60, 70, 80, 90],
// 直方图的宽度
barWidth: 5,
// 直方图的颜色
itemStyle: {
color: '#7cb5ec'
},
// 左半部分的名称
name: '左边',
// 左半部分的区间范围
xAxisIndex: 0,
yAxisIndex: 0,
// 左半部分的标签样式
label: {
show: true,
position: 'insideLeft',
color: '#fff',
formatter: function(params) {
return '[' + params.value[0] + ', ' + params.value[1] + ')';
}
}
}, {
// 数据类型为直方图
type: 'histogram',
// 数据数组
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
// 直方图的宽度
barWidth: 5,
// 直方图的颜色
itemStyle: {
color: '#f7a35c'
},
// 右半部分的名称
name: '右边',
// 右半部分的区间范围
xAxisIndex: 1,
yAxisIndex: 1,
// 右半部分的标签样式
label: {
show: true,
position: 'insideRight',
color: '#fff',
formatter: function(params) {
return '[' + params.value[0] + ', ' + params.value[1] + ')';
}
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
其中,左半部分的数据范围为 `[5, 100)`,右半部分的数据范围为 `[10, 100]`。你可以根据实际需求修改数据范围和样式等配置项。