以下是一个
使用 Echarts 写的
自定义折柱混合图的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<
title>
自定义折柱混合图</
title>
<script src="https://cdn.jsdelivr.net/npm/
echarts/dist/
echarts.min.js"></script>
<style>
#chart {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
// 初始化
Echarts 实例
var chart =
echarts.init(document.getElementById('chart'));
// 数据
var data = [
{ name: '一月', value1: 200, value2: 400 },
{ name: '二月', value1: 300, value2: 500 },
{ name: '三月', value1: 400, value2: 600 },
{ name: '四月', value1: 500, value2: 700 },
{ name: '五月', value1: 600, value2: 800 },
{ name: '六月', value1: 700, value2: 900 },
{ name: '七月', value1: 800, value2: 1000 },
{ name: '八月', value1: 900, value2: 1100 },
{ name: '九月', value1: 1000, value2: 1200 },
{ name: '十月', value1: 1100, value2: 1300 },
{ name: '十一月', value1: 1200, value2: 1400 },
{ name: '十二月', value1: 1300, value2: 1500 }
];
// 配置项
var option = {
// 图表标题
title: {
text: '
自定义折柱混合图'
},
// 图例
legend: {
data: ['折线图', '柱状图']
},
// X 轴
xAxis: {
type: 'category',
data: data.map(function(item) {
return item.name;
})
},
// Y 轴
yAxis: [
{
type: 'value',
name: '折线图',
axisLabel: {
formatter: '{value} 元'
}
},
{
type: 'value',
name: '柱状图',
axisLabel: {
formatter: '{value} 元'
}
}
],
// 系列
series: [
{
name: '折线图',
type: 'line',
data: data.map(function(item) {
return item.value1;
})
},
{
name: '柱状图',
type: 'bar',
yAxisIndex: 1,
data: data.map(function(item) {
return item.value2;
})
}
]
};
//
使用刚指定的配置项和数据显示图表
chart.setOption(option);
</script>
</body>
</html>
```
该示例中，我们
使用了
Echarts 的基本配置项，包括图表标题、图例、X 轴、Y 轴和系列。其中，我们定义了两个 Y 轴，分别对应折线图和柱状图，以便更好地展示数据。在系列中，我们分别定义了折线图和柱状图，通过 `map` 方法将数据转换为对应的格式，并设置了对应的名称和类型。
通过以上代码的修改，您可以
自定义折柱混合图的样式和数据，以适应您的实际需求。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
