echarts-2.2.7柱狀顏色漸變
阿新 • • 發佈:2019-01-25
var myChar11 = ec.init(document.getElementById('box-11'));
myChar11.setOption(
{
title : {
text: '某樓盤銷售情況',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['意向','預購','成交']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['週一','週二','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'成交',
type:'line',
smooth:true,
itemStyle: {
normal: {
borderRadius: 200,
// 新增漸變顏色
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0,1000, 0,
[[0, 'blue'],[1, 'yellow']]
)
})(),
areaStyle: {type: 'default'}}
},
data:[100, 200, 300, 400, 500, 830, 710]
},
]
}
myChar11.setOption(
{
title : {
text: '某樓盤銷售情況',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['意向','預購','成交']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['週一','週二','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'成交',
type:'line',
smooth:true,
itemStyle: {
normal: {
borderRadius: 200,
// 新增漸變顏色
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0,1000, 0,
[[0, 'blue'],[1, 'yellow']]
)
})(),
areaStyle: {type: 'default'}}
},
data:[100, 200, 300, 400, 500, 830, 710]
},
]
}
);