Closed youngerbyte closed 1 year ago
可以使用这个解决:http://www.eslinstructor.net/jsonfn/
OK,感谢反馈,后续会调研下这个JSON
库,如果能提供一个示例可以更快帮助提升组件库。
OK,感谢反馈,后续会调研下这个
JSON
库,如果能提供一个示例可以更快帮助提升组件库。
明天我给你个demo和改进方案
Demo如下⬇️,复现场景:替换图标数据时,A->B(如果B数据中含有formatter)则B中的formatter会被丢失 问题修复可以参考commit(备注:Android未测试,请作者自行测试): https://github.com/supervons/react-native-echarts-pro/commit/c396eac7fcb0d622d788bd7cfb201a7976b8f79a
const optionBar = {
grid: {
left: 100
},
xAxis: {
type: 'value',
min: 1,
max: 5,
interval: 1,
axisLabel: {
show: true,
formatter: function (value, index) {
if (value <= 1) return '差';
if (value === 3) return '中';
if (value === 5) return '优';
return '';
}
}
},
yAxis: {
triggerEvent: true,
type: 'category',
inverse: false,
data: ['完美订单占比', '历史营业额', '五分钟确认率'],
axisTick: {
show: true,
alignWithLabel: true,
},
axisLabel: {
formatter: function (value) {
const link = '去优化 >';
return '{title|' + value + '}\n'
+ '{link|' + link + '}';
},
margin: 20,
rich: {
title: {
color: '#1F1F1F',
},
link: {
color: '#004099',
lineHeight: 30
}
}
}
},
series: [
{
name: 'City Alpha',
type: 'bar',
data: [1, 2, 3],
itemStyle: {
color: '#004099'
},
barMaxWidth: '20',
barGap: 0.2,
barCategoryGap: 1,
},
{
name: 'City Beta',
type: 'bar',
data: [2, 3, 4],
itemStyle: {
color: '#2EBACA',
},
barMaxWidth: '20',
barCategoryGap: 1,
},
{
name: 'City Gamma',
type: 'bar',
data: [3, 4, 5],
itemStyle: {
color: 'red',
},
barMaxWidth: '20',
barCategoryGap: 1,
},
],
};
const optionLine = {
xAxis: {
type: 'category',
data: ['09/09', '09/12', '09/15', '09/18', '09/21', '09/24', '09/27', '09/30', '10/03', '10/06', '10/09'],
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
min: 0,
max: 6,
},
series: [
{
data: [1, 2, 3, 2.5, 2.2, 2, 2.2, 3, 3.5, 4, 4.15],
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'rect',
lineStyle: {
normal: {
color: 'red',
},
},
},
{
data: [1.5, 2, 2.2, 2.5, 3.2, 4, 3, 2, 2.2, 3, 4],
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'triangle',
},
],
tooltip: {
trigger: 'axis',
},
};
interface Props {
}
interface State {
option: Object;
}
export default class Home extends PureComponent<Props, State> {
private chartsRef = null;
private tag: Boolean = false;
constructor(props) {
super(props);
this.state = {
option: optionLine,
};
}
onTextClick = () => {
console.log('✅onTextClick');
const data = this.tag ? optionLine : optionBar;
this.tag = !this.tag;
// notMerge: true,
this.chartsRef && this.chartsRef.setNewOption(data, { notMerge: true });
};
setChartsRef = ref => {
this.chartsRef = ref;
};
render() {
return (
<View>
<Text onPress={this.onTextClick} >点我切换</Text>
<Charts
ref={this.setChartsRef}
height={600}
width={300}
option={this.state.option}
/>
</View>
);
}
}
链接中的问题仍然存在,辛苦看一下:https://github.com/supervons/react-native-echarts-pro/issues/18