native react 折线图_react native使用Echarts

本文介绍如何在 React Native 应用中利用 ECharts 组件创建折线图,包括设置提示框、图例、数据和颜色等关键配置,以实现动态的月份销量展示。
摘要由CSDN通过智能技术生成

render(){const option ={

tooltip: {//定义环形图item点击弹框

trigger: 'item',

formatter:"{a}
{b}: {c} ({d}%)"},

legend: {//定义右边的菜单目录效果

orient: 'vertical',

x: deviceWidth*0.5,

y:'center',

right:50,//width:90

itemGap:4.50,

color:'#666666',

itemWidth:12,

itemHeight:12,

data:legend//这里的data要和下面外层的data的name相对应,否则会显示为空//data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

},

series: [{

name:'月份销量',

type:'pie',

hoverAnimation:false,

radius: ['58%', '90%'], //设置环形图展示半径空心圆环

avoidLabelOverlap: false,

center: ['25%', '50%'], //这里可以设置环形图展示的位置

label: {

normal: {

show:false,

position:'center'},

emphasis: {//设置点击展示环形图内部文本样式

show: true,

textStyle: {

color:'#666666',

fontSize:'11',

fontWeight:'bold'}

}

},

labelLine: {

normal: {

show:false}

},

data:monthdata//这里的data是定义环形图的展示内容//data:[{value:2.00, name:'1月'}, {value:3.00, name:'2月'}, {value:3.00, name:'3月'}, {value:2.00, name:'4月'}, {value:5.00, name:'5月'}, {value:7.00, name:'6月'},//{value:3.00, name:'7月'},{value:7.00, name:'8月'},{value:25.00, name:'9月'}, {value:3, name:'10月'}, {value:3, name:'11月'}, {value:3, name:'12月'}]

}],//可以根据下标来定义item内容的颜色

color:['#01a2ea', '#8ac99c','#23ac38','#b4d467','#ffff00','#fdcc89','#f19049','#ea6941','#f95353','#cc5ac0','#ac5fd7','#5570b5']

};return(

。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值