基于echarts.js实现简单的饼状图的绘制_js饼状图

使用echarts进行数据可视化展示（饼状图）

一、echarts的配置

• 使用npm命令进行安装echarts(方法一)

npm init
npm install echarts --save
1
2

引入echarts.min.js的文件

<script src="./node_modules/echarts/dist/echarts.min.js"></script>
1

注意：需要配置node环境

• 下载echarts.js的文件包，引入echarts.min.js的文件（方法二）

<script src="./echarts/echarts.min.js"></script>
1

二、准备一个数据可视化展示的容器

<div id="main" style="width:600px;height:600px"></div>
1

三、创建并初始化echarts实例

var myEchart = echarts.init(document.querySelector('#main'));
1

四、指定图表的配置项和数据

var option = {
            //设置
            title:{
                text:'某某班学生当月的考试成绩分布',
                subtext:'9月',
                x:'center'
            },
            tooltip:{
                trigger:'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //对图例组件的不同系列进行标记说明
            legend:{
                orient:'vertical',  //设置图例列表的布局朝向
                left:'left',
                data:['A(90以上)','B(80-89)','C1(70-79)','C2(60-69)','D(0-59)']
            },
            //系列列表
            series:[
                //系列1
                {
                    name:'学生成绩分布',
                    type:'pie',    //数据统计图的类型
                    //放置要展示的数据
                    data:[
                        {value:3,name:'A(90以上)'},
                        {value:11,name:'B(80-89)'},
                        {value:25,name:'C1(70-79)'},
                        {value:23,name:'C2(60-69)'},
                        {value:8,name:'D(0-59)'}
                    ]
                }
            ]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

五、使用刚指定的配置项和数据显示图表。

myEchart.setOption(option);
1

六、效果展示