1.2.9 • Published 10 months ago
@jswork/react-echarts v1.2.9
react-echarts
Echarts for react.
installation
npm install -S @jswork/react-echarts
usage
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: ()
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