1、線性漸變

1.1、垂直方向的漸變

以柱形圖為例，如果設置柱子垂直方向漸變，只需要設置x=0,y=1即可，本案例從下往上顏色從藍色變為紅色，如果想要顏色從上往下漸變，改變offset的值即可，比如將下面的offset改為1、0.5、0，顏色就反過來了。

color: {type: 'linear',// x=0,y=1,柱子的顏色在垂直方向漸變x: 0,y: 1,colorStops: [// 0%處的顏色{offset: 0,color: '#12c2e9',},// 50%處的顏色{offset: 0.5,color: '#c471ed',},// 100%處的顏色{offset: 1,color: '#f64f59',},],global: false // 缺省為 false}

1.2、水平方向的漸變

如果設置柱子水平方向漸變，只需要設置x2=1,y2=0即可，顏色從左往右漸變，同理，想要顏色從右往左漸變，也是修改offset即可。

color: {type: 'linear',// x2=1,y=0,柱子的顏色在水平方向漸變x2: 1,y2: 0,colorStops: [// 0%處的顏色{offset: 0,color: '#12c2e9',},// 50%處的顏色{offset: 0.5,color: '#c471ed',},// 100%處的顏色{offset: 1,color: '#f64f59',},],global: false // 缺省為 false}

完整代碼如下：

<template><!-- 漸變色案例 --><div id="main" style="width: 100%;height: 600px;"></div> </template><script>export default {name: "hello",props: {dataSource: {}},components: {},data() {return {timerId: null,myChart: null,data:[120, 200, 150, 80, 70, 110, 130],option: {animation: false,xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{type: 'bar',color: {type: 'linear',// x2=1,y=0,柱子的顏色在水平方向漸變x2: 1,y2: 0,colorStops: [// 0%處的顏色{offset: 0,color: '#12c2e9',},// 50%處的顏色{offset: 0.5,color: '#c471ed',},// 100%處的顏色{offset: 1,color: '#f64f59',},],global: false // 缺省為 false}},]},}},created() {},destroyed() {this.myChart.dispose();},mounted() {this.initChart();},methods: {initChart() {// 設置柱形的值this.option.series[0].data = this.data;if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {this.myChart.dispose();}this.myChart = this.$echarts.init(document.getElementById('main'));this.myChart.setOption(this.option);},}} </script><style scoped></style>

2、徑向漸變

剛開始我想把餅圖的扇形設置為徑向漸變，但出來的效果跟線性漸變差別不大，總是沒辦法把漸變的起點設置到圓形的中心，所以我還是用pictorialBar來舉例，效果看上去更明顯。

徑向漸變需要確定起點（x,y）和半徑(r)。

{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#01c49a',},],global: false // 缺省為 false},

?完整代碼如下：

<template><!-- 徑向漸變色案例 --><div id="main" style="width: 100%;height: 600px;"></div> </template><script>export default {name: "hello",props: {dataSource: {}},components: {},data() {return {timerId: null,myChart: null,data: [120, 200, 150, 80, 70, 110, 130],option: {animation: false,xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: '',type: 'pictorialBar',symbolSize: [50, 50],symbolOffset: [-5, -20],itemStyle: {color: function(params) {var colorList = [{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#eb710f',},],global: false // 缺省為 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#01c49a',},],global: false // 缺省為 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#2eb0ee',},],global: false // 缺省為 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#fd359c',},],global: false // 缺省為 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#aa2cbd',},],global: false // 缺省為 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#ff5500',},],global: false // 缺省為 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#0000ff',},],global: false // 缺省為 false},];return colorList[params.dataIndex];},},symbolPosition: 'end',}]},}},created() {},destroyed() {this.myChart.dispose();},mounted() {this.initChart();},methods: {initChart() {// 設置柱形的值this.option.series[0].data = this.data;if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {this.myChart.dispose();}this.myChart = this.$echarts.init(document.getElementById('main'));this.myChart.setOption(this.option);},}} </script><style scoped></style>

總結

以上是生活随笔為你收集整理的echarts：在vue中使用渐变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。