react+echarts

获取返回值画echart

<ReactEcharts option={option} notMerge={true} lazyUpdate={true} />

<Button type="primary" onClick={doLine}>查询</Button>

ReactEcharts --->图表

Button--->按钮查询图表

option 值动态赋值。

const [option, setOption] = useState({})

const doCreatLine = async ()=> {
    lineOption(data)
}

const lineOption = (data: any) => {
  let option = {
      title: {
        text: 'Stacked Line',
        textStyle: {
          color: textColor
        },
        x: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads'],
        textStyle: {
          color: textColor
        },
        y: 'bottom'
      },
      grid: {
        left: '6%',
        right: '6%',
        bottom: '8%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.map((item: { req: any }, index: any) => {  //react 遍历写法和juqery不同
          return item.req
        }),
        axisLine: {
          lineStyle: {
            color: axisLineColor
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: axisLineColor
          }
        },
        splitLine: {
          lineStyle: {
            color: splitLineColor
          }
        }
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: data.map((item: { email: any }, index: any) => {
            return item.email
          })
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: data.map((item: { UnionAds: any }, index: any) => {
            return item.UnionAds
          })
        }
      ]
    }
 setOption(option)   // option赋值,调用
}