Echarts多系多y轴的配置

有时候在一个图形中需要显示的对象多样化，一个y轴并不能满足我们的需求。这时我们就需要配置多个y轴

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>多系柱状图</title><!-- 引入 echarts.js --><script src="js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var colors = ['#FD2446','#248EFD','#C916F2','#6669B1'];//自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组var months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];// 指定图表的配置项和数据var option = {color:colors,title: {//标题，可以自定义标题的位置和样式text: '某地区的、单位数、职工人数、和平均工资'},legend: {//图例，每一个系列独有一个图例，注意：图例的名字必须跟下面series数组里面的name一致。data: ['单位数','职工数', '平均工资' ],},tooltip: {//鼠标悬浮时的样式，可自定义trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'cross'        // 默认为直线，可选为：'line' | 'shadow'}},xAxis: {//x轴的配置data: months},yAxis: [{//第一个y轴位置在左侧position:'left',type : 'value',name: '单位数',axisLine: {lineStyle: {color: colors[0]}},axisLabel: {formatter: '{value} 个'}},{//第二个y轴在右侧position:'right',type : 'value',name: '职工数',axisLine: {lineStyle: {color: colors[1]}},axisLabel: {formatter: '{value} 人'}},{//第三个y轴也在右侧，距第二个70个像素position:'right',offset:70,type : 'value',name: '平均工资',axisLine: {lineStyle: {color: colors[2]}},axisLabel: {formatter: '{value} 万元'}}],toolbox: {//工具栏组件show : true,feature : {magicType : {show: true, type: ['line', 'bar']},//柱状图和折线图相互转换dataView:{show: true,title: '某地区的、单位数、职工人数、和平均工资'}},saveAsImage : {show:true},//保存图片restore : {show: true}//还原},series:[{name:'单位数',type:'bar',barMaxWidth:'20%',label:{normal:{show:true,position:'top'}},yAxisIndex:'0',//使用第一个y轴，序号从0开始data: [23,27,28,30,34,36,39,41,45,46,56,60]},{name:'职工数',type:'bar',barMaxWidth:'20%',label:{normal:{show:true,position:'top'}},yAxisIndex:'1',//使用第二个y轴data:[1500,1700,1750,1800,1850,1900,1910,1941,1980,2000,2100,2200]},{name:'平均工资',type:'bar',barMaxWidth:'20%',label:{normal:{show:true,position:'top'}},yAxisIndex:'2',//使用第三个y轴data:[3500,3600,4200,4800,5500,6500,4900,3500,5400,5500,6500,7000]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

下面是效果图：

Echarts多系多y轴的配置相关推荐

echarts柱状图x，y轴对应多条数据(可自定义)
echarts,x,y轴对应多条数据,y轴取反就行先说需求,我做这个图表是多个物流商对应不同月份的数值配置项option option = {tooltip: {trigger: 'axis',a ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
echarts，x轴y轴，配置参数详情
mytextStyle={color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontW ...
vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
Echarts y轴相关配置
目录 1 简介 2 y轴配置 2.1 y轴主要属性 2.2 y轴刻度设置 3.总结 1 简介本篇介绍我们在使用Echarts画图时常用的一些y轴坐标设置,如y轴位置,y轴偏移量.y轴刻度.y轴最 ...
echarts图表的x轴和y轴的配置
xAxis与yAxis中有很多配置项,下面我以xAxis进行详解,yAxis参考xAxis即可 nameTextStyle:坐标轴名称的文字样式 axisLine:坐标轴轴线相关设置. axisTic ...
Echarts多y轴的配置案例（各标签含义详解）
很多人设置第三个Y轴不显示,是因为没有给第三个Y轴预留显示空间, 首先,grid设置x值,表示左边Y轴距离最左侧多少像素, grid:{ x:value1, y:value2, x2:value3, ...
Echarts中折线图Y轴数据值太长显示不全-解决办法
正常状态不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况代码 <div id="c ...

Echarts多系多y轴的配置

Echarts多系多y轴的配置相关推荐

最新文章

热门文章