echarts-for-react的使用详解
2019-08-05 本文已影响0人
浅夏晴空
Echarts-for-react的使用
示例
image
一、安装
npm install --save echarts-for-react
//如果需要使用echarts的一些特殊方法需要安装
npm install --save echarts
二、使用
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
<ReactEcharts
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
onEvents={onEvents}
style={{width: '100%',height:'100%'}}
/>
三、echarts API
1、设置区域颜色渐进
echarts.graphic.LinearGradient
{
value : [10, 250, 100, 370, 80, 500, 190, 400],
// 设置区域边框和区域的颜色
itemStyle: {
normal: {
//雷达图区域颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0.5,
color: 'rgba(139,241, 134, 0.7)'
},
{
offset: 1,
color: 'rgba(0,208, 131, 1)'
}]),
opacity:0,
lineStyle: {
width: 0,
color: '#8BF186',
},
},
},
name : '昨日更新投诉量'
}
2、legend标签配置
legend: {
//图例文字展示
data: [
{ name:'今日更新投诉量' },
{ name:'昨日更新投诉量' }],
//图例显示在底部
bottom:0,
//图例背景颜色
backgroundColor:"transparent",
// 图例标记的图形宽度。[ default: 25 ]
itemWidth:12,
// 图例标记的图形高度。[ default: 14 ]
itemHeight:9,
//图例文字样式设置
textStyle:{
color:"#333", //文字颜色
fontStyle:"normal", //italic斜体 oblique倾斜
fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
// fontFamily:"sans-serif", //字体系列
fontSize:12, //字体大小
}
}
3、极坐标区域大小控制
radius:'65%',
4、极坐标指示器配置
formatter动态拼接指示器名称
//雷达指示器参数配置
indicator:[
{"name":"车辆已售","value":380,"max":500},
{"name":"商家冒充个人","value":290,"max":500},
{"name":"商家服务态度差","value":450,"max":500},
{"name":"电话无法接通","value":300,"max":500},
{"name":"走私套牌抵押车","value":480,"max":500},
{"name":"价格高于标价","value":200,"max":500},
{"name":"卖新车","value":350,"max":500},
{"name":"图片与车款不符合","value":333,"max":500}
]
name: {
textStyle: {
color: '#999',
backgroundColor: 'transparent'
// borderRadius: 3,
// padding: [3, 5]
},
formatter:function(value,indicator){
//指示器名称过长截取
value = value.replace(/\S{4}/g, function(match) {
return match + '\n'
})
// value = value + '\n' + indicator.value;
return '{a|'+value+'}'+ '\n' + '{b|'+indicator.value+'}'
},
//富文本编辑 修改文字展示样式
rich:{
a:{
color:"#999",
fontSize:12,
align: "center"
},
b:{
color:"#333",
fontSize:17,
align: "center"
}
}
}
formatter回调参数：
value:返回indicator指示器的name值 如：车辆已售
indicator: 返回雷达指示器的所有参数 如：{"name":"车辆已售","value":380,"max":500}
rich定义富文本样式
可区分引用rich里面定义的样式 如上
5、点击事件绑定
click事件
onChartClick(param,echarts){
console.log(param)
}
render(){
let onEvents={
'click': this.onChartClick.bind(this)
}
return(
<div className="echartsRadar">
<ReactEcharts
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
onEvents={onEvents}
style={{width: '100%',height:'100%'}}
/>
</div>
)
}
返回参数
param返回当前点击的所有参数信息
点击雷达图区域：
image
点击指示器显示部分
image
legend标签点击事件
onChartLegendselectchanged(param,echarts){
console.log(param)
}
render(){
let onEvents={
'legendselectchanged': this.onChartLegendselectchanged.bind(this)
}
return(
<div className="echartsRadar">
<ReactEcharts
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
onEvents={onEvents}
style={{width: '100%',height:'100%'}}
/>
</div>
)
}
回调参数：
param:
{
"name":"今日更新投诉量",
"selected":{
"今日更新投诉量":false,
"昨日更新投诉量":true
},
"type":
"legendselectchanged"
}
完整代码
import React, { Component } from 'react';
import '../scss/echartsRadar.scss';//引入组件依赖样式
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入雷达图
// import 'echarts/lib/chart/radar';
// 引入提示框和标题组件
// import 'echarts/lib/component/tooltip';
//引入title
// import 'echarts/lib/component/title';
//引入图例
// import 'echarts/lib/component/legend';
import ReactEcharts from 'echarts-for-react';
const mytextStyle={
color:"#333", //文字颜色
fontStyle:"normal", //italic斜体 oblique倾斜
fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
// fontFamily:"sans-serif", //字体系列
fontSize:12, //字体大小
};
export default class EchartsRadar extends Component {
constructor(props){
super(props);
this.state={
};
// this.indicator = []
}
/**
* @description 配置图表
* @returns
* @memberof EchartsRadar
*/
getOption(){
return {
title: {
text: ''
},
//点击提示标签
// tooltip: {},
legend: {
//图例文字展示
data: [
{ name:'今日更新投诉量' },
{ name:'昨日更新投诉量' }],
//图例显示在底部
bottom:0,
//图例背景颜色
backgroundColor:"transparent",
// 图例标记的图形宽度。[ default: 25 ]
itemWidth:12,
// 图例标记的图形高度。[ default: 14 ]
itemHeight:9,
//图例文字样式设置
textStyle:mytextStyle
},
radar: {
//雷达图绘制类型，支持 'polygon' 和 'circle' [ default: 'polygon' ]
shape: 'polygon',
splitNumber: 3,
center:['50%','50%'],
radius:'65%',
//指示器名称和指示器轴的距离。[ default: 15 ]
nameGap:5,
triggerEvent:true,
name: {
textStyle: {
color: '#999',
backgroundColor: 'transparent'
// borderRadius: 3,
// padding: [3, 5]
},
formatter:function(value,indicator){
value = value.replace(/\S{4}/g, function(match) {
return match + '\n'
})
// value = value + '\n' + indicator.value;
return '{a|'+value+'}'+ '\n' + '{b|'+indicator.value+'}'
},
//富文本编辑 修改文字展示样式
rich:{
a:{
color:"#999",
fontSize:12,
align: "center"
},
b:{
color:"#333",
fontSize:17,
align: "center"
}
}
},
// 设置雷达图中间射线的颜色
axisLine: {
lineStyle: {
color: '#ddd',
},
},
indicator: [
{"name":"车辆已售","value":380,"max":500},
{"name":"商家冒充个人","value":290,"max":500},
{"name":"商家服务态度差","value":450,"max":500},
{"name":"电话无法接通","value":300,"max":500},
{"name":"走私套牌抵押车","value":480,"max":500},
{"name":"价格高于标价","value":200,"max":500},
{"name":"卖新车","value":350,"max":500},
{"name":"图片与车款不符合","value":333,"max":500}
],
//雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
splitArea : {
show : false,
areaStyle : {
color: 'rgba(255,0,0,0)', // 图表背景的颜色
},
}
},
series: [{
name: '投诉统计',
type: 'radar',
//显示雷达图选中背景
areaStyle: {normal: {}},
data: [
{
value : [380, 290, 450, 300, 480, 200, 350, 333],
// 设置区域边框和区域的颜色
itemStyle: {
normal: {
//雷达图背景渐变设置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0.5,
color: 'rgba(48,107, 231, 1)'
},
{
offset: 1,
color: 'rgba(73,168, 255, 0.7)'
}]),
//去除刻度
opacity:0,
//雷达图边线样式
lineStyle: {
width: 0,
color: '#306BE7',
},
},
},
name : '今日更新投诉量',
id: "jintian"
},
{
value : [10, 250, 100, 370, 80, 500, 190, 400],
// 设置区域边框和区域的颜色
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0.5,
color: 'rgba(139,241, 134, 0.7)'
},
{
offset: 1,
color: 'rgba(0,208, 131, 1)'
}]),
opacity:0,
lineStyle: {
width: 0,
color: '#8BF186',
},
},
},
name : '昨日更新投诉量',
id: "zuotian"
}
]
}]
};
}
/**
* @description 雷达图选中区域点击事件和外部显示标签点击事件
* @param {any} param
* @param {any} echarts
* @memberof EchartsRadar
*/
onChartClick(param,echarts){
console.log(param)
}
/**
* @description 点击legend事件
* @param {any} param
* @param {any} echarts
* @memberof EchartsRadar
*/
onChartLegendselectchanged(param,echarts){
console.log(param)
}
componentWillReceiveProps(nextProps){
}
componentWillMount(){
}
componentDidMount(){
}
render(){
let onEvents={
'click': this.onChartClick.bind(this),
'legendselectchanged': this.onChartLegendselectchanged.bind(this)
}
return(
<div className="echartsRadar">
<ReactEcharts
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
onEvents={onEvents}
style={{width: '100%',height:'100%'}}
/>
</div>
)
}
}
依赖样式echartsRadar.scss：
.echartsRadar{
display: flex;
// align-items: center;
justify-content: center;
height: 400px;
}
.echartsPie{
display: flex;
justify-content: center;
height: 280px;
}
