初识echarts（4）：折线图示例

今天药忘吃喽~ 2022-12-03 09:51 168阅读 0赞

#### 一、npm安装 echarts 、echarts-for-react： ####

npm install echarts --save
    npm install --save echarts-for-react

#### 二、引入模块（这里最好按需引入）： ####

//按需导入
    import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
    import 'echarts/lib/chart/bar';  //引入柱状图 折线图是line,饼图改为pie,柱形图改为bar
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/markPoint';
    import ReactEcharts from 'echarts-for-react';

#### 三、完整代码： ####

import React,{ Component}from 'react'
    //按需导入
    import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
    import 'echarts/lib/chart/pie';  //引入折线图 折线图是line,饼图改为pie,柱形图改为bar
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/markPoint';
    import ReactEcharts from 'echarts-for-react';
    import { Card} from "antd";
    
    export default class Line extends Component { 
    
        getOption = ()=>{ 
            let option = { 
                // title: { 
                // text: '折线图堆叠'
                // },
                tooltip: { 
                    trigger: 'axis',
                    axisPointer: { 
                        type: 'cross',
                        label: { 
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: { 
                    data: ['邮件营销', '联盟广告', '视频广告']
                },
    
                grid: { 
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: { 
                    show: true,
                    x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
                                                // 'center' 'left' 'right'
                                                // {number}（x坐标，单位px）
                    y: '30',                    // 垂直安放位置，默认为全图顶端，可选为：
                                                // 'top' 'bottom' 'center'
                                                // {number}（y坐标，单位px）
                    feature: { 
                        dataZoom: { 
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false},
                        magicType: { type: ['line', 'bar']},
                        restore: { },
                        saveAsImage: { }
                    },
                    // iconStyle:{ 
                    // normal:{ 
                    // color:'blue',//设置颜色
                    // }
                    // }
                },
                xAxis: { 
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: { 
                    type: 'value'
                },
                series: [
                    { 
                        name: '邮件营销',
                        type: 'line',
                        stack: '总量',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    { 
                        name: '联盟广告',
                        type: 'line',
                        stack: '总量',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    { 
                        name: '视频广告',
                        type: 'line',
                        stack: '总量',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            };
            return option;
        };
        render() { 
            return (
                <Card title="我是标题">
                    <ReactEcharts option={ this.getOption()}/>
                </Card>
            )
        }
    }

#### 运行结果： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2be5c19b17bb4ee1a48726e6ce5bb520.png