地址:https://echarts.apache.org/examples/zh/index.html#chart-type-radar
1.下载依赖包
npm add echarts -S
2.引入
import echarts from ‘echarts’
export default class App extends Component {
render() {
return (
<div>
<div id="main" style={
{
width: 600, height: 400 }}></div>
</div >
)
}
componentDidMount() {
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
// title: {
// text: 'ECharts 入门示例'
// },
// tooltip: {},
// xAxis: {
// data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
// },
// yAxis: {},
// series: [{
// name: '销量',
// type: 'bar',
// data: [5, 20, 36, 10, 10, 20]
// }]
angleAxis: {
type: 'category',
data: ['js', 'html5', 'vue', 'react', '小程序', 'Bootstrap', 'nodejs']
},
radiusAxis: {
},
polar: {
},
series: [{
type: 'bar',
data: [1, 2, 3, 4, 3, 5, 1],
coordinateSystem: 'polar',
name: 'A',
stack: 'a'
}, {
type: 'bar',
data: [2, 4, 6, 1, 3, 2, 1],
coordinateSystem: 'polar',
name: 'B',
stack: 'a'
}, {
type: 'bar',
data: [1, 2, 3, 4, 1, 2, 5],
coordinateSystem: 'polar',
name: 'C',
stack: 'a'
}],
legend: {
show: true,
data: ['A', 'B', 'C']
}
});
}
}