Closed jingxiawl closed 7 years ago
应该算是可以做的
@mangoZT 你这个是怎么实现的,有具体代码么。你这个是根据x轴的区间段来区分颜色的么?我想做的是根据值来控制颜色,
areaStyle来设置,具体的可以看下API 至于颜色你可以判断值再传进来你要的颜色 不影响
areaStyle是位于哪个下面的呢?而且你这个是按x轴标注来划分区间,我想表达的是根据曲线所处的段来展示不同的颜色
大概意思就是这个
http://echarts.baidu.com/demo.html#line-aqi
类似这个范例,我想做的是在这个图的基础下,不同颜色段的线条下面的对应区域填充不同的颜色
曲线图 不是面积图啊
@mangoZT 恩。但是效果展示出来跟面积图相似,就是在刚才那个折线图的基础上,每个区间段的线条颜色是不同的,我想做的是在不同颜色线条下面的区域也填充上对应线条的颜色,
我不太清楚你的效果是撒 可否发个示意图 我晚点帮你看下
我也想发图片可以github现在上传不了图片了。我也很懵逼。有什么方式可以吧图片发给你么
@mangoZT
终于上传图片成功了,我自己画了个示意图,就是类似这个意思 ,分了3个区间段。0-50以下的的填充一个颜色,50-70的填充一个颜色,以上的区域为另一个颜色,不知道你理解了么
图呢,没看到啊 我明天帮你看
@mangoZT 没看到吗?我这边都看到了。你要不要留个qq我加你
看到了 但是你这个图 我看不懂啊 尴尬
是这个效果么
@mangoZT 不是这个。色段是竖着的,我处理了个图片你再看看
不就是这个图嘛
看二楼的图
不是的,你看到分割虚线了么,色块是根据那个分割虚线来确定的,而不是根据x轴来确定的
不知道我表达清楚没有
好像不太能达到你要的实现方法 但是实现结果是一样的 不需要分段
有具体代码么?我要做的就是要根据数据来分段填充颜色,看了很久文档都没看到
自己设置图例和分割线 通过判断值传入不同的颜色值 目前我是这么实现的 直接API实现的我就不太清楚了
不是很懂。可以吧实现结果一样的代码发我看看么?我参考参考
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] } ] };
分割线自己加一下代码即可
这个做出来是柱状图了。哎。看来这个效果不能实现了呢。哀伤
折线图不能通过visualMap实现好像 要变通一下 2楼那样 另外自己加分割线 加图例 把图例做成visualMap
2 楼那种我看了哈基本属于在x轴上面分段,分割线和图例其实我不需要的,只是为了跟你说明效果添加的。对了2楼的代码可以分享一下么。我看看能不能再那个基础上改一下
木有保存 多列几个数据项即可 设置areaStyle
哦。这样做的。那样也不好处理。之前我也做过这个样子。问题是我的那种效果会在刻度中间出现分段。基本上好像没找到方法
分段?我的图也分段了么
不是。你那个始终是在x轴的刻度点进行的分段。但是,我那个需求并不一定是在刻度点分段。可能是刻度点中间分开
好吧 我尽力了 你再看看
恩。好的。谢谢你了。帮我看了那么久
@jingxiawl 楼主这个问题是怎么解决的呀?我也遇到和你描述一样的需求了。。。
应该算是可以做的
@mangoZT 你好,二楼的这种图表代码可以贴出来下吗
不知道这个答案对于上面的提问还有没有意义,不过我还是想贴上链接https://gallery.echartsjs.com/editor.html?c=xH1As1PegW
你发的这个柱状图的高度都一样的,跟我的效果不太一样,不过还是非常感谢
请问大佬们解决了嘛?要是解决了的话可以共享下代码瞅瞅嘛? @jingxiawl @zhangyile
是这个效果么
请问下能共享一下你这个效果图的代码实现吗,非常感谢
我也遇到跟各位一样的需求,我找到一个链接,虽然不完全匹配竖着分段颜色的需求,但是可以供参考 https://www.makeapie.com/editor.html?c=x9BToI_0y
我也遇到跟各位一样的需求,我找到一个链接,虽然不完全匹配竖着分段颜色的需求,但是可以供参考 https://www.makeapie.com/editor.html?c=x9BToI_0y
楼主有解决这个问题吗?我也遇到了这个问题,想请教一下
楼主有解决这个问题吗?我也遇到了这个问题,想请教一下
这个需求
啊俺也一样解决了吗???、
老铁们我解决了 ` 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
是这个效果么
你好,请问这个效果图的是怎么实现的呢?麻烦分享一下代码
我想问echarts的折线图能实现分区段填充颜色么,现在看到的都是整体填充颜色,不能够分区段去显示颜色,类似下面这种情况![qq 20170420122833](https://cloud.githubusercontent.com/assets/11657532/25214029/76249770-25c7-11e7-9d92-38554ca08c0f.png)