Echarts-for-React 雷達圖

前言

最近正著手一個課上的大作業，由於其他兩位組員還在和其他項目功能掙扎，於是就由我來負責製作最後項目的網頁展示。關於這個項目的展示，我最後是採用了 React + flask 作為前後端的開發。在另一篇會繼續談談這次學習 flask 下來的一些心得和理解，但在本篇，我想先說說關於 Echarts 這個有趣的組件庫。
之所以學習了 Echarts 也是應組員和項目展示需求，希望可以將數據可視化展現在頁面上，使網頁更活潑並且提升用戶體驗。接下來就進入 Echarts 的世界吧 !

正文

示例

安裝

要使用 Echarts，當然首先要使用 npm 安裝。

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

安裝完畢後，也可以前往 React 項目中的 package.json 確認是否成功安裝。

使用

import ReactEcharts from 'echarts-for-react'

<ReactEcharts 
    option={
   this.getOption()}
    notMerge={
   true}
    lazyUpdate={
   true}
    onEvents={
   onEvents}
    style={
   {
   width: '100%', height: '100%'}}
/>

echarts API

設置區域顏色漸進

echarts.graphic.LinearGradient

{
   
    value: this.state.overall_student_value,
    itemStyle: {
   
        normal: {
   
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
   
                offset: 0.5,
                color: 'rgba(48, 107, 231, 1)'
                },
                {
   
                offset: 1,
                color: 'rgba(73, 168, 255, 0.7)'
                }
            ]),
            opacity: 0,
            lineStyle: {
   
                width: 0,
                color: '#306BE7'
            },
        },
    },
    name: '总体软院学生',
    id: 'overall_student'
}

legend 標籤配置

const radarTextStyle = {
   
    color: '#333',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: 12,
}

// 圖例文字展示
legend: {
   
    data: [
        {
    name: '总体软院学生'},
        {
    name: '目标学生'}
    ],
    // 圖例顯示位置在底部
    bottom: 0,
    // 圖例背景顏色
    backgroundColor: 'transparent',
    // 圖例符號大小
    itemWidth: 12,
    itemHeight: 9,
    // 圖例文字樣示
    textStyle: radarTextStyle
}

雷達圖分類配置

indicator: [
    {
   "name":"代码估计相似度","value":'',"max":500},
    {
   "name":"代码时间复杂度","value"