我想要在一个 echarts 图形中显示两个坐标系的图形，达到下面的效果
我的源码如下，没有实现也没有报错，不知道什么问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
<script>// 自定义主题
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
};
if (!echarts) {
log('ECharts is not Loaded');
return;
}
var colorPalette = ['#d87c7c','#919e8b', '#d7ab82', '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
echarts.registerTheme('vintage', {
color: colorPalette,
backgroundColor: '#fef8ef',
graph: {
color: colorPalette
}
});
}));
</script>
</head>
<body>
<div id="chart"></div>
<script text="text/javascript">
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'vintage');// 使用默认渲染方式 canvas
// const chart = echarts.init(chartDom,'vintage',{renderer:'svg'});
chart.setOption({
xAxis: [
{ type: 'category',gridIndex: 0 },// 第一套坐标系的横轴
{ type: 'category',gridIndex: 1} // 第二套坐标系的横轴
],
yAxis: [
{ min: 0,max: 100,gridIndex:0 },// 控制左边纵向坐标系的最小和最大刻度，第一套坐标系的第一个纵轴
{ splitLine: { show:false },gridIndex:0 },// 隐藏右边纵向坐标系的横线，第一套坐标系的第二个纵轴
{ minx: 0,max: 150,gridIndex:1} // 第二个坐标系的纵轴
],
grid:[{ bottom:'55%' },{ top:'55%' }],
dataset: {
source: [ // 单坐标系的数据是模型形式的数据 - DB中的单行数据体现为前端的一个对象整体显示
['product','2012','2013','2014','2015'],// 两个纵向坐标系的图表时，数据源是纵向体现 - 相比上面的横向体现
['Matcha Latte',41.1,30.4,65.1,53.3],
['Milk Tea',86.5,92.1,85.7,83.1]
]
},
series: [
{ // 第一套坐标系的柱状图
type: 'bar',
seriesLayoutBy: 'row',// 单坐标系的模型完整体现模式下不需要设置该参数
xAxisIndex: 0,
yAxisIndex: 0
},
{ // 第一套坐标系的折线图
type: 'line',
seriesLayoutBy: 'row',
xAxisIndex: 0,
yAxisIndex: 1
},
{ // 第二套坐标系的柱状图
type: 'bar',
seriesLayoutBy: 'row',
xAxisIndex: 1,
yAxisIndex: 2
}
]
});
</script>
</body>
</html>
