React使用echarts
引入
npm install --save echarts-for-react
npm install --save echarts
使用
<ReactECharts
option={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修改
<ReactECharts
option={option}
notMerge={true}
lazyUpdate={true}
style={{
"width": "100%",
"height": "800px"
}}
theme={"theme_name"}
/>