vue add element
function getChart() {
//创建Echarts对象
var myEchart = echarts.init(document.getElementById("box"));
var options = {
title: {
text: "Echarts入门",
},
tooltip: {},
//数据源
dataset: {
source: [
['全栈', 11000, 14000, '初中', 150],
['大数据', 9000, 3000, '高中', 100],
['人工智能', 10000, 12060, '本科', 20],
['测试', 8000, 11000, '中专', 30],
]
},
grid: [{bottom:'50%',width:300}, {left:600,bottom:'50%',width:300},{width:300,top:500}],
xAxis: [
{
type: 'category',
gridIndex: 0
},
{
type: 'category',
gridIndex: 1
},
{
type: 'category',
gridIndex: 2
}
],
yAxis: [{gridIndex:0}, {gridIndex:1},{gridIndex:2}],
series: [{
type: 'bar',
xAxisIndex:0,
yAxisIndex:0,
encode: {
x: 0,
y: 1
}
}, {
type: 'line',
xAxisIndex:1,
yAxisIndex:1,
encode: {
x: 0,
y: 2
}
},{
type: 'bar',
xAxisIndex:2,
yAxisIndex:2,
encode: {
x: 0,
y: 2
}
}
]
};
myEchart.setOption(options);
myEchart.resize()
}
window.onload = function() {
getChart()
window.onresize = function() {
getChart()
};
};
备注:
-
就是一个图表实现展现多个坐标系,一个坐标系就是一个grid
-
这里主要用到关键几个属性:grid,xAxis,yAxis,gridIndex,xAxisIndex,yAxisIndex
-
grid:定义坐标系网络
-
xAxis:x轴
-
yAxis: y轴
-
gridIndex:网络的下标 从0开始,0代码第一个网格坐标,1代码第2个坐标系。。。。
-
xAxisIndex:代表横轴坐标编号 0代码第1个横轴。。。。
-
yAxisIndex:代纵轴坐标编号 0代码第1个纵轴。。。。