饼图/线图/柱状图/横向柱状图/线图+柱状图

 

准备

不需要别的东西，只要引入echarts.min.js文件就可以了

可以直接引入

<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>

 

也可以下载之后添加到项目中，下载地址：https://download.csdn.net/download/qq_45476500/12753405

文章中出现的案例也都在文件里面，大家可以下载一下看看效果，免费，不用积分

---

 

一、HTML代码

先把html代码写好

<div id="pie" style="width: 600px;height:400px;"></div><!--饼状图-->
        <div id="thread" style="width: 600px;height:400px;"></div><!--线图-->
        <div id="histogram" style="width: 600px;height:400px;"></div><!--柱状图-->
        <div id="thread_histogram" style="width: 600px;height:400px;"></div><!--线图+柱状图-->
        <div id="histogram_num" style="width: 600px;height:400px;"></div><!--柱状图对比-->
        <div id="histograms" style="width: 600px;height:400px;"></div><!--横向柱状图-->

这就是我要做出来的图表

二、写js代码

1.饼图

        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById('pie'));
            
             var option = {
                 tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b}: {c} ({d}%)"
                 },
                 title: {
                     text: ' 一周内每天上课数量',//图表名称
                     left:'center',
                      },
                //颜色可以不设置,它也会自动分配
                 color:['#245576','#347AAA','#7DB3D8','#BED9EB','#F7C709'],
                 legend: {
                 orient: 'horizontal',
                right:0    ,
                bottom:0,
                     data: ['周一', '周二', '周三', '周四','周五'],
                    left:'center',
                 },
                 series: [{
                     name: '上课数量（节）',
                     type: 'pie',//饼图
                     //radius: ['30%', '70%'],//加上这个就能变成环形图
                     avoidLabelOverlap: false,
                     data: [{value: 4,name: '周一'},
                             {value: 2,name: '周二'},
                             {value: 8,name: '周三'},
                             {value: 6,name: '周四'},
                             {value: 2,name: '周五'}
                     ]
                 }]
             };
             
             if(option && typeof option === "object") {
                 myChart.setOption(option, true);
             }
        </script>

2.线图

        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById('thread'));
            var option = {
                 title: {
                     text: '一周内每天上课数量',//图表名称
                     left:'center'               
                     },
                 tooltip: {},
                 color:'#7DB3D8',
                 legend: {
                     left:'center'    ,
                     bottom:0,
                     data:['上课数量（节）']//数据说明
                 },
                 xAxis: {
                     data: ['周一', '周二', '周三', '周四','周五']
                 },
                 yAxis: {},
                 series: [{
                     name: '上课数量（节）',
                     type: 'line',
                     barWidth : 20,
                     data: [4, 2, 8, 6, 2],
                 }]
             };
            myChart.setOption(option);
        </script>

3.柱状图

柱状图其实和线图是一样的，只是变一个属性就可以，series中type的属性变为：bar

        <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('histogram'));
                var option = {
                     title: {
                         text: '一周内每天上课数量',//图表名称
                         left:'center'               
                         },
                     tooltip: {},
                     color:'#7DB3D8',
                     legend: {
                         left:'center'    ,
                         bottom:0,
                         data:['上课数量（节）']//数据说明
                     },
                     xAxis: {
                         data: ['周一', '周二', '周三', '周四','周五']
                     },
                     yAxis: {},
                     series: [{
                         name: '上课数量（节）',
                         type: 'bar',
                         barWidth : 20,
                         data: [4, 2, 8, 6, 2],
                     }]
                 };
                myChart.setOption(option);
            </script>

4.线图+柱状图

<script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('thread_histogram'));
                var option = {
                     title: {
                         text: '一周内每天上课数量',//图表名称
                         left:'center'               
                         },
                     tooltip: {},
                     color:'#7DB3D8',
                     legend: {
                         left:'center'    ,
                         bottom:0,
                         data:['英语（节）','数学（节）']//数据说明
                     },
                     xAxis: {
                         data: ['周一', '周二', '周三', '周四','周五']
                     },
                     yAxis: {},
                     series: [{
                         name: '英语（节）',
                         type: 'bar',
                         barWidth : 20,
                         data: [4, 2, 8, 6, 2],
                     },{
                         name: '数学（节）',
                         type: 'line',
                         barWidth : 20,
                         data: [5, 1, 5, 3, 2],
                     }]
                 };
                myChart.setOption(option);
            </script>

 

5.多条柱状图

        <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('histogram_num'));
                var option = {
                     title: {
                         text: '一周内每天上课数量',//图表名称
                         left:'center'               
                         },
                     tooltip: {},
                     //color:'#7DB3D8',
                     legend: {
                         left:'center'    ,
                         bottom:0,
                         data:['英语（节）','数学（节）']//数据说明
                     },
                     xAxis: {
                         data: ['周一', '周二', '周三', '周四','周五']
                     },
                     yAxis: {},
                     series: [{
                         name: '英语（节）',
                         type: 'bar',
                         barWidth : 20,
                         data: [4, 2, 8, 6, 2],
                     },{
                         name: '数学（节）',
                         type: 'bar',
                         barWidth : 20,
                         data: [5, 1, 5, 3, 2],
                     }]
                 };
                myChart.setOption(option);
            </script>

 

6.横向柱状图

        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('histograms'));
            //初始化数据
            var category = ['周一', '周二', '周三', '周四','周五'];
            var barData = [4, 2, 8, 6, 2];
            var option = {
                tooltip: {},
                title: {
                    text: '一周内每天上课数量',
                    left:'center',
                },
                legend: {
                top:30,
                data: ['上课数量（节）']
                },
                
                xAxis: {},
                yAxis: {
                    type: 'category',
                    data: category,
                 },
                series: [
                    {
                        name: '上课数量（节）',
                        type: 'bar',
                        data: barData,
                        barWidth: 14,
                        
                    }
                ]
            };
            myChart.setOption(option);
        </script>

1.     var myChart = echarts.init(document.getElementById('histograms'));
               //初始化数据
               var category = ['周一', '周二', '周三', '周四','周五'];
               var barData = [4, 2, 8, 6, 2];
               var option = {
                   tooltip: {},
                   title: {
                       text: '一周内每天上课数量',
                       left:'center',
                   },
                   legend: {
                   top:30,
                   data: ['上课数量（节）']
                   },
                   
                   xAxis: {},
                   yAxis: {
                       type: 'category',
                       data: category,
                    },
                   series: [
                       {
                           name: '上课数量（节）',
                           type: 'bar',
                           data: barData,
                           barWidth: 14,
                           
                       }
                   ]
               };
               myChart.setOptio
   

这就是我要做出来的图表

二、写js代码

1.饼图

1.  
   <script type="text/javascript">
2.  
   // 基于准备好的dom，初始化echarts实例
3.  
   var myChart = echarts.init(document.getElementById('pie'));
4.  
    
5.  
   var option = {
6.  
   tooltip: {
7.  
   trigger: 'item',
8.  
   formatter: "{a} <br/>{b}: {c} ({d}%)"
9.  
   },
10.  
    title: {
11.  
    text: ' 一周内每天上课数量',//图表名称
12.  
    left:'center',
13.  
    },
14.  
    //颜色可以不设置,它也会自动分配
15.  
    color:['#245576','#347AAA','#7DB3D8','#BED9EB','#F7C709'],
16.  
    legend: {
17.  
    orient: 'horizontal',
18.  
    right:0 ,
19.  
    bottom:0,
20.  
    data: ['周一', '周二', '周三', '周四','周五'],
21.  
    left:'center',
22.  
    },
23.  
    series: [{
24.  
    name: '上课数量（节）',
25.  
    type: 'pie',//饼图
26.  
    //radius: ['30%', '70%'],//加上这个就能变成环形图
27.  
    avoidLabelOverlap: false,
28.  
    data: [{value: 4,name: '周一'},
29.  
    {value: 2,name: '周二'},
30.  
    {value: 8,name: '周三'},
31.  
    {value: 6,name: '周四'},
32.  
    {value: 2,name: '周五'}
33.  
    ]
34.  
    }]
35.  
    };
36.  
     
37.  
    if(option && typeof option === "object") {
38.  
    myChart.setOption(option, true);
39.  
    }
40.  
    </script>

2.线图

1.  
   <script type="text/javascript">
2.  
   // 基于准备好的dom，初始化echarts实例
3.  
   var myChart = echarts.init(document.getElementById('thread'));
4.  
   var option = {
5.  
   title: {
6.  
   text: '一周内每天上课数量',//图表名称
7.  
   left:'center'
8.  
   },
9.  
   tooltip: {},
10.  
    color:'#7DB3D8',
11.  
    legend: {
12.  
    left:'center' ,
13.  
    bottom:0,
14.  
    data:['上课数量（节）']//数据说明
15.  
    },
16.  
    xAxis: {
17.  
    data: ['周一', '周二', '周三', '周四','周五']
18.  
    },
19.  
    yAxis: {},
20.  
    series: [{
21.  
    name: '上课数量（节）',
22.  
    type: 'line',
23.  
    barWidth : 20,
24.  
    data: [4, 2, 8, 6, 2],
25.  
    }]
26.  
    };
27.  
    myChart.setOption(option);
28.  
    </script>

3.柱状图

柱状图其实和线图是一样的，只是变一个属性就可以，series中type的属性变为：bar

1.  
   <script type="text/javascript">
2.  
   // 基于准备好的dom，初始化echarts实例
3.  
   var myChart = echarts.init(document.getElementById('histogram'));
4.  
   var option = {
5.  
   title: {
6.  
   text: '一周内每天上课数量',//图表名称
7.  
   left:'center'
8.  
   },
9.  
   tooltip: {},
10.  
    color:'#7DB3D8',
11.  
    legend: {
12.  
    left:'center' ,
13.  
    bottom:0,
14.  
    data:['上课数量（节）']//数据说明
15.  
    },
16.  
    xAxis: {
17.  
    data: ['周一', '周二', '周三', '周四','周五']
18.  
    },
19.  
    yAxis: {},
20.  
    series: [{
21.  
    name: '上课数量（节）',
22.  
    type: 'bar',
23.  
    barWidth : 20,
24.  
    data: [4, 2, 8, 6, 2],
25.  
    }]
26.  
    };
27.  
    myChart.setOption(option);
28.  
    </script>

4.线图+柱状图

1.  
   <script type="text/javascript">
2.  
   // 基于准备好的dom，初始化echarts实例
3.  
   var myChart = echarts.init(document.getElementById('thread_histogram'));
4.  
   var option = {
5.  
   title: {
6.  
   text: '一周内每天上课数量',//图表名称
7.  
   left:'center'
8.  
   },
9.  
   tooltip: {},
10.  
    color:'#7DB3D8',
11.  
    legend: {
12.  
    left:'center' ,
13.  
    bottom:0,
14.  
    data:['英语（节）','数学（节）']//数据说明
15.  
    },
16.  
    xAxis: {
17.  
    data: ['周一', '周二', '周三', '周四','周五']
18.  
    },
19.  
    yAxis: {},
20.  
    series: [{
21.  
    name: '英语（节）',
22.  
    type: 'bar',
23.  
    barWidth : 20,
24.  
    data: [4, 2, 8, 6, 2],
25.  
    },{
26.  
    name: '数学（节）',
27.  
    type: 'line',
28.  
    barWidth : 20,
29.  
    data: [5, 1, 5, 3, 2],
30.  
    }]
31.  
    };
32.  
    myChart.setOption(option);
33.  
    </script>

5.多条柱状图

1.  
   <script type="text/javascript">
2.  
   // 基于准备好的dom，初始化echarts实例
3.  
   var myChart = echarts.init(document.getElementById('histogram_num'));
4.  
   var option = {
5.  
   title: {
6.  
   text: '一周内每天上课数量',//图表名称
7.  
   left:'center'
8.  
   },
9.  
   tooltip: {},
10.  
    //color:'#7DB3D8',
11.  
    legend: {
12.  
    left:'center' ,
13.  
    bottom:0,
14.  
    data:['英语（节）','数学（节）']//数据说明
15.  
    },
16.  
    xAxis: {
17.  
    data: ['周一', '周二', '周三', '周四','周五']
18.  
    },
19.  
    yAxis: {},
20.  
    series: [{
21.  
    name: '英语（节）',
22.  
    type: 'bar',
23.  
    barWidth : 20,
24.  
    data: [4, 2, 8, 6, 2],
25.  
    },{
26.  
    name: '数学（节）',
27.  
    type: 'bar',
28.  
    barWidth : 20,
29.  
    data: [5, 1, 5, 3, 2],
30.  
    }]
31.  
    };
32.  
    myChart.setOption(option);
33.  
    </script>

6.横向柱状图

1.  
   <script type="text/javascript">
2.  
   var myChart = echarts.init(document.getElementById('histograms'));
3.  
   //初始化数据
4.  
   var category = ['周一', '周二', '周三', '周四','周五'];
5.  
   var barData = [4, 2, 8, 6, 2];
6.  
   var option = {
7.  
   tooltip: {},
8.  
   title: {
9.  
   text: '一周内每天上课数量',
10.  
    left:'center',
11.  
    },
12.  
    legend: {
13.  
    top:30,
14.  
    data: ['上课数量（节）']
15.  
    },
16.  
     
17.  
    xAxis: {},
18.  
    yAxis: {
19.  
    type: 'category',
20.  
    data: category,
21.  
    },
22.  
    series: [
23.  
    {
24.  
    name: '上课数量（节）',
25.  
    type: 'bar',
26.  
    data: barData,
27.  
    barWidth: 14,
28.  
     
29.  
    }
30.  
    ]
31.  
    };
32.  
    myChart.setOption(option);
33.  
    </script>