Property 'LinearGradient' does not exist on type 'Graphic'.

[codebanesr]

``import { Component, OnInit } from '@angular/core'; import { graphic } from 'echarts';

@Component({ selector: 'app-charts', templateUrl: './charts.component.html', styleUrls: ['./charts.component.css'] }) export class ChartsComponent implements OnInit {

options: any; detectEventChanges = true;

constructor() { }

ngOnInit() { const dataAxis = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T']; const data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; const yMax = 500; const dataShadow = [];

for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}

this.options = {
  title: {
    text: 'Check Console for Events'
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      inside: true,
      textStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#999'
      }
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
    { // For shadow
      type: 'bar',
      itemStyle: {
        normal: { color: 'rgba(0,0,0,0.05)' }
      },
      barGap: '-100%',
      barCategoryGap: '40%',
      data: dataShadow,
      animation: false
    },
    {
      type: 'bar',
      itemStyle: {
        normal: {
          color: new graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ]
          )
        },
        emphasis: {
          color: new graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ]
          )
        }
      },
      data: data
    }
  ]
}

} }

package.json "dependencies": { "@angular/animations": "^6.1.0", "@angular/common": "^6.1.0", "@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular/http": "^6.1.0", "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", "@nebular/auth": "^2.0.0-rc.10", "@nebular/security": "^2.0.0-rc.10", "@nebular/theme": "^2.0.0-rc.10", "@ng-bootstrap/ng-bootstrap": "^3.1.0", "bootstrap": "^4.1.3", "core-js": "^2.5.4", "echarts": "^4.1.0", "lodash": "^4.17.10", "moment": "^2.22.2", "ngx-echarts": "^4.0.0", "rxjs": "^6.0.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.7.0", "@angular/cli": "~6.1.3", "@angular/compiler-cli": "^6.1.0", "@angular/language-service": "^6.1.0", "@types/echarts": "^4.1.1", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "autoprefixer": "^9.1.3", "codelyzer": "~4.2.1", "gulp": "^3.9.1", "gulp-clean-css": "^3.10.0", "gulp-concat": "^2.6.1", "gulp-jshint": "^2.1.0", "gulp-postcss": "^8.0.0", "gulp-rename": "^1.4.0", "gulp-rtlcss": "^1.2.0", "gulp-sass": "^4.0.1", "gulp-uglify": "^3.0.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2" } }

[xieziyu]

@shanurrahman I think it should be an issue of @types/echarts

[codebanesr]

can you tell me a version of echarts ngx-echarts and @types/echarts that works well

[xieziyu]

Sorry, I think you may need write your own type declaration file. I've checked the code, and found that even in the latest version of @types/echarts, LinearGradient is missing.

[codebanesr]

Thanks brother, This is what i did and it worked

        color: new (<any>echarts).graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(20,200,212,0.5)' },
            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
            { offset: 1, color: 'rgba(20,200,212,0)' }
          ]
      I am just new to this thing, sorry for troubling you!!! 

[faramger]

!this worked for me¡ import { graphic } from 'echarts';

itemStyle: {
                normal: {
                    color: new graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    color: new graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
`