react中使用echarts

最新推荐文章于 2024-07-20 16:15:43 发布

codeXml

最新推荐文章于 2024-07-20 16:15:43 发布

阅读量401

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_39905409/article/details/104389742

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、安装
npm install --save echarts-for-react

2、引入

import React from 'react';
import ReactEcharts from 'echarts-for-react';

3、使用
在react中使用echarts很简单，只需要将option中的代码放到react的getOptions方法中就就OK了，配置参数可以参看官网，echarts.js官网，具体代码实现如下：

import React from 'react'
import ReactEcharts from 'echarts-for-react';

class LineCharts extends React.Component{
    render() {
        return (
            <div id='chartContainer'>
                <ReactEcharts
                    option={this.getOptions()}
                    className='react_for_echarts' />
            </div>
        );
    }

    getOptions () {
        var data = [["0",10],["1",16],["2",29],["3",35],["4",86],["5",73],["6",85],["7",73],["8",68],["9",92],["10",130],["11",145],["12",139],["13",115],["14",111],["15",9],["16",26],
            ["17",137],["18",128],["19",85],["20",94],["21",71],["22",0],["23",84],["24",93],["25",85],["26",73],["27",83],["28",125],["29",107],["30",82],["31",44],["32",72],
            ["33",106],["34",107],["35",66],["36",91],["37",92],["38",113],["39",107],["40",131],["41",111],["42",64],["43",69],["44",88],["45",77],["46",83],["47",111],["48",57],
            ["49",55],["50",60],["51",116],["52",129],["53",0],["54",86],["55",73],["56",85],["57",73],["58",68],["59",92],["60",130],["61",25],["62",139],["63",115],["64",111],["65",109],["66",106],
            ["67",137],["68",0],["69",85],["70",94],["71",71],["72",106],["73",84],["74",93],["75",85],["76",73],["77",83],["78",125],["79",107],["80",82],["81",44],["82",72],
            ["83",106],["84",107],["85",66],["86",91],["87",92],["88",113],["89",107],["90",131],["91",111],["92",64],["93",69],["94",88],["95",77],["96",83],["97",111],["98",57], ["99",55],["100",60],
            ["101",116],["102",129],["103",135],["104",86],["105",73],["106",85],["107",73],["108",68],["109",92],["110",130],["111",45],["112",139],["113",115],["114",111],["115",30],["116",106],
            ["117",137],["118",0],["119",85],["120",94],["121",71],["122",106],["123",84],["124",93],["125",85],["126",73],["127",83],["128",125],["129",107],["130",82],["131",44],["132",72],
            ["133",106],["134",107],["135",66],["136",91],["137",92],["138",113],["139",107],["140",131],["141",111],["142",64],["143",69],["144",88],["145",77],["146",83],["147",111],["148",57],
            ["149",55],["150",60]];

        var dateList = data.map(function (item) {
            return item[0];
        });
        var valueList = data.map(function (item) {
            return item[1];
        });
        const option = {

            // Make gradient line here
            visualMap: [{
                show: false,
                type: 'continuous', // 连续型。
                seriesIndex: 0,
                min: 0,
                max: 150 // visualMapContinuous 组件的允许的最大值
            }],

            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                data: dateList
            }],
            yAxis: [{
                splitLine: {show: false}
            }],
            grid: [{
                width: 'auto',
                left: '10%',
                bottom: '10%',
                top: '5%'
            }],
            series: [{
                type: 'line',
                showSymbol: false,
                data: valueList
            }]
        };
        return option;
    };
}

export default LineCharts;

效果如下：
在这里插入图片描述