1.2.9 • Published 10 months ago

@jswork/react-echarts v1.2.9

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

react-echarts

Echarts for react.

version license size download

installation

npm install -S @jswork/react-echarts

usage

  1. import css

    @import "~@jswork/react-echarts/dist/style.css";
    
    // or use sass
    @import "~@jswork/react-echarts/dist/style.scss";
    
    // customize your styles:
    $react-echarts-options: ()
  2. import js

    import React, { useEffect, useState } from 'react';
    import ReactEcharts from '../../src/main';
    import styled from 'styled-components';
    
    const Container = styled.div`
      width: 80%;
      margin: 30px auto 0;
    `;
    
    export default () => {
      const [instance, setInstance] = useState<any>();
      const [opt, setOpt] = useState<any>({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    
      const opt2 = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [1, 10, 56, 12, 16, 10]
          }
        ]
      };
    
      useEffect(() => {
        window['ins'] = instance;
      }, [instance]);
    
      return (
        <Container>
          <ReactEcharts
            onReady={(e) => setInstance(e)}
            style={{ width: '100%', height: 500, border: '1px solid blue' }}
            option={opt}
          />
    
          <hr />
    
          <ReactEcharts
            onReady={(e) => setInstance(e)}
            style={{ width: '100%', height: 200, border: '1px solid red' }}
            option={opt}
          />
    
          <button
            onClick={() => {
              setOpt(opt2);
              instance.setOption(opt2);
            }}>
            SetNewOption
          </button>
        </Container>
      );
    };

preview

license

Code released under the MIT license.

1.2.8

10 months ago

1.2.7

10 months ago

1.2.6

10 months ago

1.2.5

10 months ago

1.2.9

10 months ago

1.2.4

11 months ago

1.1.5

12 months ago

1.2.3

11 months ago

1.1.4

12 months ago

1.2.2

11 months ago

1.2.1

11 months ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.0.9

2 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago