React 中使用ECharts
首先安装 echarts-for-react: npm install --save echarts-for-react
安装 echarts ：npm install --save echarts
使用
import React from "react";
import { observer } from "mobx-react";
import clone from "clone";
import { scatterOption } from "../component/chartOptions";
import EChartsReact from "echarts-for-react";
const ScatterChart: React.FC = observer((props) => {
const getOption = () => {
const option = clone(scatterOption);
return option;
};
return (
<div style={{width:'40%',border:'1px solid '}}>
<EChartsReact option={getOption()} />
</div>
);
});
export default ScatterChart;
option具体内容如下。
散点图
实现效果：
option = {
grid: {
//坐标图栅格布局，使用上下左右定义边距
left: '3%',
right: '12%',
bottom: '5%',
top: '10%',
containLabel: true // 栅格布局是否包含坐标轴区域
},
tooltip: {
//鼠标上移提示
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999' // 鼠标所在点交叉轴样式（向 x，y轴做垂线）
}
}
// formatter: (params: any): string => { //格式化鼠标上移时提示文案
// return ''
// }
},
xAxis: {
//x轴相关定义
type: 'value', //坐标轴类型
name: 'x轴名称', //坐标轴文案
interval: 20, // 坐标轴刻度间隔大小
max: 100, //坐标轴最大值
axisLine: {
//坐标轴线相关设置
lineStyle: {
// 坐标轴线样式
color: 'rgba(0,0,0,0.15)',
width: 2
}
},
axisTick: {
// 坐标刻度线设置
show: false
},
axisLabel: {
//坐标刻度值设置
color: 'rgba(0,0,0,0.65)'
},
nameTextStyle: {
// 坐标轴名称设置
color: 'rgba(0,0,0,0.65)'
},
splitLine: {
// 坐标系内分隔线
show: false
}
},
yAxis: {
type: 'value',
name: 'y轴名称',
interval: 20,
max: 100,
axisLine: {
lineStyle: {
color: 'rgba(216,216,216,1)'
}
},
axisLabel: {
color: 'rgba(0,0,0,0.65)'
},
nameTextStyle: {
color: 'rgba(0,0,0,0.65)'
},
splitLine: {
show: false
}
},
series: [
// 可以设置不同series，里边不同data取不同样式
{
symbolSize: 10, //图标大小尺寸
data: [
[10.0, 8.04],
[89.07, 6.95]
],
type: 'scatter',
markLine: {
silent: true,
lineStyle: {
// 标记线样式
type: 'dotted',
color: 'rgba(0,0,0,0.45)'
},
label: {
//标记线尽头的文字设置
show: false
},
symbolSize: 0, //标记线尽头箭头大小
data: [
{
xAxis: 25 //标记线：x=40那条线
},
{
yAxis: 50 //标记线：y=30那条线
}
]
},
markArea: {
silent: true,
label: {
//标记文字样式
position: 'insideBottomLeft', //标记文字位置
fontSize: '40', //标记文字字号
fontWeight: 'bolder', //标记文字宽度
color: 'rgba(0,0,0,0.10)' //标记文字颜色
},
itemStyle: {
color: 'none' //区域背景颜色
},
data: [
[
//两个对象，分别表示标记区域的左上角和右下角
{
name: '标记',
coord: [0, 100]
},
{
coord: [25, 50]
}
],
[ { name: '文字', coord: [25, 100]
},
{
coord: [100, 50]
}
],
[ { name: '区分', coord: [0, 50]
},
{
coord: [25, 0]
}
],
[ { name: '象限', coord: [25, 50]
},
{
coord: [100, 0]
}
]
]
}
}
]
};
柱形图
实现效果：
option:
option = {
tooltip: {
trigger: 'axis', // tooltip的触发方式：axis(坐标轴出发，主要在柱状等类目图中使用);item(点击数据项触发，主要用于散点图或者饼图)
},
legend: { //设置图标
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: { //坐标轴指示器配置
type: 'shadow' // 设置鼠标上移的时候显示垂直于x轴的阴影，还可以设置位line，那会显示垂直于x轴的直线
}
}
],
yAxis: [
{
type: 'value',
name: 'Precipitation',
axisLine:{
show:true //是否显示y轴那条线
},
axisLabel: {
formatter: '{value} ml' //y轴刻度显示内容格式化
}
},
{
type: 'value',
name: 'Temperature',
axisLine:{
show:true
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [ // 三个系列对应展示三个图标的值
{
name: 'Evaporation',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'Precipitation',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
],
//窗口缩放设置
dataZoom: {
start: 0,
end: 100,
filterMode: "empty",
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "240%",
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2,
},
height: 6,
backgroundColor: "#DDDDDD",
fillerColor: "#007ACE",
bottom: 10,
showDataShadow: false,
showDetail: false,
}
};
雷达图
效果图
option = {
legend: {
data: ['Allocated Budget']
},
radar: {
indicator: [ //雷达图各个角角上边的相关数据
{ name: 'a', max: 6500 },
{ name: 'c', max: 16000 },
{ name: 'v Technology', max: 30000 },
{ name: 'd v', max: 38000 },
{ name: 'n', max: 52000 },
{ name: 'Marketing', max: 25000 },
{ name: 'Marketinsg', max: 25000 },
{ name: 'Marketinsg', max: 25000 },]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, ,35000,5000, 5000, 1800],
name: 'Allocated Budget'
}
]
}
]
};
