折线图分区段填充颜色

[jingxiawl]

我想问echarts的折线图能实现分区段填充颜色么，现在看到的都是整体填充颜色，不能够分区段去显示颜色，类似下面这种情况

[mangoZT]

应该算是可以做的

[jingxiawl]

@mangoZT 你这个是怎么实现的，有具体代码么。你这个是根据x轴的区间段来区分颜色的么？我想做的是根据值来控制颜色，

[mangoZT]

areaStyle来设置，具体的可以看下API 至于颜色你可以判断值再传进来你要的颜色 不影响

[jingxiawl]

areaStyle是位于哪个下面的呢？而且你这个是按x轴标注来划分区间，我想表达的是根据曲线所处的段来展示不同的颜色 大概意思就是这个 http://echarts.baidu.com/demo.html#line-aqi
类似这个范例，我想做的是在这个图的基础下，不同颜色段的线条下面的对应区域填充不同的颜色

[mangoZT]

曲线图 不是面积图啊

[jingxiawl]

@mangoZT 恩。但是效果展示出来跟面积图相似，就是在刚才那个折线图的基础上，每个区间段的线条颜色是不同的，我想做的是在不同颜色线条下面的区域也填充上对应线条的颜色，

[mangoZT]

我不太清楚你的效果是撒 可否发个示意图 我晚点帮你看下

[jingxiawl]

我也想发图片可以github现在上传不了图片了。我也很懵逼。有什么方式可以吧图片发给你么

[jingxiawl]

@mangoZT

终于上传图片成功了，我自己画了个示意图，就是类似这个意思 ，分了3个区间段。0-50以下的的填充一个颜色，50-70的填充一个颜色，以上的区域为另一个颜色，不知道你理解了么

[mangoZT]

图呢，没看到啊 我明天帮你看

[jingxiawl]

@mangoZT 没看到吗？我这边都看到了。你要不要留个qq我加你

[mangoZT]

看到了 但是你这个图 我看不懂啊 尴尬

[mangoZT]

是这个效果么

[jingxiawl]

@mangoZT 不是这个。色段是竖着的，我处理了个图片你再看看

[mangoZT]

不就是这个图嘛

[mangoZT]

看二楼的图

[jingxiawl]

不是的，你看到分割虚线了么，色块是根据那个分割虚线来确定的，而不是根据x轴来确定的

[jingxiawl]

不知道我表达清楚没有

[mangoZT]

好像不太能达到你要的实现方法 但是实现结果是一样的 不需要分段

[jingxiawl]

有具体代码么？我要做的就是要根据数据来分段填充颜色，看了很久文档都没看到

[mangoZT]

自己设置图例和分割线 通过判断值传入不同的颜色值 目前我是这么实现的 直接API实现的我就不太清楚了

[jingxiawl]

不是很懂。可以吧实现结果一样的代码发我看看么？我参考参考

[mangoZT]

app.title = '坐标轴刻度与标签对齐';

option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], visualMap: { top: 10, right: 10, pieces: [{ gt: 0, lte: 50, color: '#096' }, { gt: 50, lte: 100, color: '#ffde33' }, { gt: 100, lte: 150, color: '#ff9933' }, { gt: 150, lte: 200, color: '#cc0033' }, { gt: 200, lte: 300, color: '#660099' }, { gt: 300, color: '#7e0023' }], outOfRange: { color: '#999' } }, series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220] } ] };

[mangoZT]

分割线自己加一下代码即可

[jingxiawl]

这个做出来是柱状图了。哎。看来这个效果不能实现了呢。哀伤

[mangoZT]

折线图不能通过visualMap实现好像 要变通一下 2楼那样 另外自己加分割线 加图例 把图例做成visualMap

[jingxiawl]

2 楼那种我看了哈基本属于在x轴上面分段，分割线和图例其实我不需要的，只是为了跟你说明效果添加的。对了2楼的代码可以分享一下么。我看看能不能再那个基础上改一下

[mangoZT]

木有保存 多列几个数据项即可 设置areaStyle

[jingxiawl]

哦。这样做的。那样也不好处理。之前我也做过这个样子。问题是我的那种效果会在刻度中间出现分段。基本上好像没找到方法

[mangoZT]

分段？我的图也分段了么

[jingxiawl]

不是。你那个始终是在x轴的刻度点进行的分段。但是，我那个需求并不一定是在刻度点分段。可能是刻度点中间分开

[mangoZT]

好吧 我尽力了 你再看看

[jingxiawl]

恩。好的。谢谢你了。帮我看了那么久

[zhangyile]

@jingxiawl 楼主这个问题是怎么解决的呀？我也遇到和你描述一样的需求了。。。

[kimmyXu]

应该算是可以做的

@mangoZT 你好，二楼的这种图表代码可以贴出来下吗

[liubobuzhidao]

不知道这个答案对于上面的提问还有没有意义，不过我还是想贴上链接https://gallery.echartsjs.com/editor.html?c=xH1As1PegW

[kimmyXu]

你发的这个柱状图的高度都一样的，跟我的效果不太一样，不过还是非常感谢

[Alice-hhu]

请问大佬们解决了嘛？要是解决了的话可以共享下代码瞅瞅嘛？ @jingxiawl @zhangyile

[acguokailin]

是这个效果么

请问下能共享一下你这个效果图的代码实现吗，非常感谢

[amelieykw]

我也遇到跟各位一样的需求，我找到一个链接，虽然不完全匹配竖着分段颜色的需求，但是可以供参考 https://www.makeapie.com/editor.html?c=x9BToI_0y

[amelieykw]

我也遇到跟各位一样的需求，我找到一个链接，虽然不完全匹配竖着分段颜色的需求，但是可以供参考 https://www.makeapie.com/editor.html?c=x9BToI_0y

还有 https://www.makeapie.com/editor.html?c=xB9i7zW6lu

[GTR-YY]

楼主有解决这个问题吗？我也遇到了这个问题，想请教一下

[GTR-YY]

楼主有解决这个问题吗？我也遇到了这个问题，想请教一下

这个需求

[xinagcai]

啊俺也一样解决了吗？？？、

[xinagcai]

老铁们我解决了 ` var option = {

    tooltip:{
        show:false,
    },
    grid:{
        rigth:0,
        top:'10',
        left:"20",
    },
    yAxis:

        {   show:true,
            splitNumber: 4,
            splitLine: {
                show: true
            },
            axisLine:{
                show:false
            },
            axisTick: {

                show:false //y轴坐标点消失

            },
            axisLabel: {
                formatter:function(){
                    return ""
                }
            },
        },
    xAxis: {
        axisLine:{
            show:false //y轴线消失
        },
        axisLabel: {
            formatter: function (value) {
                if(value==xdata[4] || value==xdata[0]){
                    return "";
                }else{
                    return value+'岁'
                }

            }
        },
        axisTick: {show:false},
        type: 'category',
        boundaryGap: false,
        data: xdata,
    },
    series:[

        {
            smooth: true,
            symbol: 'none',
            type: 'line',
            color:'rgba(24, 144, 255, 0.3)',
            areaStyle: {
                color:'rgba(24, 144, 255, 0.1)'
            },
            data:[0,1,'-','-','-']

        },
        {
            smooth: true,
            symbol: 'none',
            type: 'line',
            color:'rgba(24, 144, 255, 0.3)',
            areaStyle: {
                color:'rgba(24, 144, 255, 1)'
            },
            data:['-',1,3,'-','-']

        },
        {
            smooth: true,
            symbol: 'none',
            type: 'line',
            color:'rgba(24, 144, 255, 0.3)',
            areaStyle: {
                color:'rgba(24, 144, 255, 0.7)'
            },
            data:['-','-',3,3,'-']

        },
        {
            smooth: true,
            symbol: 'none',
            type: 'line',
            color:'rgba(24, 144, 255, 0.3)',
            areaStyle: {
                color:'rgba(24, 144, 255, 0.3)'
            },
            data:['-','-','-',3,0]

        },

    ]

};`

主要就是series

[Zhongxiangyun]

是这个效果么

你好,请问这个效果图的是怎么实现的呢?麻烦分享一下代码