漸變色
阿新 • • 發佈:2018-11-10
1、bar ------用itemStyle
2、line ------用areaStyle
option = { color: ['rgb(123,104,238)', 'rgb(0,205,102)', 'rgba(0,0,0,1)', 'yellow'], tooltip: { trigger: 'axis', formatter: function(params) { return params[0].name + ' : ' + (params[2].value - params[1].value > 0 ? '+' : '-') + params[0].value + '<br/>' + params[2].seriesName + ' : ' + params[2].value + '<br/>' + params[3].seriesName + ' : ' + params[3].value + '<br/>' } }, legend: { data: ['本週', '上週'], selectedMode: false }, xAxis: [{ type: 'category', data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'] }], yAxis: [{ type: 'value', min: 200, max: 450 }], series: [{ name: '本週', type: 'line', smooth: true, data: [400, 374, 251, 300, 420, 400, 440], areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, //開始位置,從上向下 color: 'rgb(123,104,238)' }, { offset: 1, color: 'rgba(123,104,238,.4)' } ] ) } }, }, { name: '上週', smooth: true, type: 'line', symbol: 'none', itemStyle: { normal: { lineStyle: { width: 1, type: 'dashed' } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, //開始位置,從上向下 color: 'rgb(0,205,102)' }, { offset: 1, color: 'rgba(0,205,102,.4)' } ] ) } }, data: [320, 332, 301, 334, 360, 330, 350] }, { name: '上週2', type: 'bar', stack: '1', barWidth: 16, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, //開始位置,從上向下 color: '#000' }, { offset: 1, color: 'rgba(0,0,0,.2)' } ] ) } }, data: [320, 332, 251, 300, 360, 330, 350] //堆積的底層部分取線性的最小值 }, { name: '變化', type: 'bar', stack: '1', data: [ 80, 42, {value : 50, itemStyle:{ normal:{color:'red'}}}, {value : 34, itemStyle:{ normal:{color:'red'}}}, 60, 70, 90 ] } ] };