echarts 漸變色

image.png

image.png
const optionBarFarm = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
      type: 'shadow', // 默認(rèn)為直線悴务,可選為:'line' | 'shadow'
    },
  },
  grid: {
    left: '2%',
    right: '4%',
    bottom: '6%',
    top: '16%',
    containLabel: true,
  },
  legend: {
    data: ['水稻', '稻魚(yú)', '稻鴨'],
    right: 10,
    top: 12,
    textStyle: {
      color: '#fff',
      fontSize: fontSize(16),
    },
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
  },
  xAxis: {
    type: 'category',
    data: ['2020', '2021', '2022'],
    axisLine: {
      lineStyle: {
        color: 'white',
      },
    },
    axisLabel: {
      // interval: 0,
      // rotate: 40,
      fontFamily: 'Microsoft YaHei',
      fontSize: fontSize(16),
    },
  },

  yAxis: {
    type: 'value',
    //   max:'1200',
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.3)',
      },
    },
    axisLabel: {
      fontSize: fontSize(16),
    },
  },
  series: [
    {
      name: '水稻',
      type: 'bar',
      barWidth: '15%',
      stack: '水稻',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#4FACFE',
        }, {
          offset: 1,
          color: '#00F2FE',
        }]),
        borderRadius: [12, 12, 0, 0],
      },
      data: [1800, 3100, 4200],
    },
    {
      name: '稻魚(yú)',
      type: 'bar',
      barWidth: '15%',
      stack: '稻魚(yú)',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#C1FDC9',
        }, {
          offset: 1,
          color: '#57F5A1',
        }]),
        borderRadius: [12, 12, 0, 0],
      },
      data: [1900, 2000, 2600],
    },
    {
      name: '稻鴨',
      type: 'bar',
      barWidth: '15%',
      stack: '稻鴨',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#FFE8CE',
        }, {
          offset: 1,
          color: '#FBB8A0',
        }]),
        borderRadius: [12, 12, 0, 0],
      },
      data: [1200, 1900, 2500],
    },
    {
      name: '水稻',
      type: 'line',
      barWidth: '15%',
      stack: '水稻',
      itemStyle: {
        // normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#4FACFE',
        }, {
          offset: 1,
          color: '#00F2FE',
        }]),
        borderRadius: 12,
        // },
      },
      data: [1800, 3100, 4200],
    },
    {
      name: '稻魚(yú)',
      type: 'line',
      barWidth: '15%',
      stack: '稻魚(yú)',
      itemStyle: {
        // normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#C1FDC9',
        }, {
          offset: 1,
          color: '#57F5A1',
        }]),
        borderRadius: 11,
        // },

      },
      data: [1900, 2000, 2600],
    },
    {
      name: '稻鴨',
      type: 'line',
      barWidth: '15%',
      stack: '稻鴨',
      itemStyle: {
        // normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#FFE8CE',
        }, {
          offset: 1,
          color: '#FBB8A0',
        }]),
        borderRadius: 11,
        // },
      },
      data: [1200, 1900, 2500],
    },
  ],
};
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末静盅,一起剝皮案震驚了整個(gè)濱河市杯巨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌莹规,老刑警劉巖睬关,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異鸡号,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)须鼎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門鲸伴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人莉兰,你說(shuō)我怎么就攤上這事〗妇海” “怎么了糖荒?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)模捂。 經(jīng)常有香客問(wèn)我捶朵,道長(zhǎng),這世上最難降的妖魔是什么狂男? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上姻灶,老公的妹妹穿的比我還像新娘名船。我一直安慰自己,他們只是感情好泡垃,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布析珊。 她就那樣靜靜地躺著,像睡著了一般蔑穴。 火紅的嫁衣襯著肌膚如雪忠寻。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,708評(píng)論 1 305
  • 那天存和,我揣著相機(jī)與錄音奕剃,去河邊找鬼衷旅。 笑死,一個(gè)胖子當(dāng)著我的面吹牛纵朋,可吹牛的內(nèi)容都是我干的柿顶。 我是一名探鬼主播,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼倡蝙,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼九串!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起寺鸥,我...
    開(kāi)封第一講書(shū)人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤猪钮,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后胆建,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體烤低,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年笆载,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扑馁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凉驻,死狀恐怖腻要,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情涝登,我是刑警寧澤雄家,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站胀滚,受9級(jí)特大地震影響趟济,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜咽笼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一顷编、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧剑刑,春花似錦媳纬、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至其监,卻和暖如春萌腿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背抖苦。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工毁菱, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留米死,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓贮庞,卻偏偏與公主長(zhǎng)得像峦筒,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子窗慎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容