本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react项目怎么增加echarts饼图?在React项目中使用echarts饼状图一、安装npm install echarts --save 二、引入
本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。
react项目怎么增加echarts饼图?
在React项目中使用echarts饼状图
一、安装
npm install echarts --save
二、引入
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie'; //饼状图
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
三、使用
componentDidMount() {
//环形图百分比
var huan_val = document.getElementsByClassName("huan")[0];
var chart = echarts.init(huan_val);
let option = {
color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"],
series: [{
name: "驾驶分析",
type: "pie",
radius: ['60%', '80%'],
avoidLabelOverlap: false,
label: {
nORMal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 33,
name: '慢速'
}, {
value: 26,
name: '低速'
}, {
value: 6,
name: '中速'
}, {
value: 2,
name: '高速'
}, {
value: 3,
name: '超速'
}, {
value: 30,
name: '怠速'
}]
}]
};
chart.setOption(option);
}
render(){
return(
<div className="huan"></div>
)}
四、结果
--结束END--
本文标题: react项目怎么增加echarts饼图
本文链接: https://www.lsjlt.com/news/206493.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0