echarts 隐藏Y轴最大最小值label及分割线 ----障眼大发好使

需求图

1====>label 最大最小值还好弄,

yAxis{  axisLabel{

      showMinLabel: false,
          showMaxLabel: false,
  }}

2====>Y轴分割线处理  这里用了障眼法:将最大最小值分割线颜色设置与背景色一致就可以了
color: [‘#F3F3F3‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#F3F3F3‘ ]

note :如果color两个值 就可以实现间隔显示
yAxis: {
        type : ‘value‘,
        min:1,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            showMinLabel: false,
          showMaxLabel: false,
            textStyle: {
                color: ‘#999‘
            },
            formatter:‘{value}‘
        },
        splitLine:{
            show:true,
            lineStyle:{
                type:‘solid‘,
                color: [‘#F3F3F3‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#ddd‘,‘#F3F3F3‘ ]
            }
        }
    },

原文地址:https://www.cnblogs.com/xiaomaotao/p/10538648.html

时间: 2024-11-10 20:32:27

echarts 隐藏Y轴最大最小值label及分割线 ----障眼大发好使的相关文章

百度echarts使用--y轴label数字太长难以全部显示

问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就很大,所以导致显示不下,那么只要我们将显示的值按比例缩小,应该就可以了. 原始值很大: var map = data.map; for (var key in map){ var stockCode = key; option.legend.data.push(stockCode); var ind

Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚的,主要是设置这段代码,max(设置y轴最大值)和splitNumber 总结一下公式就是, max/ splitNumber=y轴值间隔 (比如将y轴200平均成5个点,每个点的间距就是40) yAxis : [ { // 纵轴标尺固定 type : 'value', scale : true,

echarts自定义y轴刻度信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.common.min.js"></script> </head> <body> <!-- 为

Hightcharts设置Y轴最大最小值

有两种方法: 1:是在控件初始化时预设, yAxis: [{ max:100}] 2:在程序运行中动态更新设置 thChart.yAxis[0].update({ min: 0, max: 500 });

第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数,超出显示&quot;...&quot;

起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个"有点追求的"前端,我得想招试试总结下来,唯一的突破点就是echarts的配置了. echarts配置项网址:http://echarts.baidu.com/option.html 最后果然被我找到了 一.先说x||y轴的文案处理: 如图,x轴的配置也就都在这里了 而关于x轴文案的设置,就是这个axisLabel属性了 而跟内容有关的也就是这个forma

echarts x轴或y轴文本字体颜色改变

1:x轴文本字体颜色改变 xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-','>=70'], axisLabel: { show: true, textStyle: { color: '#fff' } } } ] 2:y轴文本字体颜色改变 yAxis : [ { type : 'value', name : '%', axisLabel : { formatter: '{value}', textStyle

Echarts 多条数据值一样时,y轴数值错位?

今天开发遇到了一个bug,如上图: 两条曲线值一样,但是y轴显示确不一样??   然后一顿debugger操作,发现不是数据问题...最后找到了答案 stack: '总量', 把这个属性删除 效果如 下   原文地址:https://www.cnblogs.com/javascript9527/p/12681307.html

EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等

示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echarts.baidu.com/option.html#xAxis 坐标相关: Y轴:http://echarts.baidu.com/option.html#yAxis 表格部分:http://echarts.baidu.com/option.html#grid <script> function

echart折线堆叠图 Y轴数据不堆叠

<!DOCTYPE html> <html> <head></head> <body>     <div class="row form-inline form-ranking">     <div class="form-group">         <label class="control-label">店铺:</label>