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>

echarts系列-----2 (多个Y轴)相关推荐

echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值
echarts 柱状图隐藏x.y轴的内容,隐藏x,y轴坐标轴.刻度线.隐藏x.y轴坐标轴的数值 1.隐藏x轴坐标轴,在xAxis下使用axisLine属性为false,相反显示则是true axisL ...
echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示下载资源: 46 次 ...
echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析先贴一 ...
Echarts 区域缩放以及设置Y轴显示
一.区域缩放首先在option添加toolbox,也就是右上角的功能图标块 toolbox: {trigger: 'axis',//鼠标经过提示show:true,feature:{dataZoom ...
echarts 获取点击的y轴数值_四川Y轴前后钢板防护罩哪里卖
四川Y轴前后钢板防护罩哪里卖沧州越进机床附件有限公司为机床附件专业生产单位,集开发.设计.制造销售于一体.是机床附件.防护罩装置生产历史较早.专业性较强.技术力量雄厚,国内规模较大企业.我公司依靠科 ...
echarts 获取点击的y轴数值_有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物...
有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物本文作者:Summer 轴手性联芳基二醇骨架广泛存在于天然产物.生物活性分子.有用的手性配体以及催化剂中(Figure 1a),因此,轴手 ...
echarts 三种数据双y轴显示（文末附带完整代码）
说明:网络引用echarts.js和直接下载echarts引用的样式可能会不一致,需要对折线的样式和字体进行修改的请参考我的另外一篇文章https://blog.csdn.net/Wangwangwa ...
echarts 获取点击的y轴数值_静音导轨轴厂家定做-福建 - 福州机械及行业设备
双轴心直线导轨在业内也称为双轴心导轨,初是由德国研发的一种导轨,导轨滑块和滚轮相互配合都是一体的.双轴心分为内置双轴心和外置双轴心,外置就是导轨滑块在导轨的外面,内置就是导轨滑块在导轨的内部,两者优点 ...
echarts 获取点击的y轴数值_用 Python 自动获取NBA现役球员的职业生涯数据曲线
前言作为一个看了多年篮球的 NBA球迷,一直在想用 python 和篮球一起来写点什么加上最近在学习 pyecharts ,所以就有了下面这篇文章: 根据输入的球队和球员名字,自动生成该球员职业生 ...

echarts系列-----2 (多个Y轴)

echarts系列-----2 (多个Y轴)相关推荐

最新文章

热门文章