echarts-for-react的使用詳解
阿新 • • 發佈：2018-12-17
Echarts-for-react的使用
示例
一、安裝
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返回當前點選的所有引數資訊
點選雷達圖區域：
點選指示器顯示部分
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>
)
}
}