ttk-app-core/src/apps/app-demo/chart/bar-chart/app.js

@ttk/recat enterprise develop framework

import React, { useState, useEffect, useCallback } from 'react'
// import { Input, Button } from 'antd'
import { AppLoader, useAppData, useData } from '@ttk/app-loader'
import ReactEcharts from 'echarts-for-react'
import "./style.less"

export default React.memo(Page)
function Page(props) {
  // option属性文档：https://echarts.apache.org/zh/option.html#series-bar.data
  const [option] = useState({
    title: {
      text: "周数据"
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['邮件营销', '联盟广告', '视频广告']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '邮件营销',
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.8)'
      }
    }]
  })

  const [option2] = useState({
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      { type: 'bar' },
      { type: 'bar' },
      { type: 'bar' }
    ]
  })

  const [option3] = useState({
    title: {
      text: '世界人口总量',
      subtext: '数据来自网络'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['2011年', '2012年']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
      {
        name: '2011年',
        type: 'bar',
        data: [18203, 23489, 29034, 104970, 131744, 630230]
      },
      {
        name: '2012年',
        type: 'bar',
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }
    ]
  })

  const [option4] = useState({
    title: {
      text: '深圳月最低生活费组成（单位:元）',
      subtext: '点我链接到http://120.133.134.22:8002/',
      sublink: 'http://120.133.134.22:8002/'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (params) {
        var tar = params[1];
        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      splitLine: { show: false },
      data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '辅助',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          itemStyle: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
          }
        },
        data: [0, 1700, 1400, 1200, 300, 0]
      },
      {
        name: '生活费',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'inside'
        },
        data: [2900, 1200, 300, 200, 900, 300]
      }
    ]
  })

  return (
    <div className="bar-chart">
      <div className="row">
        <div className="item">
          <ReactEcharts
            option={option}
            notMerge={true}
            lazyUpdate={true}
          />
        </div><div className="item">
          <ReactEcharts
            option={option2}
            notMerge={true}
            lazyUpdate={true}
          />
        </div>
      </div>
      <div className="row">
        <div className="item">
          <ReactEcharts
            option={option3}
            notMerge={true}
            lazyUpdate={true}
          />
        </div>
        <div className="item">
          <ReactEcharts
            option={option4}
            notMerge={true}
            lazyUpdate={true}
          />
        </div>
      </div>
    </div>
  )
}