1.2.9 • Published 12 months ago

@jswork/react-echarts v1.2.9

Weekly downloads
-
License
MIT
Repository
-
Last release
12 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

12 months ago

1.2.7

12 months ago

1.2.6

12 months ago

1.2.5

12 months ago

1.2.9

12 months ago

1.2.4

1 year ago

1.1.5

1 year ago

1.2.3

1 year ago

1.1.4

1 year ago

1.2.2

1 year ago

1.2.1

1 year 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