React使用echarts并且修改echarts图大小

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"}/>