image.png

dataset

DatasetComponent https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1

  1. import { useEffect, useState } from 'react';
  2. import {array, number, string, oneOfType} from 'prop-types';
  3. import {
  4.   DatasetComponent,
  5.   TooltipComponent,
  6.   GridComponent,
  7.   LegendComponent
  8. } from 'echarts/components';
  9. import { BarChart } from 'echarts/charts';
  10. import { UniversalTransition } from 'echarts/features'
  12. import ECharts from '../../ECharts';
  13. import { getOption } from './rowBarChartOption'
  15. Chart.propTypes = {
  16.   data: array,
  17.   height: oneOfType([number, string]),
  18.   className: string,
  19. };
  20. Chart.defaultProps = {
  21.   height: 320,
  22. }
  24. function Chart({data, height, className}) {
  25.   const [options, setOptions] = useState({})
  27.   useEffect(update, [data])
  29.   function update() {
  30.     setOptions(getOption({data}))
  31.   }
  33.   const attrs = {
  34.     // renderType: 'svg',
  35.     className,
  36.     height,
  37.     options,
  38.     components: [
  39.       DatasetComponent,
  40.       TooltipComponent,
  41.       GridComponent,
  42.       LegendComponent,
  43.       BarChart,
  44.       UniversalTransition
  45.     ]
  46.   }
  48.   return (
  49.     <ECharts {...attrs} />
  50.   );
  51. }
  53. export default Chart;

rowBarChartOption

  1. const color = ['rgb(116,166,49)', 'rgb(190,245,99)', 'rgb(202,252,137)', 'rgb(251,253,142)']
  3. export function getOption({data, length, theme}) {
  5.   return {
  6.     color,
  7.     grid: {
  8.       top: length === 1 ? 24 : 40,
  9.       left: 24,
  10.       right: 24,
  11.       bottom: 24,
  12.       containLabel: true,
  13.     },
  14.     dataset: {
  15.       source: [
  16.         ['指标', '0-20', '20-30', '30-50', '50+'],
  17.         ['年龄分布', 300, 400, 500, 600]
  18.       ]
  19.     },
  20.     xAxis: {
  21.       type: 'value',
  22.       max: 1800,
  23.       axisLine: {
  24.         lineStyle: {
  25.           color: 'rgb(50,51,53)',
  26.           width: 3
  27.         }
  28.       },
  29.       axisTick: { show: false },
  30.       axisLabel: {
  31.         color: 'rgb(98,105,113)',
  32.         fontSize: 18
  33.       }
  34.     },
  35.     yAxis: {
  36.       type: 'category',
  37.       show: false,
  38.     },
  39.     series: [
  40.       {
  41.         type: 'bar',
  42.         stack: 'total',
  43.         barMaxWidth: 40
  44.       },
  45.       {
  46.         type: 'bar',
  47.         stack: 'total'
  48.       },
  49.       {
  50.         type: 'bar',
  51.         stack: 'total'
  52.       },
  53.       {
  54.         type: 'bar',
  55.         stack: 'total'
  56.       }
  57.     ],
  58.     tooltip: {
  59.       trigger: 'axis',
  60.       backgroundColor: 'rgba(50,50,50, .8)',
  61.       textStyle: {
  62.         fontSize: 24, color: '#ccc',
  63.       },
  64.       enterable: true,
  65.       axisPointer: {
  66.         type: 'shadow'
  67.       },
  68.       extraCssText: 'max-height: 300px; overflow: auto;',
  69.     },
  70.     legend: {
  71.       type: 'scroll',
  72.       show: length !== 1,
  73.       icon: 'circle',
  74.       top: 0,
  75.       right: 24,
  76.       itemWidth: 24,
  77.       textStyle: {
  78.         color: theme === 'dark' ? '#fff' : '#333',
  79.       },
  80.     },
  81.   };
  82. }