draw-echart

echart的容器插件

Usage no npm install needed!

<script type="module">
  import drawEchart from 'https://cdn.skypack.dev/draw-echart';
</script>

README

echarts使用时的简单封装

Document

Installation

npm
npm install draw-echart
yarn
yarn add draw-echart

Example

import React, { Component, Fragment} from "react";
import DrawChart from "draw-echart";  //引入组件

class App extends Component{
    constructor(props){
        super(props);
    }

    render() {
        const option = {
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        const event = {
            "click": (params)=>{
                console.log(params)
            }
        };
        return (
            <Fragment>
                <div id="container" className="container">
                    <DrawChart option={option} event={event} />
                </div>
            </Fragment>
        )
    }
}

export default App;

Description

接收参数
  1. option:图表配置项, (必传项)
  2. event:事件对象, (非必传)
改变
  1. 修改option 内容会自动刷新
  2. 图表大小由外部容器控制
  3. 容器改变图表默认调整