React使用echarts
引入
npm install --save echarts-for-react
npm install --save echarts
使用
<ReactEChartsoption={option}notMerge={true}lazyUpdate={true}style={{"width": "100%","height": "800px"}}theme={"theme_name"}/>
// 主组件
设置option
const option = {title: {text: '接口使用情况统计',subtext: '所有接口使用情况',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '80%',center: ["50%", "50%"],data: originalData.map((item) => {return {name : item.name,value : item.totalNum}}),emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},}]};
修改Echarts的整体大小
能够直接通过style修改
<ReactEChartsoption={option}notMerge={true}lazyUpdate={true}style={{"width": "100%","height": "800px"}}theme={"theme_name"}/>
)
