I met a problem before. A friend contacted the leader of Echarts for the first time and asked for encapsulation, but he had no idea and could not find similar cases on the Internet. There are 2 pieces of articles here. This one is used in JS. Another article is to make echarts into components in vue, actually very simple reference to have an idea is very easy

1. Introduce echarts in JS

2. Create a getechats.js file

/** * pie chart */ function pieEcharts(pieId, pieData) {var myChart = echarts.init(document.getelementById (pieId)); Var option = {// [ "#bf19ff", "#854cff", "#5f45ff", "#02cdff", "#314976", "#f9e264", "#f47a75", "#009db2", "#024b51- 0780cf", "#765005", ], series: [{type: "pie", radius: "55%", Center: ["40%", "50%"], // {shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)",},},},],}; myChart.setOption(option); }Copy the code

3. Create a container in HTML, and click “new” every time you use it. Many of the parameters can be passed, such as: color, center

<! 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: "Xuzhou"}, {value: 25, name: "yangzhou"}, {value: 20, name: "changzhou"},]; var pie = new pieEcharts("mainPie", pieData); </script> </body> </html>Copy the code