React中使用Echarts實作資料可視化的小案例（基礎文章）

這是我參與8月更文挑戰的第24天，活動詳情檢視： 8月更文挑戰

1. 安裝echarts-for-react插件(兩個都要裝)

npm install echarts-for-react
npm install echarts
複制代碼      

2. 導入ReactEcharts庫

import ReactECharts from 'echarts-for-react';
複制代碼      

3. 渲染ReactEcharts元件，并通過option導入資料

<ReactECharts option={this.getOption(sales,stores)} />
複制代碼      

4. 設定資料源option

getOption = (sales,stores) => {
    return {
        title: {
            text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
            data: ['銷量', '庫存']
        },
        xAxis: {
            data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: [1,2,3,4],
        }, {
            name: '庫存',
            type: 'bar',
            data: [2,5,4,6]
        }]
    }
}
複制代碼      

如何将柱狀圖改為折線圖

隻需将series的對象中的type更改為line即可。

getOption = (sales,stores) => {
    return {
        title: {
            text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
            data: ['銷量', '庫存']
        },
        xAxis: {
            data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'line',
            data: sales,
        }, {
            name: '庫存',
            type: 'line',
            data: stores
        }]
    }
}
複制代碼      

柱狀圖和折線圖的實作效果，如下圖所示

如何修改柱狀圖的顔色

通過在option中設定color屬性，既可以進行全局的樣式柱狀圖顔色修改，也可以局部的修改某一個柱狀圖的顔色。更多的屬性設定需要去查官方文檔或者根據官方的執行個體進行修改。

示例代碼

option = {
    // 全局調色盤。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    series: [{
        type: 'bar',
        // 此系列自己的調色盤。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的調色盤。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}
複制代碼      

Echarts的按需引入

import React from 'react';
import {Card} from 'antd';
import echartTheme from './../themeLight'
//不是按需加載的話檔案太大
//import echarts from 'echarts'
//下面是按需加載
import echarts from 'echarts/lib/echarts'
//導入折線圖
import 'echarts/lib/chart/line';  //折線圖是line,餅圖改為pie,柱形圖改為bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
export default class Line extends React.Component{
  componentWillMount(){
    //主題的設定要在willmounted中設定
    echarts.registerTheme('Imooc',echartTheme);
  }
  getOption =()=> {
    let option = {
      title:{
        text:'使用者騎行訂單',
        x:'center'
      },
      tooltip:{
        trigger:'axis',
      },
      xAxis:{
        data:['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis:{
        type:'value'
      },
      series:[
        {
          name:'OFO訂單量',
          type:'line',   //這塊要定義type類型，柱形圖是bar,餅圖是pie
          data:[1000,2000,1500,3000,2000,1200,800]
        }
      ]
    }
   return option
  }
  render(){
    return(
      <div>
        <Card title="折線圖表之一">
            <ReactEcharts option={this.getOption()} theme="Imooc"  style={{height:'400px'}}/>
        </Card>
      </div>
    )
  }
}
複制代碼      

參考資料

• echarts-for-react
• ECharts for React官網
• 【React】react項目引入echarts插件