一.echarts的折线图的使用demo如下，linecharts为实例化的封装组件，line为实际应用的组件
cnpm install echarts
import React from 'react';
import './lineCharts.less';
let echarts = require('echarts');
/**
* 组件参数配置
*
* @param {string} id
* id = 每个图标的标识
* @param {array} color
* color = 多组数据的颜色区分，第一组数据为第一种颜色
* @param { } legendShow
* legendShow 是否显示默认标注，右上角颜色对应块
* @param {string} legendTextStyle
* legendTextStyle = 折线图标注的文字颜色
* @param { } noPercent
* noPercent 折线图不是以百分比来显示
* @param { array } xAxis
* xAxis": ["翡翠城西南区", "盛世嘉园","西溪北苑"],
* @param { array } yAxis
* "yAxis": [
{
"data": [100,200,300],
"name": "水费",
"stack": "1",
"type": "line",
},
{
"data": [100,200,300],
"name": "物业管理费",
"stack": "1",
"type": "line",
},
{
"data": [100,200,300],
"name": "燃气费",
"stack": "1",
"type": "line",
}
]
*
*/
let colors = ['#f27573', '#69757a', '#ffd553', '#51b8ae', '#ff8d69', '#a48b82', '#dde779', '#7d89cd', '#cacaca', '#51d1e1', '#f06695', '#fff179', '#8ca8f9', '#c9b185', '#9e5c81'];
class lineCharts extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
let { id, xAxis, yAxis } = this.props;
let myChart = echarts.init(document.getElementById(id));
myChart.setOption({
color: this.props.color ? this.props.color : colors,
title: {
left: "center",
},
legend: {
orient: 'vertical',
left: 'right',
show: this.props.legendShow ? true : false,
textStyle: {
color: this.props.legendTextStyle ? this.props.legendTextStyle : '#000',
fontSize: 12
}
},
tooltip: {
trigger: 'axis',
formatter: this.props.noPercent ? '' : '{b0}<br />{a0}: {c0}%<br />{a1}: {c1}%'
},
grid: {
left: '20%',
right: '20%',
bottom: '3%',
top:'30%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis,
"axisLabel": {
interval: this.props.intervalNum ? this.props.intervalNum : 0,
rotate: 7
},
axisLine: {
lineStyle: {
color: this.props.lineColor ? this.props.lineColor : '#000',
}
},
},
yAxis: {
type: 'value',
minInterval: 1,
boundaryGap: [0, 0.1],
axisLabel: {
formatter: this.props.noPercent ? '{value}' : '{value} %',
},
axisLine: {
lineStyle: {
color: this.props.lineColor ? this.props.lineColor : '#000',
}
},
precision: 0,
// min: 1,
max: this.props.maxSize && this.props.maxSize <= 10 ? 10 : null,
},
series: yAxis
})
}
render() {
return (
<div id={this.props.id} className="charts">
</div>
);
}
}
export default lineCharts;
import React, { Component } from 'react'
import { Button } from 'antd';
import LineCharts from "./lineCharts";
import './lineCharts.less';
class Line extends Component {
render() {
const data = {
"xAxis": ["翡翠城西南区", "盛世嘉园","西溪北苑"],
"yAxis": [
{
"data": [100,200,300],
"name": "水费",
"stack": "1",
"type": "line",
"areaStyle": {}
},
{
"data": [100,200,300],
"name": "物业管理费",
"stack": "2",
"type": "line",
"areaStyle":{}
},
{
"data": [100,200,300],
"name": "燃气费",
"stack": "3",
"type": "line",
"areaStyle":{}
}
]
}
return (
<div className="root">
<Button className="big">这是一个按钮</Button>
<LineCharts xAxis={data.xAxis} yAxis={data.yAxis} />
</div>
);
}
}
export default Line
二.g2的使用以如下柱状图为例
cnpm install @antv/g2
import React from 'react';
import G2 from '@antv/g2';
class g2 extends React.Component {
constructor(props) {
super(props);
this.state = {
data :[
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
]
};
}
componentDidMount() {
const chart = new G2.Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300 // 指定图表高度
});
chart.source(this.state.data);
chart.interval().position('genre*sold').color('genre');
chart.render();
}
render() {
return (
<div >
</div>
);
}
}
export default g2;
三：bizcharts：基于g2的封装版本，去除实例化图表的步骤，更多的关注于各字段的控制，以下两个demo分别为折线图，扇形图
cnpm install bizcharts; cnpm install @antv/data-set;//扇形图时要安装改依赖
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';
class bizcharts extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ genre: 'Sports', sold: 275, income: 2300 },
{ genre: 'Strategy', sold: 115, income: 667 },
{ genre: 'Action', sold: 120, income: 982 },
{ genre: 'Shooter', sold: 350, income: 5271 },
{ genre: 'Other', sold: 150, income: 3710 }
],
};
}
render() {
return (
<div>
<Chart width={600} height={200} padding={[60,'auto','auto',160]} data={this.state.data} >
<Axis name="genre" />
<Legend position="bottom"/>
<Tooltip />
<Geom type="line" position="genre*sold" size={2} />
<Geom type='point' position="genre*sold" size={4} shape={'circle'} style={{ stroke: '#fff', lineWidth: 1 }} />
</Chart>
</div>
);
}
}
export default bizcharts;
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord, Label } from 'bizcharts';
import DataSet from '@antv/data-set';//cnpm install @antv/data-set
const { DataView } = DataSet;
const dv = new DataView();
class bizcharts extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ item: '事例一', count: 40 },
{ item: '事例二', count: 21 },
{ item: '事例三', count: 17 },
{ item: '事例四', count: 13 },
{ item: '事例五', count: 9 }
],
};
}
render() {
dv.source(this.state.data).transform({
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent',
});
const cols = {
percent: {
formatter: val => {
val = (val * 100) + '%';
return val;
}
}
}
return (
<div>
<Chart height={window.innerHeight} data={dv} scale={cols} padding={[80, 100, 80, 80]} forceFit>
<Coord type='theta' radius={0.75} />
<Axis name="percent" />
<Legend position='right' offsetY={-window.innerHeight / 2 + 120} offsetX={-100} />
<Tooltip
showTitle={false}
itemTpl='<li><span style="" class="g2-tooltip-marker"></span>{name}: {value}</li>'
/>
<Geom
type="intervalStack"
position="percent"
color='item'
tooltip={['item*percent', (item, percent) => {
percent = percent * 100 + '%';
return {
name: item,
value: percent
};
}]}
style={{ lineWidth: 1, stroke: '#fff' }}
>
<Label content='percent' formatter={(val, item) => {
return item.point.item + ': ' + val;
}} />
</Geom>
</Chart>
</div>
);
}
}
export default bizcharts;
一.echarts的折线图的使用demo如下，linecharts为实例化的封装组件，line为实际应用的组件
cnpm install echarts
import React from 'react';
import './lineCharts.less';
let echarts = require('echarts');
/**
* 组件参数配置
*
* @param {string} id
* id = 每个图标的标识
* @param {array} color
* color = 多组数据的颜色区分，第一组数据为第一种颜色
* @param { } legendShow
* legendShow 是否显示默认标注，右上角颜色对应块
* @param {string} legendTextStyle
* legendTextStyle = 折线图标注的文字颜色
* @param { } noPercent
* noPercent 折线图不是以百分比来显示
* @param { array } xAxis
* xAxis": ["翡翠城西南区", "盛世嘉园","西溪北苑"],
* @param { array } yAxis
* "yAxis": [
{
"data": [100,200,300],
"name": "水费",
"stack": "1",
"type": "line",
},
{
"data": [100,200,300],
"name": "物业管理费",
"stack": "1",
"type": "line",
},
{
"data": [100,200,300],
"name": "燃气费",
"stack": "1",
"type": "line",
}
]
*
*/
let colors = ['#f27573', '#69757a', '#ffd553', '#51b8ae', '#ff8d69', '#a48b82', '#dde779', '#7d89cd', '#cacaca', '#51d1e1', '#f06695', '#fff179', '#8ca8f9', '#c9b185', '#9e5c81'];
class lineCharts extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
let { id, xAxis, yAxis } = this.props;
let myChart = echarts.init(document.getElementById(id));
myChart.setOption({
color: this.props.color ? this.props.color : colors,
title: {
left: "center",
},
legend: {
orient: 'vertical',
left: 'right',
show: this.props.legendShow ? true : false,
textStyle: {
color: this.props.legendTextStyle ? this.props.legendTextStyle : '#000',
fontSize: 12
}
},
tooltip: {
trigger: 'axis',
formatter: this.props.noPercent ? '' : '{b0}<br />{a0}: {c0}%<br />{a1}: {c1}%'
},
grid: {
left: '20%',
right: '20%',
bottom: '3%',
top:'30%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis,
"axisLabel": {
interval: this.props.intervalNum ? this.props.intervalNum : 0,
rotate: 7
},
axisLine: {
lineStyle: {
color: this.props.lineColor ? this.props.lineColor : '#000',
}
},
},
yAxis: {
type: 'value',
minInterval: 1,
boundaryGap: [0, 0.1],
axisLabel: {
formatter: this.props.noPercent ? '{value}' : '{value} %',
},
axisLine: {
lineStyle: {
color: this.props.lineColor ? this.props.lineColor : '#000',
}
},
precision: 0,
// min: 1,
max: this.props.maxSize && this.props.maxSize <= 10 ? 10 : null,
},
series: yAxis
})
}
render() {
return (
<div id={this.props.id} className="charts">
</div>
);
}
}
export default lineCharts;
import React, { Component } from 'react'
import { Button } from 'antd';
import LineCharts from "./lineCharts";
import './lineCharts.less';
class Line extends Component {
render() {
const data = {
"xAxis": ["翡翠城西南区", "盛世嘉园","西溪北苑"],
"yAxis": [
{
"data": [100,200,300],
"name": "水费",
"stack": "1",
"type": "line",
"areaStyle": {}
},
{
"data": [100,200,300],
"name": "物业管理费",
"stack": "2",
"type": "line",
"areaStyle":{}
},
{
"data": [100,200,300],
"name": "燃气费",
"stack": "3",
"type": "line",
"areaStyle":{}
}
]
}
return (
<div className="root">
<Button className="big">这是一个按钮</Button>
<LineCharts xAxis={data.xAxis} yAxis={data.yAxis} />
</div>
);
}
}
export default Line
二.g2的使用以如下柱状图为例
cnpm install @antv/g2
import React from 'react';
import G2 from '@antv/g2';
class g2 extends React.Component {
constructor(props) {
super(props);
this.state = {
data :[
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
]
};
}
componentDidMount() {
const chart = new G2.Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300 // 指定图表高度
});
chart.source(this.state.data);
chart.interval().position('genre*sold').color('genre');
chart.render();
}
render() {
return (
<div >
</div>
);
}
}
export default g2;
三：bizcharts：基于g2的封装版本，去除实例化图表的步骤，更多的关注于各字段的控制，以下两个demo分别为折线图，扇形图
cnpm install bizcharts; cnpm install @antv/data-set;//扇形图时要安装改依赖
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';
class bizcharts extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ genre: 'Sports', sold: 275, income: 2300 },
{ genre: 'Strategy', sold: 115, income: 667 },
{ genre: 'Action', sold: 120, income: 982 },
{ genre: 'Shooter', sold: 350, income: 5271 },
{ genre: 'Other', sold: 150, income: 3710 }
],
};
}
render() {
return (
<div>
<Chart width={600} height={200} padding={[60,'auto','auto',160]} data={this.state.data} >
<Axis name="genre" />
<Legend position="bottom"/>
<Tooltip />
<Geom type="line" position="genre*sold" size={2} />
<Geom type='point' position="genre*sold" size={4} shape={'circle'} style={{ stroke: '#fff', lineWidth: 1 }} />
</Chart>
</div>
);
}
}
export default bizcharts;
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord, Label } from 'bizcharts';
import DataSet from '@antv/data-set';//cnpm install @antv/data-set
const { DataView } = DataSet;
const dv = new DataView();
class bizcharts extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ item: '事例一', count: 40 },
{ item: '事例二', count: 21 },
{ item: '事例三', count: 17 },
{ item: '事例四', count: 13 },
{ item: '事例五', count: 9 }
],
};
}
render() {
dv.source(this.state.data).transform({
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent',
});
const cols = {
percent: {
formatter: val => {
val = (val * 100) + '%';
return val;
}
}
}
return (
<div>
<Chart height={window.innerHeight} data={dv} scale={cols} padding={[80, 100, 80, 80]} forceFit>
<Coord type='theta' radius={0.75} />
<Axis name="percent" />
<Legend position='right' offsetY={-window.innerHeight / 2 + 120} offsetX={-100} />
<Tooltip
showTitle={false}
itemTpl='<li><span style="" class="g2-tooltip-marker"></span>{name}: {value}</li>'
/>
<Geom
type="intervalStack"
position="percent"
color='item'
tooltip={['item*percent', (item, percent) => {
percent = percent * 100 + '%';
return {
name: item,
value: percent
};
}]}
style={{ lineWidth: 1, stroke: '#fff' }}
>
<Label content='percent' formatter={(val, item) => {
return item.point.item + ': ' + val;
}} />
</Geom>
</Chart>
</div>
);
}
}
export default bizcharts;