<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../echarts.js"></script>
</head>
<body>
<style>
#chart {
width: 800px;
height: 400px;
margin: 100px auto;
border: 1px solid red;
}
</style>
<div id="chart"></div>
<script>
var chartDom = document.querySelector("#chart");
var chart = echarts.init(chartDom);
chart.setOption({
dataset:{
// source: [
// ['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],
// ],
source: [
['product', 41.1, 41.1, 41.1, 41.1],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
],
},
title:{
text:"echarts 案例",
subtext:"subtitle"
},
dataZoom: {
show:true,
start:0,
end:100 // 结束位置百分百
},
grid:{ // 上下左右位置
top:100,
left:"10%",
right:"10%",
bottom:100
},
toolbox:{
feature:{
dataZoom:{
// yAxisIndex:1 // 选择一个不存在的坐标轴
yAxisIndex:false
},
restore:{},
saveAsImage:{}
}
},
xAxis:{
data:["product",'Matcha Latte','Milk Tea']
},
yAxis:{},
legend:{
data:["分类","折线图","柱状图"],
left:200
},
series:[
{
type:"pie",
name:"分类",
radius:35,
encode:{
itemName:3,
value:4
}
},
{
type:"line",
name:"折线图",
encode:{
x:0,y:1
}
},
{
type:"bar",
name:"柱状图",
encode:{
x:0,y:2
}
}
]
})
</script>
</body>
</html>
一个图多个坐标轴，默认数据读取是column，，设置seriesLayoutBy:true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../echarts.js"></script>
</head>
<body>
<style>
#chart {
width: 800px;
height: 400px;
margin: 100px auto;
border: 1px solid red;
}
</style>
<div id="chart"></div>
<script>
var chartDom = document.querySelector("#chart");
var chart = echarts.init(chartDom);
chart.setOption({
dataset:{
source: [
['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],
],
},
xAxis:{
type:"category" // x轴分类
},
yAxis:[{
min:0, // 左右坐标轴统一配置，，分割线就不会叠到一起
max:100
},{
splitLine:{
show:false // 分隔线， 两个轴的分割线叠在了一起
}
}], // 两个y轴坐标系
series:[
{
type:"bar",
seriesLayoutBy:"row",
yAxisIndex:0, // 使用第一个y轴
y:1
},
{
type:"line",
seriesLayoutBy:"row",
y:2,
yAxisIndex:1 // 使用第二个y轴
}
]
})
</script>
</body>
</html>
多坐标系，多grid，，每一个x轴，和y轴，都设置对应的grid，，表示是哪一个坐标系的轴：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../echarts.js"></script>
</head>
<body>
<style>
#chart {
width: 800px;
height: 400px;
margin: 100px auto;
border: 1px solid red;
}
</style>
<div id="chart"></div>
<script>
var chartDom = document.querySelector("#chart");
var chart = echarts.init(chartDom);
chart.setOption({
dataset:{
source: [
['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],
],
},
xAxis:[
{
type:"category", // x轴分类
gridIndex:0
},
{
type:"category",
gridIndex: 1
}
],
yAxis:[{
min:0, // 左右坐标轴统一配置，，分割线就不会叠到一起
max:100,
gridIndex:0
},{
splitLine:{
show:false // 分隔线， 两个轴的分割线叠在了一起
},
gridIndex:0
},{
min:0,
max:150,
gridIndex:1
}], // 两个y轴坐标系
grid:[{bottom:"55%"},{top:"55%"}],// grid用来区分两个坐标系
series:[
{
type:"bar",
seriesLayoutBy:"row",
xAxisIndex:0,
yAxisIndex:0, // 使用第一个y轴
y:1
},
{
type:"line",
seriesLayoutBy:"row",
y:2,
xAxisIndex:0,
yAxisIndex:1 // 使用第二个y轴
},
{
type:"bar",
y:1,
xAxisIndex:1,
yAxisIndex: 2,
seriesLayoutBy:"row",
}
]
})
</script>
</body>
</html>