高级篇

多坐标轴

多坐标轴的常见应用就是一个图表有两个y 轴。

    /*基于准备好的dom，初始化echarts实例*/
const myChart = echarts.init(document.getElementById('main'));/*指定图表的配置项和数据*/
const option = {/*图例*/legend:{data:['学习人数','就业人数']},/*提示*/tooltip:{},/*x 轴*/xAxis:{data:['html','css','js']},/*y 轴*   name 坐标轴名称*   min 刻度最小值*   max 刻度最大值* */yAxis:[{name: '人数',min:0,max:50}, //{interval:8},{}],/*系列列表 series*   yAxisIndex 当前系列对应的y 轴的索引位置* */series:[{name:'学习人数',type:'bar',data:[30,20,40],yAxisIndex:0},{name:'就业人数',type:'bar',data:[330,450,850],yAxisIndex:1}]
};
// 基于配置项显示图表。
myChart.setOption(option);

复杂多坐标轴

    const myChart = echarts.init(document.getElementById('main'));/** data1 销售量的系列数据* data2 盈利额的系列数据*/const data1=[60, 12, 16, 11, 16, 20];const data2=[-150, 120, 160, -110, 160, 1000];//理想行数（实际行数会有浮动）const rowNum=6;/*数据极值*   max1 销售量数据的最大值*   max2 盈利额数据的最大值*   min1 销售量数据的最小值*   min2 盈利额数据的最小值* */let max1=Math.max(...data1);let max2=Math.max(...data2);let min1=Math.min(...data1);let min2=Math.min(...data2);/*极值比例*/const rat1=min1/max1;const rat2=min2/max2;/*比例大小对比*/const ratState=rat1>rat2;/*设置极小值*   如果系列1的最小比最大大于系列2的最小比最大，让系列1的极小值等于自身的极大值乘以系列2的极值比例*   否则，让系列2的极小值等于自身的极大值乘以系列1的极值比例*  */if(ratState){min1=rat2*max1;}else{min2=rat1*max2;}/** inter1 销售量的行高取整* inter2 盈利额的行高取整* */let inter1=Math.ceil((max1-min1)/rowNum);let inter2=Math.ceil((max2-min2)/rowNum);console.log(inter1,inter2);/*对极值微调*/min1=Math.floor(min1/inter1)*inter1;max1=Math.ceil(max1/inter1)*inter1;min2=Math.floor(min2/inter2)*inter2;max2=Math.ceil(max2/inter2)*inter2;/*求行数*/const maxRowNum=Math.max(max1/inter1,max2/inter2);const minRowNum=Math.min(min1/inter1,min2/inter2);/*极值微调*/min1=inter1*minRowNum;max1=inter1*maxRowNum;min2=inter2*minRowNum;max2=inter2*maxRowNum;/*配置项*/const option = {tooltip: {},legend: {data: ['销售量', '盈利额']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: [{type: 'value',scale: true,name: '销售量',min: min1,max: max1,interval: inter1,},{type: 'value',scale: true,name: '盈利额',min: min2,max: max2,interval: inter2,}],series: [{name: '销售量',type: 'bar',yAxisIndex: 0,data: data1,},{name: '盈利额',type: 'bar',yAxisIndex: 1,data: data2}]};myChart.setOption(option);
</script>

echarts（五）高级篇（多坐标轴、复杂多坐标轴）相关推荐

小瓜讲matplotlib高级篇——坐标轴设置（坐标轴居中、坐标轴箭头、刻度设置、标识设置）
文章目录问题解决方案代码附录文章导引列表: 机器学习数据分析数据可视化问题我们在用matplotlib绘制图的时候总是有各种需求,比如下图为matplotlib默认设置画的正弦图但是 ...
PhotoShop算法实现高级篇--色彩特效（三十五）
PhotoShop算法实现高级篇--色彩特效(三十五) kezunhai@gmail.com http://blog.csdn.net/kezunhai Photoshop中有很多色彩特效,本文介绍几 ...
Spark性能优化指南：高级篇
前言继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问 ...
Spark性能优化指南——高级篇
继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问题. ...
MySQL高级篇（事务视图存储过程与函数）
目录一.事务 1.1什么是事务? 1.2事务的特性 1.3事务的分类 1.4事务的操作步骤 1.5事务的隔离级别(面试题常考) 二.视图 2.1视图的操作 2.1.1视图的创建 2.1.2视图更新( ...
java rabbitmq 并发_RabbitMQ消息中间件高级篇二高并发情况下保障消息投递可靠性...
RabbitMQ消息中间件技术精讲9 高级篇二高并发场景下,消息的延迟投递做二次确认进行回调检查来保障生产者消息投递成功的可靠性在上一篇文章中,我们介绍了BAT大厂中一种方式保障生成者消息投递可靠 ...
[洪流学堂]Hololens开发高级篇3：语音（Voice）
本教程基于Unity2017.2及Visual Studio 2017 本教程编写时间:2017年12月8日本文内容提要设计语音命令并针对Hololens语音引擎优化让用户知道可以用什么语音命令 ...
谷粒商城-分布式高级篇[商城业务-检索服务]
谷粒商城-分布式基础篇[环境准备] 谷粒商城-分布式基础[业务编写] 谷粒商城-分布式高级篇[业务编写]持续更新谷粒商城-分布式高级篇-ElasticSearch 谷粒商城-分布式高级篇-分布式锁与 ...
excel计算二元线性回归_谁说菜鸟不会数据分析（高级篇）及竞争力 excel②
有效,快速解决业务的方法,才是好方法!!! 工具篇数据分析三大作用:1.过去发生什么 2.为何发生 3.将要发生什么数据可视化 1.地图 2.词云 3.水晶易表报告自动化: 哈哈·,word制卷 ...

echarts（五）高级篇（多坐标轴、复杂多坐标轴）

高级篇

多坐标轴

复杂多坐标轴

echarts（五）高级篇（多坐标轴、复杂多坐标轴）相关推荐

最新文章

热门文章