數據可視化在前端開發中常常會遇到,萬惡的圖表,有時候老是就差一點,但是怎麼也搞不定。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!!!