echarts在react項目中的使用

數據可視化在前端開發中常常會遇到,萬惡的圖表,有時候老是就差一點,但是怎麼也搞不定。javascript

別慌,我們一塊兒來研究。前端

引入我就很少說了 npm install echartsjava

對於基礎的可視化組件,我通常採用組件封裝的方式來使用echartsreact

當須要在項目中使用echarts作圖表時,能夠直接將其封裝成一個組件npm

 1 import React, { Component } from 'react';
 2 
 3 // 引入 ECharts 主模塊
 4 import echarts from 'echarts/lib/echarts';
 5 // 引入環形圖
 6 import 'echarts/lib/chart/pie';
 7 // 引入提示框和標題組件
 8 import 'echarts/lib/component/tooltip';
 9 import 'echarts/lib/component/title';
10 import 'echarts/lib/component/visualMap';
11 
12 export default class IndexPieData extends Component {
13   initCharts = () => {
14     const data = this.props.data;
15     var piedata = data.map((item, index) => {
16       return {
17         value: item.y,   //value和name是echarts規定的,嗚嗚嗚
18         name: item.x,
19       };
20     });
21     // 基於準備好的dom,初始化echarts實例
22     var myChart = echarts.init(document.getElementById('main'));
23     // 繪製圖表
24     myChart.setOption({
25       tooltip: {
26         trigger: 'item',
27         // formatter: "{a} <br/>{b}: {c} ({d}%)"
28         formatter: '{b}:   {d}%',
29       },
30       series: [
31         {
32           name: '設備佔比數量',
33           type: 'pie',
34           radius: ['50%', '60%'],
35           label: {
36             formatter: '{b}:{d}%',
37             textStyle: {
38               color: '#000000',
39               fontSize: 12,
40             },
41           },
42           data: piedata,
43         },
44     });
45   };
46 
47   componentDidMount() {
48     this.initCharts();
49   }
50   componentDidUpdate() {  //當圖表切換的時候,從新執行
51     this.initCharts();
52   }
53   render() {
54     return <div id="main" style={{ width: '100%', height: 311 }} />;
55   }
56 }

//在須要使用的頁面 引入並使用
import IndexPieData from '../';

<IndexPieData data={pieData} height={300}></IndexPieData>

 

echarts一些經常使用的配置項antd

toolbox工具欄 toolbox: {   show: true,  //默認爲true
  itemSize: 15,  //工具欄圖標的大小 default: 15
  feature: {   //自定義工具按鈕,添加其餘的
    saveAsImage: { show: true },  //保存爲圖片
    magicType: {       type: ['bar','line']    //設置柱狀圖,折線圖切換
    },     dataZoom: {       show: true,       yAxisIndex: false     //禁止y軸作區域縮放
    },     restore: { //添加配置項還原圖標工具
      show: true     }   } } yAxis: {   type: 'value',   axisLabel: {   formatter: function (val) {     return val;   },   showMinLabel: true,   showMaxLabel: true,   } } //type的值 //value 數值軸,適用於連續數據 //category 類目軸,適用於離散的類目數據,須要設置data //time 時間軸 適用於連續的時序數據 //log 對數軸,適用於對數數據
tooltip:{   //提示框組件
  trigger: 'item', //數據項圖形出發
  formatter: '{b}: {d}%', //設置提示框內容
}
。。。太多了,用的時候再看吧!

 

最近一直在使用antd pro進行項目開發,在引入echarts時,通常都是配合表單查詢進行使用app

在實際開發中echarts

//一樣對echarts代碼進行封裝

daysAlertChart.js
// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
import moment from 'moment';
import { formatMessage, FormattedMessage } from 'umi/locale';

const typeList = ['red_alert', 'yellow_alert', 'offline', 'expired', 'suspicious', 'sample_placement_error', 'sample_expired', 'sample_inventory', 'task_incomplete',];

export function daysAlertChart(chartData) { let dataList = []; let currentSubtext = []; let dateTime = []; chartData.alertDailyMap.forEach((item, idx) => { let alertType = item.alertType; console.log(alertType) alertType = typeList.indexOf(alertType) > -1 ? formatMessage({ id: `app.alert.${alertType}` }) : alertType; currentSubtext.push({ name: alertType }) dataList.push({ name: alertType, data: chartData.alertDailyMap[idx].alertCount, type: 'bar' }) console.log(dataList) }); chartData.time.forEach((item2, idx2) => { dateTime.push( moment(item2).format('YYYY-MM-DD'), ) }); let option = { color: ['#f5222d', '#faad14', '#d9d9d9', '#1890ff', '#4d4dff', '#32cd99'], tooltip: { show: true, trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { width: 1200, //left:'30%', bottom: '0%', data: currentSubtext, formatter: val => { return typeList.indexOf(val) > -1 ? formatMessage({ id: `app.alert.${val}` }) : val } }, toolbox: { show: true, right: 5, top: 10, feature: { magicType: { show: true, type: ['bar', 'line'] }, //實現柱狀圖和折線圖的切換 dataZoom: { show: true, yAxisIndex: false }, restore: { show: true }, saveAsImage: { show: true } } }, grid: { left: '4%', right: '4%', bottom: '5%', containLabel: true }, xAxis: { type: 'category', data: dateTime, }, yAxis: { type: 'value', axisLabel: { formatter: function (val) { return val; }, showMinLabel: true, showMaxLabel: true, }, }, series: dataList }; return option; }

由於antd pro項目採用dva完成對fetch請求的封裝,能夠在完成數據請求以後的回調中進行echarts圖表的初始化dom

//在頁面代碼中
import  {echartsDemo} from '../';
// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// 引入圖表組件
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
// 引入提示框和標題組件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/dataZoom';
return (
  <div id={'daysAlert'} style={{width:'100%', height:'500px'}}></div>
)

function initChart(domId,data,func) {
  let dom = document.getElementById(domId);
  if (dom) {
    let myChart = echarts.init(dom);
    let option = func(data);
    myChart.setOption(option,true);
  }
}

componentDidMount() {
  this.props.dispatch({
    type: 'statistics/fetchAlertCountData',
    payload: {
      startTime: startTime,
      endTime: endTime
    },
    //callback須要在對應的models請求接口時,進行傳參callback
    //並設置 if(callback) callback(res.data)
    callback: (alertData)=>{ initChart('daysAlert',alertData,daysAlertChart)}
  })
}///OK!!!
相關文章
相關標籤/搜索