使用echarts-for-react数据图表

针对于react数据图表

首先项目下载依赖

npm install echarts-for-react

组件引入

import ReeactEcharts from 'echarts-for-react'

组件中使用：

 const [option, setOption] = useState({})
  useEffect(() => {
    const seriesData = [3, 23, 33, 55, 46, 17]
    /** 最大值处理 */
    const maxValue = (value: any) => {
      /** 
          这里的 ceil 是 lodash.js中的方法 可以自己下载 
          网址：https://www.lodashjs.com/docs/lodash.ceil
       */
      return ceil(Math.ceil(Math.max(...value) * 1.1), -1)
    }
    /** 最小值处理 */
    const minValue = (value: any) => {
      /** 
          这里的 floor 是 lodash.js中的方法 可以自己下载 
          网址：https://www.lodashjs.com/docs/lodash.floor
       */
      let result = 0
      result = floor(Math.floor(Math.min(...value) * 0.9), -1)
      return result
    }

    const options = {
      title: {
        show: true /** 标题显示 */,
        text: '业务统计报表' + '\n' /** 主标题 */,
        subtext: '数据新增+1' /** 副标题 */,
        padding: [0, 0, 20, 0],
        x: 'center',
        textAlign: 'center'
      },
      xAxis: {
        type: 'category',
        data: [1, 2, 3, 4, 5, 6],
        axisLine: { lineStyle: { color: '#a9a9a9' } } /** 坐标轴线*/,
        splitLine: { show: false } /** 网格线 */
      },
      yAxis: {
        type: 'value',
        axisLine: { show: true, lineStyle: { color: '#a9a9a9' } } /** 坐标轴线*/,
        splitLine: { show: false } /** 网格线 */,
        max: maxValue(seriesData),
        min: minValue(seriesData),
        splitNumber: 1
      },
      series: {
        data: seriesData,
        type: 'line',
        lineStyle: { width: 1 },
        itemStyle: {
          /** 数据点样式 */
          borderWidth: 1 /** 数据点大小 */,
          opacity: 0.5 /** 数据点透明度 0为不显示 */
        },
        color: '#0f9fff'
      },
      Tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', right: 'right' }
    }
    setOption(options)
  })

页面显示

<ReeactEcharts option={option} />

最终效果：