1.下载插件:
npm install echarts
npm install echarts-for-react
2.引入模块:
import ReactEcharts from "echarts-for-react"
import echarts from "echarts";
3.index.js文件：
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 (
);
}
export default One;
4.实现效果：
