typescript + echarts-for-react 制作漸變柱狀圖， 提示[ts] 類型“Graphic”上不存在屬性“LinearGradient”

 

更新： 2019/03 無意間發現Graphic上已有 LinearGradient屬性 🎉🎉🎉

 

效果如圖： 是不是比較炫～

遇到的問題：@types/echart 到目前只到 v4.1.1，類型“Graphic”上沒有 LinearGradient屬性

tslint提示：color: new echarts.graphic中沒有LinearGradient屬性

 

， ，，， 不支持那漸變還怎么顯示出來呢，無奈，只有搬出

“

// @ts-ignore

”

讓它跳過類型檢查啦，真的希望echarts團隊趕緊把這個屬性定義一下，總感覺這么暴力的方式不優雅哈哈～

// 1. 引入模塊

import ReactEcharts from 'echarts-for-react'

import * as echarts from 'echarts' 

// 2. 配置

  get option() {
 
    const dataAxis = ['10,20', '10.21', '10.22']
    const chartsCost = [100, 200, 300]
    return {
      dataZoom: [
        {
          type: 'inside',
        },
      ],
      grid: {},
      series: [
        {
          animation: false,
          barCategoryGap: '40%',
          barGap: '-100%',
          data: dataAxis,
          itemStyle: {
            normal: { color: '#000' },
          },
          type: 'bar',
        },
        {
          data: chartsCost,
          itemStyle: {
            emphasis: {
              barBorderRadius: 20,
              // @ts-ignore
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(215,59,255,1)' },
                { offset: 0.5, color: 'rgba(66,70,175,1)' },
              ]),
            },
            normal: {
              barBorderRadius: [3, 3, 0, 0],
              // @ts-ignore
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(215,59,255,1)' },
                { offset: 0.6, color: 'rgba(66,70,175,1)' },
              ]),
            },
          },
          type: 'bar',
        },
      ],
      xAxis: {
        axisLabel: {
          textStyle: {
            color: 'rgba(136,58,253,1)',
          },
        },

        axisLine: {
          show: true,
        },
        axisTick: {
          show: true,
        },
        data: dataAxis,
        name: '日期',
        nameTextStyle: {
          color: 'rgba(136,58,253,1)',
        },
        z: 10,
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: 'rgba(136,58,253,1)',
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        name: '投放額',
        nameTextStyle: {
          color: 'rgba(136,58,253,1)',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(136,58,253,.2)',
          },
          show: true,
        },
      },
    }
  }
        

   // 3. 調用echarts-for-react 
    
        <ReactEcharts
            option={this.option}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: '100%' }}
        />