echarts系列-----2 (多个Y轴)
本篇讲解的echarts 多个Y轴的实现方法,具体见代码,并标注注释(例子 文档事例都是有的,传送门????)
- yAxisIndex 代表第一个Y轴 (0,1,2…)
-
- this.myChart.setOption(options, true); 重新渲染canvas传送门????
<template>
<div>
<div id="main" style="width:1200px;height:600px;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "echartsmorey",
data() {
return {
list: [
{
x: 1,
y: 1,
z: 99,
k: 11
},
{
x: 2,
y: 2,
z: 70,
k: 11
},
{
x: 3,
y: 3,
z: 1,
k: 11
},
{
x: 4,
y: 4,
z: 30,
k: 11
},
{
x: 5,
y: 1,
z: 20,
k: 11
},
{
x: 6,
y: 0,
z: 18,
k: 11
},
{
x: 7,
y: 10,
z: 12,
k: 11
}
],
dataX: [],
dataY: [],
dataY2: []
};
},
methods: {
init(dataX, dataY) {
this.myChart = echarts.init(document.getElementById("main"));
let option = {
legend: {
icon: "stack",
data: ["AA", "BB", "CC"]
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: true
}
},
// 工具栏
toolbox: {
x: 1100,
y: 0,
feature: {
saveAsImage: {
name: `test`
}
}
},
grid: {
left: "5%", //组件距离容器左边的距离
right: "20%",
top: "15%"
},
// X轴 滑块 可缩放
dataZoom: [
{
type: "slider",
show: true,
start: 0, // 开始百分数
end: 100 // 结束百分数
}
],
xAxis: {
type: "category",
splitLine: {
// X 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
},
data: dataX
},
yAxis: [
{
name: "Y轴单位写的位置",
type: "value",
// max: 100,
// min: 0,
position: "left",
splitNumber: 10, // Y 轴分隔格数
splitLine: {
// Y 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
}
},
{
name: "Y2轴单位写的位置",
type: "value",
position: "right",
splitNumber: 10, // Y 轴分隔格数
splitLine: {
// Y 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
}
},
{
name: "Y3轴单位写的位置",
type: "value",
offset: 70,
nameGap: 30, // 上下距离的位置
position: "right",
splitNumber: 10, // Y 轴分隔格数
splitLine: {
// Y 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
}
}
],
series: dataY
};
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option);
}
},
mounted() {
this.$nextTick(() => {
this.dataX = this.list.map(item => item.x);
// 第1个Y轴
this.dataY.push({
name: "AA",
type: "line", // 直线
yAxisIndex: 0, // 第几个Y轴 索引值
data: this.list.map(item => item.y)
});
// 第2个Y轴
this.dataY.push({
name: "BB",
type: "line",
yAxisIndex: 1, // 第几个Y轴 索引值
data: this.list.map(item => item.z)
});
// 第3个Y轴
this.dataY.push({
name: "CC",
type: "line",
yAxisIndex: 2, // 第几个Y轴 索引值
data: this.list.map(item => item.k)
});
this.init(this.dataX, this.dataY);
});
}
};
</script>
<style scoped>
</style>