一.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 id="lineCharts-1" color={['#f38747', '#f7dc3e', '#6ed66d']} legendShow legendTextStyle="#5d71a2" noPercent maxSize={100} lineColor="#5d71a2" 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 600, // 指定图表宽度 height: 300 // 指定图表高度 }); chart.source(this.state.data); chart.interval().position('genre*sold').color('genre'); chart.render(); } render() { return ( <div id="c1" className="charts"> </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;