react中使用echarts图表的导入ReactECharts

使用ReactECharts绘制图表

下载组件：

npm i echarts-for-react

导入插件：

import ReactECharts from 'echarts-for-react';

使用插件：

配置数据项:

  const option = {
        // 标题
        title: {
            text: '某站点用户访问来源', //大标题
            subtext: '纯属虚构', //副标题
            x: 'center'// 标题位置["center","right","left"]
        },
        // 
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 数据分类
        legend: {
            orient: 'vertical', //分类方向,默认横着,vertical
            left: 'left',  //分类位置
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] //分类项(与数据中的name对应)
        },
        // 数据
        series: [
            {
                name: '访问来源',//图表名称
                type: 'pie', //饼状图
                radius: '50%',//图表大小
                center: ['50%', '60%'], //图表位置
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ]
            }
        ]
    };

导入组件：

            <ReactECharts
                option={option}   //数据项(必须加)
                style={{ width: 600, height: 400 }}   //图表大小
                onChartReady={onChartReady}  // 数据准备好之后触发事件
                //自定义事件
                onEvents={{
                    'click': onChartClick,  //点击事件
                    'legendselectchanged': onChartLegendselectchanged //修改数据分类事件
                }}
            />

绑定事件：

    function onChartReady(echarts) { //数据准备好之后触发事件（元素为整个数据）
        console.log('echarts is ready', echarts);
    }
    function onChartClick(param, echarts) {  //点击数据图某项触发事件
        console.log(param, echarts);
    };
    function onChartLegendselectchanged(param, echarts) {  //点击类别触发事件(减少某项分类)
        console.log(param, echarts);
    };