关于Echarts折线图双Y轴网格的一些配置

需要实现的效果

代码：

<template><div><div ref="chart" style="width: 100%; height: 310px"></div></div>
</template><script>
import * as echarts from 'echarts'
export default {name: 'DoubleBrokenLine',data() {return {}},mounted() {this.echartsInit()},methods: {echartsInit() {const chartDom = this.$refs.chartconst myChart = echarts.init(chartDom)const option = {title: {text: '我是一个标题啦啦啦',color: 'rgba(255,255,255,0.9)',left: 'center',top: '8%',textStyle: {color: '#fff',fontSize: '14px',textShadowOffsetY: '100%',fontWeight: '400',},},legend: {data: ['设备数', '功率'],textStyle: {color: '#fff',},bottom: '5%',left: 'center',},grid: {left: 'center',right: '0%',bottom: '15%',width: '100%',height: '60%',containLabel: true,},xAxis: {type: 'category',boundaryGap: false,splitLine: {show: true,lineStyle: {color: '#7E85AB',type: 'dashed',},},axisLine: {//是否显示以及样式设置show: true,// onZero: true,//表示 X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。lineStyle: {// width: '1',// color: '#ddd',color: '#7E85AB',type: 'dashed',},},axisTick: {show: false,},data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],},yAxis: [{type: 'value',name: '（个）',min: 0,nameTextStyle: {padding: [0, 0, 0, -32], // 上右下左与原位置距离},// interval: 50,//间隔axisLabel: {formatter: '{value}',},axisLine: {//y轴是否显示以及样式设置show: true,// onZero: true,//表示 X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。lineStyle: {color: '#7E85AB',width: '1',type: 'dashed',},},axisTick: {show: false,},splitLine: {//表中是否显示网格线show: true,lineStyle: {color: '#7E85AB',type: 'dashed',},},},{type: 'value',name: '（万kW）',min: 0,nameTextStyle: {padding: [0, 0, 0, 0], // 上右下左与原位置距离},// interval: 5, //间隔axisLabel: {formatter: '{value}',},axisLine: {show: true,lineStyle: {color: '#7E85AB',width: '1',type: 'dashed',},},axisTick: {show: false,},splitLine: {//表中是否显示网格线show: true,lineStyle: {color: '#7E85AB',type: 'dashed',},},},],series: [{name: '设备数',type: 'line',itemStyle: {normal: {color: '#0E9CFF',lineStyle: {color: '#0E9CFF',},},},symbol: 'none',smooth: 0.5, //折线的弧度 0-1// stack: 'Total',yAxisIndex: 0,data: [120, 132, 101, 134, 90, 230, 210, 80, 63, 123, 156, 200, 146, 166, 213, 200, 163, 185, 165, 200, 130, 230,156, 136,],},{name: '功率',type: 'line',itemStyle: {//item设置小圆点的颜色normal: {color: '#FFBC47',lineStyle: {//line设置线的颜色color: '#FFBC47',},},},symbol: 'none',smooth: 0.5,//折线的弧度 0-1// stack: 'Total',yAxisIndex: 1,data: [5, 15, 20, 24, 18, 20, 10, 6, 13, 14, 16, 18, 12, 14, 20, 26, 14, 25, 14, 12, 21, 24, 16, 21],},],}option && myChart.setOption(option)},},
}
</script>

关于Echarts折线图双Y轴网格的一些配置相关推荐

Echarts折线图双辅助线
文章目录前言一.折线图基本折线图折线图双辅助线前言一.折线图基本折线图 let option = {title: {text: 'ECharts 示例',},tooltip: {},le ...
echarts 折线图设置y轴最小刻度_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇相信未来的你不会很差作者:婷酱Yaaa 来源:https://juejin.im/post/5f0292d35188252e5a5dbed0 前言哈喽,everybody,我又 ...
echarts 折线图设置y轴最小刻度_Vue 项目如何使用Echarts ，手摸手带你入门
前言最近可视化浪潮越发凶猛但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo 首先得 ...
echarts折线图改变y轴刻度
目前项目有个要求,比如y轴数据大部分在几百,但是有个峰值达到了1W..这样导致经常出现的几百的数据变化不明显,这时候就需要对y轴数据进行处理,将不经常出现的数据范围进行缩小,比如1-500和500-5 ...
vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
echarts 折线图设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。
1.前景:在echarts中设置多个Y轴的时候,如果不想Y轴的折线有交叉,则需要考虑一下这个方案: 每一条Y轴分为一个区域,使得每一个Y轴都是一个独立的区域,举个例子:四条Y轴,那就是每条Y轴占四分一 ...
echarts 折线图设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统...
作者丨夙言来源丨前端大牛爱好者(Web-2017) https://segmentfault.com/a/1190000018993981 本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人 ...
echarts 折线图设置y轴最小刻度_用plotly和plt画图的基本设置（标题、坐标轴、图例、注释、图像）...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客非常好的文章,值得推荐. 一用matplotlib.py ...

关于Echarts折线图双Y轴网格的一些配置

关于Echarts折线图双Y轴网格的一些配置相关推荐

最新文章

热门文章