1.2.9 • Published 12 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
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