echar图形使用双Y轴（散点+折线）

option = {backgroundColor: 'pink',title: {text: '全国6月销售统计',textStyle: {fontSize: 12,fontWeight: 400,color:'#000'},top: '5%',left:'10%',},legend: {icon: 'circle',top: '13%',right: '5%',itemWidth: 6,itemGap: 20,textStyle: {color: '#fff',},show:true,width:'auto'},grid: {top: '40%',left: '8%',right: '8%',bottom: '15%',},xAxis: [{type: 'category',axisLine: {show: true,color: '#DCE2E8',//==========设置X轴的颜色lineStyle:{color:"#89898B"}},axisLabel: {color: '#fff',interval:0 },splitLine: {show: true, //显示竖着的线lineStyle: {// 使用深浅的间隔色color: ['#525256']}},boundaryGap: false,data:  ['2017年6月', 'B', 'C', 'D', 'E', 'F'],},],
双Y轴所以这里需要两个对象yAxis: [{type: 'value',min: 0,max:10,splitLine: {show: false,lineStyle: {color: '#000',},},axisLine: {show: false,},axisLabel: {show: false,margin: 20,textStyle: {color: '#d1e6eb',},},axisTick: {show: false,},},{type: 'value',min: 0,max:20,splitLine: {show: false,lineStyle: {color: '#000',},},axisLine: {show: false,},axisLabel: {show: false,margin: 20,textStyle: {color: 'red',},},axisTick: {show: false,},},],series: [//散点{name:111,type: 'scatter',showAllSymbol: true,symbol: 'circle',symbolSize: 10,
//=========这里添加Y轴索引===========yAxisIndex: 0,lineStyle: {normal: {color: '#fff',shadowColor: '#fff',},},label: {show: true, //显示对应点上的值position: 'top',textStyle: {color: '#fff',},},itemStyle: {color: '#FF6551',shadowColor: '#fff',shadowBlur: 0,},tooltip: {show: false,},data: [5,7,8,10,2],},// 折线天数{name: 2222,type: 'line',showAllSymbol: true,symbol: 'circle',//==========第二个Y轴添加Y轴索引=========yAxisIndex: 1,symbolSize: 10,top:'20%',lineStyle: {normal: {color: '#0ACFE2',},},label: {show: true,position: 'top',textStyle: {color: '#fff',},},itemStyle: {color: '#57575D', //折现对应的圈圈颜色borderColor: '#04DFF3',borderWidth: 3,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,},tooltip: {show: false,},data:[1,2,3,4,5],},],
};

效果图

可以在makeapie中测试
https://www.makeapie.com/editor.html
替换option即可

如果需要默认只显示一条数据：
可设置属性，这里type[0],type[1]是我对应的两个动态标题

 var selected_item = {[type[0]]:true,[type[1]]:false,};

将legend中的selected设置成

      selected : selected_item

如果是写死的标题，可直接设置属性

selected : {'111':true,'2222':false}

更改X轴底部坐标轴的颜色
xAxis中axisLine属性

 lineStyle:{color:"#89898B"}

散点与折线

  type: 'scatter', 散点type: 'line', 折线

更多属性设置可转至
echar配置项手册

echar图形使用双Y轴（散点+折线）相关推荐

【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...
echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示下载资源: 46 次 ...
Matlab实用程序--图形应用-双y轴图形的绘制
function shili04h0=figure('toolbar','none',... 'position',[200 150 450 250],... 'name','实例04');x=0:9 ...
python绘图时如何添加图例_【Python】matplotlib 双y轴绘制及合并图例
1.双y轴绘制关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...
可视化篇（四）——— python绘制双y轴、箱线图、概率分布三种图形及案例
可视化篇(四)--- python绘制双y轴.箱线图.概率分布三种图形及案例摘要绘制双y轴图形绘制箱线图绘制概率分布图摘要本文演示了如何通过python绘制双y轴.箱线图.概率分布三种图形 ...
matlab画置信区间图,matlab绘制带置信区间的双y轴图形 | 学步园
matlab的双y轴网上有很多方法,但是带置信区间的双y轴就很少了,并且由于网上给的例子一般都是使用红蓝两色,对于只想使用黑色或者灰色的俺们来说太鲜艳啦~ 上图为使用matlab绘制的双y轴带置信区间 ...
Origin双Y轴图形画法，添加图例，合并图例
Origin双Y轴图形画法,添加图例,合并图例 1. 双Y轴图形画法前面正常操作,选择部分列(包含X轴)-Plot 进入图像-Graph-Layer management(图层管理)-选择图示Rig ...
Excel 2007 制作双Y轴图形
老是忘记excel的双Y轴图如何制作,今天特地将其记录下来,用以备忘. 1.基础数据如下: 月份 A B B/A 一月 1003882353 773056409 77.01% 二月 798266517 ...
matlab 创建双y轴坐标图形
能够实现双y轴的matlab函数:plotyy,yyaxis,以及axes属性. 其中yyplot在matlab2016a版本以后不推荐使用.最简洁的方式就是使用yyaxis. yaxis 语法: y ...
python双坐标轴箱线图,python绘制双y轴、箱线图、概率分布三种图形及案例
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 本文演示了如何通过python绘制双y轴.箱线图.概率分布三种图形,并给出了具体案例源代码供 ...

echar图形使用双Y轴（散点+折线）

echar图形使用双Y轴（散点+折线）相关推荐

最新文章

热门文章