react中使用echarts

筱闯~

已于 2023-07-26 14:22:22 修改

阅读量185

点赞数

文章标签： react.js echarts javascript

于 2023-07-20 11:30:24 首次发布

本文链接：https://blog.csdn.net/m0_64544033/article/details/131826579

版权

下载插件

npm install echarts 
npm install echarts-for-react

引入模块

import ReactEcharts from "echarts-for-react"
import echarts from "echarts";

import React from 'react';
import ReactEcharts from "echarts-for-react"
const One = () => {
    const getOption = () => {
        let option = {
              legend: {//头部
                data: ['Java', 'C', 'C++', 'Python', 'Visual Basic .NET','C#','JavaScript','PHP','SQL','Objective-C']
              },
              xAxis: {//x轴
                nameLocation: 'start',
                inverse: true,
                data: ['2019', '2014', '2009', '2004', '1999', '1994', '1989']
              },
              yAxis: {//Y轴
                name: '排名',
                nameLocation: 'start',
                min: 1,
                inverse: true
              },
              series: [
                {"name": "Java", data: [1, 2, 1, 1, 12, '-', 0],type:'line'},
                {"name": "C", data: [2, 1, 2, 2, 1, 1, 1],type:'line'},
                {"name": "C++", data: [3, 4, 3, 3, 2, 2, 3],type:'line'},
                {"name": "Python", data: [4, 7, 5, 9, 27, 21, 0],type:'line'},
                {"name": "Visual Basic .NET", data: [5, 10, '-', '-', '-', '-', 0],type:'line'},
                {"name": "C#", data: [6, 5, 6, 7, 23, '-', 0],type:'line'},
                {"name": "JavaScript", data: [7, 8, 8, 8, 17, '-', 0],type:'line'},
                {"name": "PHP", data: [8, 6, 4, 5, '-', '-', 0],type:'line'},
                {"name": "SQL", data: [9, '-', '-', 6, '-', '-', 0],type:'line'},
                {"name": "Objective-C", data: [10, 3, 36, 44, '-', '-', 0],type:'line'},
                // {"name": "COBOL", data: [25, 20, 16, 11, 3, 9, 12]},
                // {"name": "Lisp", data: [29, 13, 19, 14, 14, 5, 2]},
                // {"name": "Pascal", data: [207, 14, 14, 96, 6, 3, 17]}
            ]
        };
        return option
    }
    return (
        <div>
            <ReactEcharts option={getOption()} />
        </div>
    );
}

export default One;

实现效果