dvajs框架，使用echarts图表的方法，
1.安装
npm install echarts-for-react echarts --save
2. 在components文件夹下，创建相关的图表组件
以柱状图——Bar组件 为例：
components/chart/bar.js代码如下：
import React from 'react';
import styles from './Bar.css';
import ECharts from 'echarts-for-react';
function BarChart({data}) {
var option = {
title: {
text: data.title,
x: 'left'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox:{
feature: {
magicType: { type: ['line', 'bar'] },
saveAsImage: {}
}
},
legend: {
data: data.namelist
},
xAxis: {
type: 'category',
name: data.xAxisName||'',
data: data.xlist,
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0, //横轴信息全部显示
},
splitLine: { // 去掉网格线
show: false
}
},
yAxis: {
type: 'value',
name: data.yAxisName||'',
splitLine: { // 去掉网格线
show: false
}
},
series: data.barData
};
return (
);
}
export default BarChart;
++++++++++++++++++++++++++++++++
bar组件中的data参数，就是将来要传进来的数据，来源在哪呢？就是model层中定义的state中的数据。
我的柱状图来源于model文件夹下的monitor.js,
export default {
namespace: 'monitor',
state:{
searAnaly:{ //把搜索引擎数据，拆出来分析
title:'搜索引擎分析', //
xAxisName:'',
yAxisName:'',
namelist:['百度','360','搜狗','google','雅虎','搜搜','有道'],
xlist:['2017','2018','2019'],
pieData:[ //饼状图的数据
{value:535, name:'百度'},
{value:108, name:'360'},
{value:234, name:'搜狗'},
{value:412, name:'google'},
{value:56, name:'雅虎'},
{value:97, name:'搜搜'},
{value:41, name:'有道'},
],barData:[ //柱状图的数据
{ type:'bar',name:'百度', data:[18,206,393], },
{ type:'bar',name:'360', data:[27,215,265], },
{ type:'bar',name:'搜狗', data:[224,346,279],},
{ type:'bar',name:'google', data:[210,376,140],},
{ type:'bar',name:'雅虎', data:[130,305,262],},
{ type:'bar',name:'搜搜', data:[114,188,338],},
{ type:'bar',name:'有道', data:[206, 59, 90],}
],
lineData:[ //折线图的数据
{ type:'line',name:'百度', data:[18,206,393], },
{ type:'line',name:'360', data:[27,215,265], },
{ type:'line',name:'搜狗', data:[224,346,279],},
{ type:'line',name:'google', data:[210,376,140],},
{ type:'line',name:'雅虎', data:[130,305,262],},
{ type:'line',name:'搜搜', data:[114,188,338],},
{ type:'line',name:'有道', data:[206, 59, 90],}
]
},
mapAnaly:{ //地图map的数据
map:[
{name: '北京', value: 493},
{name: '天津', value: 885},
{name: '上海', value: 986},
{name: '重庆', value: 855},
{name: '河北', value: 196},
{name: '河南', value: 13},
{name: '云南', value: 915},
{name: '辽宁', value: 865},
{name: '黑龙江', value: 860},
{name: '湖南', value: 6},
{name: '安徽', value: 770},
{name: '山东', value: 354},
{name: '新疆', value: 322},
{name: '江苏', value: 769},
{name: '浙江', value: 175},
{name: '江西', value: 532},
{name: '湖北', value: 144},
{name: '广西', value: 747},
{name: '甘肃', value: 245},
{name: '山西', value: 244},
{name: '内蒙古', value: 414},
{name: '陕西', value: 152},
{name: '吉林', value: 587},
{name: '福建', value: 33},
{name: '贵州', value: 723},
{name: '广东', value: 609},
{name: '青海', value: 392},
{name: '西藏', value: 929},
{name: '四川', value: 340},
{name: '宁夏', value: 948},
{name: '海南', value: 480},
{name: '台湾', value: 283},
{name: '香港', value: 972},
{name: '澳门', value: 541}
]
}
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
*fetch({ payload }, { call, put }) { // eslint-disable-line
yield put({ type: 'save' });
},
},
reducers: {
},
};
++++++++++++++++++++++++++++++++++
重点来了！！！怎么引用？
在routes中的页面引用，我的是在analysis.js，所以routes/analysis.js代码如下
import React from 'react';
import { connect } from 'dva';
import styles from './AnalysisPage.css';
import PieChart from '../components/chart/Pie';
import BarChart from '../components/chart/Bar';
import LineChart from '../components/chart/Line';
import MapChart from '../components/chart/Map';
const AnalysisPage = ({ dispatch,monitor}) => {
return (
);
}
export default connect(({ monitor }) => ({
monitor
}))(AnalysisPage);
这样就可以啦~~~~