typescript + echarts-for-react 制作渐变柱状图， 提示[ts] 类型“

 

更新： 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%'  }}
         />

 

查看更多关于typescript + echarts-for-react 制作渐变柱状图， 提示[ts] 类型“的详细内容...