React组件

2020-11-25 03:31:31 作者：互联网

bizcharts官网：
https://bizcharts.net/product/BizCharts4/gallery#LineChart

一，多色折线图

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Line, Point, Tooltip } from 'bizcharts';

// 数据源
const data = [
{
month: "Jan",
city: "Tokyo",
temperature: 7
},
{
month: "Jan",
city: "London",
temperature: 3.9
},
{
month: "Feb",
city: "Tokyo",
temperature: 6.9
},
{
month: "Feb",
city: "London",
temperature: 4.2
},
{
month: "Mar",
city: "Tokyo",
temperature: 9.5
},
{
month: "Mar",
city: "London",
temperature: 5.7
},
{
month: "Apr",
city: "Tokyo",
temperature: 14.5
},
{
month: "Apr",
city: "London",
temperature: 8.5
},
{
month: "May",
city: "Tokyo",
temperature: 18.4
},
{
month: "May",
city: "London",
temperature: 11.9
},
{
month: "Jun",
city: "Tokyo",
temperature: 21.5
},
{
month: "Jun",
city: "London",
temperature: 15.2
},
{
month: "Jul",
city: "Tokyo",
temperature: 25.2
},
{
month: "Jul",
city: "London",
temperature: 17
},
{
month: "Aug",
city: "Tokyo",
temperature: 26.5
},
{
month: "Aug",
city: "London",
temperature: 16.6
},
{
month: "Sep",
city: "Tokyo",
temperature: 23.3
},
{
month: "Sep",
city: "London",
temperature: 14.2
},
{
month: "Oct",
city: "Tokyo",
temperature: 18.3
},
{
month: "Oct",
city: "London",
temperature: 10.3
},
{
month: "Nov",
city: "Tokyo",
temperature: 13.9
},
{
month: "Nov",
city: "London",
temperature: 6.6
},
{
month: "Dec",
city: "Tokyo",
temperature: 9.6
},
{
month: "Dec",
city: "London",
temperature: 4.8
}
];

const scale = {
temperature: { min: 0 },
city: {
formatter: v => {
return {
London: '伦敦',
Tokyo: '东京'
}[v]
}
}
}

function Demo() {
return <Chart scale={scale} padding={[30, 20, 50, 40]} autoFit height={320} data={data} interactions={['element-active']}>

}

ReactDOM.render(, mountNode);

二，分组柱状图（adjust）

import React from "react";
import {
G2,
Chart,
Tooltip,
Interval,
} from "bizcharts";

function Grouped() {
return (

<Interval
adjust={[
{
type: 'dodge',
marginRatio: 0,
},
]}
color="name"
position="月份*月均降雨量"
/>

);
}

const data = [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
];

ReactDOM.render(, mountNode)

分组柱状图二

import React from "react";
import {
G2,
Chart,
Tooltip,
Interval,
} from "bizcharts";

function Grouped() {
return (

<Interval
adjust={[
{
type: 'dodge',
marginRatio: 0,
},
]}
color="name"
position="月份*月均降雨量"
/>

);
}

ReactDOM.render(, mountNode)

三，自定义Legend的使用

import React from "react";
import { G2, Chart, Tooltip, Interval, Legend } from "bizcharts";

const data = [
{ name: "London", 月份: "Jan.", 月均降雨量: 18.9 },
{ name: "London", 月份: "Feb.", 月均降雨量: 28.8 },
{ name: "London", 月份: "Mar.", 月均降雨量: 39.3 },
{ name: "London", 月份: "Apr.", 月均降雨量: 81.4 },
{ name: "London", 月份: "May", 月均降雨量: 47 },
{ name: "London", 月份: "Jun.", 月均降雨量: 20.3 },
{ name: "London", 月份: "Jul.", 月均降雨量: 24 },
{ name: "London", 月份: "Aug.", 月均降雨量: 35.6 },
{ name: "Berlin", 月份: "Jan.", 月均降雨量: 12.4 },
{ name: "Berlin", 月份: "Feb.", 月均降雨量: 23.2 },
{ name: "Berlin", 月份: "Mar.", 月均降雨量: 34.5 },
{ name: "Berlin", 月份: "Apr.", 月均降雨量: 99.7 },
{ name: "Berlin", 月份: "May", 月均降雨量: 52.6 },
{ name: "Berlin", 月份: "Jun.", 月均降雨量: 35.5 },
{ name: "Berlin", 月份: "Jul.", 月均降雨量: 37.4 },
{ name: "Berlin", 月份: "Aug.", 月均降雨量: 42.4 },
];

// const legendLabelConfig = {
// // 文本同滑轨的对齐方式，有五种类型
// // rail ：同滑轨对齐，在滑轨的两端
// // top, bottom: 图例水平布局时有效
// // left, right: 图例垂直布局时有效
// align: "right",
// spacing: 10, // 文本同滑轨的距离
// style: {
// stroke: 'blue',
// fill: 'red'
// } // 文本样式
// }

ReactDOM.render(, mountNode);

标签：降雨量,name,city,React,Berlin,London,组件,月均
来源： https://www.cnblogs.com/zhang-blog/p/14033773.html