echarts制作多个纵轴的折线图

实现效果：

页面代码如下：

<script type="text/javascript">
$(function (){var myChart = echarts.init(document.getElementById('main'));option = {color: ["#9bbb59","#0B438B","#4141F1","#F81945","#4bacc6","#F89E19","#000000"],title: {//text: '多个纵轴的折线图'},tooltip: { //框浮层内容格式器  提示框组件trigger: 'axis',formatter: '{b}'+'<br>'+'{a0}:{c0}' + '<br>' + '{a1}:{c1}' + '<br>' + '{a2}:{c2}' + '<br>'+'{a3}:{c3}'+ '<br>'+'{a4}:{c4}' + '<br>'+'{a5}:{c5}' + '<br>'+'{a6}:{c6}'},legend: {x: 'right',data: ['纵轴一', '纵轴二', '纵轴三', '纵轴四','纵轴五','纵轴六','纵轴七'],textStyle: {color: "#fff",fontsize: 25}},grid: {left: '10%',right: '14%',bottom: '3%',containLabel: true},dataZoom: [{  //于区域缩放type: 'inside',start: 0,end: 100}, {start: 0,end: 10,handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '80%',handleStyle: {color: '#fff',shadowBlur: 3,shadowColor: 'rgba(0, 0, 0, 0.6)',shadowOffsetX: 2,shadowOffsetY: 2}}],xAxis: {type: 'category',boundaryGap: true,data: [1,2,3,4,5,6],axisLabel: {interval: 0}},yAxis: [{boundaryGap: [0, '50%'],axisLine: {lineStyle: {color: '#9bbb59'}},type: 'value',name: '纵轴一',position: 'left',//Y轴在图的坐边offset: 120,//坐标轴移动120axisLabel: {formatter: function(value, index) {return value;},textStyle: {color: '#9bbb59'//Y轴的文字颜色}},splitLine: {show: false,},},{boundaryGap: [0, '50%'],axisLine: {lineStyle: {color: '#0B438B'}},splitLine: {show: false,},type: 'value',name: '纵轴二',position: 'left',offset: 60,//axisLabel: {formatter: function(value, index) {return value;}}},{boundaryGap: [0, '50%'],axisLine: {lineStyle: {color: '#4141F1'}},splitLine: {show: false,},type: 'value',name: '纵轴三',position: 'left',axisLabel: {formatter: function(value, index) {return value;}},axisTick: {inside: 'false',length: 10,}}, {boundaryGap: [0, '50%'],axisLine: {lineStyle: {color: '#F81945'}},splitLine: {show: false,},type: 'value',name: '纵轴四',//offset: 50, //坐标轴移动50position: 'right',axisLabel: {formatter: function(value, index) {return value;}},axisTick: {inside: 'false',length: 10,}},{boundaryGap: [0, '50%'],axisLine: {lineStyle: {color: '#4bacc6'}},splitLine: {show: false,},type: 'value',name: '纵轴五',offset: 60, //坐标轴移动50mmposition: 'right',axisLabel: {formatter: function(value, index) {return value;}},axisTick: {inside: 'false',length: 10,}},{boundaryGap: [0, '50%'],axisLine: {lineStyle: {color: '#F89E19'}},splitLine: {show: false,},type: 'value',name: '纵轴六',offset: 120, //坐标轴移动50mmposition: 'right',axisLabel: {formatter: function(value, index) {return value;}},axisTick: {inside: 'false',length: 10,}},{boundaryGap: [0, '50%'],axisLine: {lineStyle: {color: '#000000'}},splitLine: {show: false,},type: 'value',name: '纵轴七',offset: 180, //坐标轴移动50mmposition: 'right',axisLabel: {formatter: function(value, index) {return value;}},axisTick: {inside: 'false',length: 10,}},],series: [{name: '纵轴一',type: 'line',data: [2,1,2,1,2,1],lineStyle: {color: "rgba(155, 187, 89, 1)"//折线颜色},yAxisIndex: 0,},{name: '纵轴二',type: 'line',data: [7,8,4,2,1,2],lineStyle: {color: "rgba(11, 67, 139, 1)"},yAxisIndex: 1,},{name: '纵轴三',type: 'line',data: [9,5,6,9,7,1],lineStyle: {color: "rgba(65, 65, 241, 1)"},yAxisIndex: 2,},{name: '纵轴四',type: 'line',data: [6,8,4,2,3,7],lineStyle: {color: "rgba(248, 25, 69, 1)"},yAxisIndex: 3,},{name: '纵轴五',type: 'line',data: [9,5,4,1,2,7],lineStyle: {color: "rgba(75, 172, 198, 1)"},yAxisIndex: 4,},{name: '纵轴六',type: 'line',data: [4,7,8,4,5,1],lineStyle: {color: "rgba(248, 158, 25, 1)"},yAxisIndex: 5,},{name: '纵轴七',type: 'line',data: [7,5,4,8,1,2],lineStyle: {color: "rgba(0, 0, 0, 1)"},yAxisIndex: 6,}]};myChart.setOption(option);window.onresize = myChart.resize;});
</script>
</head>
<body>
<div id="main" style="width: 100%;height: 340px; "></div>
</body>

遇到的一些问题：
怎么放置Y轴

折线图的颜色和右上方示例以及Y轴颜色的统一
1.折线颜色

2.Y轴颜色

3.右上角示例颜色

ps ：这个color属性不写的话有默认颜色
总结：做这个多个纵轴的折线图，一开始是从百度上找，找到了一个有多个Y轴的例子，例子上的注释很少，也不熟悉echarts 就不是很好改，只能一边百度，一边摸索，进展很慢。忍无可忍打开了echarts的官网，找的文档，里面有一个echarts图的页面，可以选择区域，进去找相关的详细属性，挺方便的
官网-术语速查手册

echarts制作多个纵轴的折线图相关推荐

ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
Echarts学习一：制作简单的柱形图、折线图、饼图
具体可以参考官网文档,已经写的很详细了:个性化图表样式 ECharts 提供了丰富的自定义配置选项,并且能够从全局.系列.数据三个层级去设置数据图形的样式.ECharts 中的饼图主要是通过扇形的弧度 ...
tableau做折线图_用Tableau制作10种漂亮的折线图
公众号:Tableau从入门到精通制作该10种折线图所用的数据均来自于以下: 数据源提取: 链接: https://pan.baidu.com/s/1qSV9xnN9JGyoy_SqXvcEEw 提 ...
Echarts通用饼图、柱状图、折线图封装
简单封装Echarts js不熟可能有问题,学习之后在完善数据类型实现代码具体调用数据类型我这里用了三种数据类型饼图 var pieData = [{'name' : 'aaa', 'v ...
echarts 横坐标显示一个月,excel折线图横坐标最后一个点选择数据选不上是什么原因？...
excel折线图横坐标最后一个点选择数据选不上是什么原因? 如果你说的是折线图横坐标选中的数据最后一个无法显示在横坐标上您可以尝试一下可以右击横坐标轴-设置坐标轴格式-选择大小与属性-对其方式-文 ...
excel分析图表制作，如何轻松创建折线图、柱状图、饼图
在Excel中通过数据间的关系选择合适的图表,轻松创建折线图.柱状图.饼图使其表达的主题和内容更加简单清晰. 下面我们通过Smartbi大数据分析工具介绍excel分析图表制作方法,如何制作常用的图 ...
echarts:饼、柱状、折线图的配置说明
文章目录前言柱状图和折线图主要配置项: 饼图的基本配置项 series 数据项有什么功能组件? 渐进式案例: vue中画一个基本的饼图为它添加提示组件tooltip dataZom,用柱状图演 ...
【Python+Flask+Echarts】可视化练习题 ---- 招聘数据折线图
文章目录需求代码实现需求使用折线图展示"大数据"相关职位招聘数量差异提取相关信息 ---- "大数据" 分组聚合代码实现 Python.Flask ...

echarts制作多个纵轴的折线图

echarts制作多个纵轴的折线图相关推荐

最新文章

热门文章