之前遇到的一个问题有个朋友第一次接触echarts领导要求封装但是他没有思路，在网上也没有找到近似的案例。这里分了2片文章这篇是在js中使用的。另一篇是把echarts在vue制作成组件，其实很简单参考一下有个思路就很容易了
1.在js引入echarts（怎么引入请查官网）
2.新建一个getEchats.js
/**
*饼图
*/
function pieEcharts(pieId, pieData) {
var myChart = echarts.init(document.getElementById(pieId));
var option = {
// 饼图颜色
color: [
"#bf19ff",
"#854cff",
"#5f45ff",
"#02cdff",
"#314976",
"#f9e264",
"#f47a75",
"#009db2",
"#024b51- 0780cf",
"#765005",
],
series: [
{
type: "pie",
radius: "55%",
center: ["40%", "50%"],
// 饼图的数据
data: pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
myChart.setOption(option);
}
3.在html里给一个容器 ，每次使用的时候new一下这个方法就可以其中很多参数都是可以传的例如：颜色、圆心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="echarts.min.js"></script>
<script src="getEcharts.js"></script>
</head>
<body>
<div id="mainPie" style="width: 600px; height: 600px; border: 1px #eeeeee solid;"></div>
<script>
var pieData = [
{ value: 35, name: "苏州" },
{ value: 40, name: "南京" },
{ value: 24, name: "徐州" },
{ value: 25, name: "扬州" },
{ value: 20, name: "常州" },
];
var pie = new pieEcharts("mainPie", pieData);
</script>
</body>
</html>
