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

发布时间：2020-12-15 20:21:33 所属栏目：百科来源：网络整理

导读：? 效果如图：是不是比较炫～遇到的问题：@types/echart 到目前位置只到 v4.1.1，? color: new echarts.graphic中没有LinearGradient属性，很蛋疼啊，，，，不支持那渐变还怎么显示出来呢，无奈，只有搬出“ // @ts-ignore ”让它跳过类型检查啦，真的希

效果如图：是不是比较炫～

遇到的问题：@types/echart 到目前位置只到 v4.1.1，?

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,1,[
                { offset: 0,color: ‘rgba(215,59,255,1)‘ },{ offset: 0.5,color: ‘rgba(66,70,175,]),normal: {
              barBorderRadius: [3,3,0],{ offset: 0.6,xAxis: {
        axisLabel: {
          textStyle: {
            color: ‘rgba(136,58,253,1)‘,axisLine: {
          show: true,axisTick: {
          show: true,name: ‘日期‘,nameTextStyle: {
          color: ‘rgba(136,z: 10,yAxis: {
        axisLabel: {
          textStyle: {
            color: ‘rgba(136,axisLine: {
          show: false,axisTick: {
          show: false,name: ‘投放额‘,splitLine: {
          lineStyle: {
            color: ‘rgba(136,.2)‘,show: true,}
  }

   // 3. 调用echarts-for-react 

        <ReactEcharts
            option={this.option}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: ‘100%‘ }}
        />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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