typescript+echarts-for-react制作渐变柱状图，提示[ts]类型“Graphic”上不存在属性 ...

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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