Ecarts的基础示例（条形图，堆积柱状图，瀑布图，饼图，环形图）

最新推荐文章于 2024-06-20 09:30:03 发布

小白学data

最新推荐文章于 2024-06-20 09:30:03 发布

阅读量1k

点赞数 23

文章标签： echarts 大数据数据可视化 html5 javascript css 前端

本文链接：https://blog.csdn.net/weixin_68473774/article/details/136858431

版权

本文介绍了ECharts库的五个主要模块，包括HTML中引入ECharts库、准备div容器、初始化容器、设置图形配置项和数据，以及展示如何通过配置选项绘制不同类型的图表，如条形图、堆积柱状图、瀑布图、饼图和环形图。

摘要由CSDN通过智能技术生成

Ecarts一共分为5大模块

(1)、在html文件中，引入echartsjs库文件。

ECharts 的引入方式像 JavaScript 库文件、样，使用s#标签引入即可，如代码 2-1所示,此处需要注意 echartsjs 库文件的存放路如果找不到存放路径那么将无法显示图表。代码2-1中最下面两行代码通过CDN方式引)库文件，这种引入方式的好处是不需下载echartsjs库文件，但需实时连接网络。

引入 ECharts 库文件

<!-引入 ECharts 脚本-->
scnipt type="text/javascript" src="./js/echarts js"><script>

<-也可以通过CDN引入 ECharts 文件 -->
<script src="https:/cdn.bootcss.com/echarts/5.3 .0 /echarts.js"></script>

(2）、准备div容器。

EChans 图形是基于 DOM 进行绘制的，所以在绘制图形前要先绘制一个 DOM 容器 div 来承载图形，添加 div 容器后，需要设置它的基本属性:宽(weigh)与高①cigh)。这两个属性决定了所绘制图表的大小。绘制一个 div 容器并设置容器的样式，容器可以设置的属性并不仅限于宽与高，还可以设置其他属性，如定位等。

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->

    <div id="main" style="width: 600psx; height: 400px"></div>
    
</body>

(3)、使用init()方法初始化容器。

通过步骤(1)引入echarts.js库文件后，会自动创建个全局变量 echarts,全局变量 echarts 有若千方法。基于准备好的 DOM,通过 echarts.imnitO方法可以初始化 ECharts 实例。

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600psx; height: 400px"></div>
    
    <script>
                // 基于准备好的DOM，初始化ECharts图表
        var myChart =echarts.init(document.getElementById("main"))
       
    </script>
</body>

(4)、设置图形配置项和数据。

option 的设置是 ECharts 中的重点和难点，option 的配置项参数等的设置决定了绘制什么样的图形。在下面的示例里将会对 option 的配置项参数进行详细说明，下面的示例里会通过配置 option 项绘制简单的条形图，柱状图，瀑布图，饼图，环形图的五种示例。

    <script>
                // 基于准备好的DOM，初始化ECharts图表
        var myChart =echarts.init(document.getElementById("main"))
                // 指定图表的配置项和数据
        var option = {
            
        }

(5)、使用指定的配置项和数据,显示渲染图表。

在绘制 ECharts 图表的过程中,setOptior是执行绘制动作的方法,为初始化的 myChart 设置 option 进行图表绘制。

    <script>
                // 基于准备好的DOM，初始化ECharts图表
        var myChart =echarts.init(document.getElementById("main"))
                // 指定图表的配置项和数据
        var option = {
            
        }
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

示例一、条形图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- --引入ECharts脚本-- -->
    <script src="../js/echarts.min.js"></script> 
</head>
<body>
    <!-- 为Echarts准备应该具备大小的dom -->
    <div id="main" style="height: 400px;width: 600px;"></div>
    <script>
        var datay=['自愿','微信推广','节日活动','团购推销']   //入会方式
        var dataxn=[2,0,2,1]  //男生的入会方式人数
        var dataxv=[3,2,2,2]  //女生的入会方式人数
        var mychat =echarts.init(document.getElementById("main"))  //使用了init（）方法初始化容器
        option = {
            title:{                 //设置标题
                text:'入会渠道',    //主标题
            },      
            legend:{                //设置图例的组件
                data:['男','女']
            },
            xAxis: {            //x轴坐标系
            type: 'value'
            },
            yAxis: {            //y轴坐标系
            type: 'category',
            data: datay         
            },
            tooltip: {              //浮窗效果
                trigger: 'axis',    
                axisPointer: { // 设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
            toolbox:{       //工具箱
                show: true, 
                feature:{
                    
                    magicType:{
                        type:['line','bar','stack','tiled'],
                        title:{                 //设置标题
                           line:'切换折线图',
                           bar:'切换柱状图',
                           stack:'切换堆积图',
                        }, 
                    },
                    saveAsImage: {
                        show: true,
                        title:'保存'
                    }
                }
            },
            series: [               //系类类表
                {
                name:'男',
                data: dataxn,
                type: 'bar',        //柱状图
                itemStyle:{          
                    color:'#4590e3'  //设置颜色样式
                }
                },
                {
                name:'女',
                data: dataxv,
                type: 'bar',        //柱状图
                itemStyle:{
                    color:'#00ff9c'  //设置颜色样式
                }
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表
        mychat.setOption(option)
    </script>
</body>
</html>

效果展示

示例二、堆积柱状图柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- --引入ECharts脚本-- -->
     <script src="../js/echarts.min.js"></script> 
    </head>
    <body>
        <!-- 为Echarts准备应该具备大小的dom -->
        <div id="main" style="height: 400px;width: 600px;"></div>
        <script>
            var mychat =echarts.init(document.getElementById("main"))  //使用了init（）方法初始化容器
            var datax=['20岁~29岁','30岁~39岁','40岁~49岁']  
            var datayn=[4,0,1]      //男生的人数
            var datayv=[6,3,0]      //女生的人数
            option = {
                title:{                 //设置标题
                text:'会员年龄',        //主标题
            },      
            legend:{                //设置图例的组件
                data:['男','女']
            },
            xAxis: { 
                type: 'category',
            data: datax       
            },
            yAxis: {            //y轴坐标系
                type: 'value'
            },
            tooltip: {              //浮窗效果
                trigger: 'axis',    
                axisPointer: {
                type: 'shadow'
                },
            },
            toolbox:{       //工具箱
                show: true, 
                feature:{
                    
                    magicType:{
                        type:['line','tiled'],
                        title:{                 //设置标题
                           line:'切换折线图',
                        }, 
                    },
                    saveAsImage: {
                        show: true,
                        title:'保存'
                    }
                }
            },
         series: [               //系类类表
                {
                name:'男',
                data: datayn,
                type: 'bar',      //柱状图
                stack:'年龄',
                itemStyle:{          
                    color:'#4590e3'  //设置颜色样式
                }
                },
                {
                name:'女',
                data: datayv,
                stack:'年龄',
                type: 'bar',        //柱状图
                itemStyle:{
                    color:'#00ff9c'  //设置颜色样式
                }
                }
            ]
            }
            // 使用刚指定的配置项和数据显示图表
            mychat.setOption(option)
        </script>
</body>
</html>

效果展示

示例三、瀑布图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- --引入ECharts脚本-- -->
    <script src="../js/echarts.min.js"></script> 
</head>
<body>
     <!-- 为Echarts准备应该具备大小的dom -->
    <div id="main" style="height: 400px;width: 600px;"></div>
    <script>
        var mychat =echarts.init(document.getElementById("main"))  //使用了init（）方法初始化容器
        var  datax=['广州','佛山','深圳','东莞']
        var  datay=[3076,2275,1181,546]
        option={
            title:{
                text:'城市',
                subtext:'消费总金额'
            },
            legnd:{
                data:['消费']
            },
            toolbox: {        //工具箱栏
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {            //工具栏里的显示数据图标
                        show: true,
                        readOnly: false,
                        title:'显示数据'
                    },
                    restore: {          //工具栏里的刷新图标
                        show: true,
                        title:'刷新'
                    },
                    saveAsImage: {      //工具栏里的保存图标
                        show: true,
                        title:'保存'
                    }
                }
            },
            tooltip: {        //浮窗效果
             trigger: 'axis',
             axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {    //显示堆叠的数据,数据格式
                    var tar = params[0];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
                },
            xAxis:{                 //x坐标轴
                type:'category',
                data:datax
            },
            yAxis:{                  //y坐标轴
                type:'value'
            },
            series:[                //系类类表图表类型
            {
                name:'辅助',
                data: datay,
                type: 'bar',
                stack: '总消费',       //堆叠效果
                itemStyle: {
                    borderColor: 'transparent',  //透明色
                    color: 'transparent'
                },
                data:[0,801,1094,635],
                emphasis: {
                itemStyle: {
                borderColor: 'transparent',
                color: 'bule'
                }
                }
            },
            {   
            name:'消费',
            data: datay,
            type: 'bar',
            stack: '总消费',      //堆叠效果
            label: {
            show: true,
            position: 'inside'
        },
        data:datay
    }
            ]
        }
        // 使用刚指定的配置项和数据显示图表
        mychat.setOption(option)
    </script> 
</body>
</html>

效果展示

示例四、饼图

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600psx; height: 400px"></div>
    <script type="text/javascript">
        // 基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        var option = {
            title: { // 配置标题组件
                text: '会员入会渠道分布情况', // 设置主标题
                subtext: '', // 设置次标题
                left: 'center' // 设置主次标题都左右居中
            },
            tooltip: { // 配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: { // 配置图例组件
                orient: 'vertical', // 设置垂直排列
                left: 62, // 设置图例左边距
                top: 22, // 设置图例顶边距
                data: ['自愿', '微信推广', '团购促销', '节日活动']
            },
            toolbox: { // 配置工具箱组件
                show: true, // 设置工具箱组件是否显示
                left: 444, // 设置工具箱左边距
                top: 28, // 设置工具箱顶边距
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [ // 配置数据系列组件
                {
                    name: '入会方式',
                    type: 'pie',
                    radius: '66%', // 设置半径
                    center: ['58%', '55%'], // 设置圆心
                    clockWise: true,
                    data: [ // 设置数据的具体值
                        {
                            value: 5,
                            name: '自愿'
                        },
                        {
                            value: 2,
                            name: '微信推广'
                        },
                        {
                            value: 3,
                            name: '团购促销'
                        },
                        {
                            value: 4,
                            name: '节日活动'
                        }
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

效果展示

示例五、环形图

环形图效果其实只需要在饼图效果series里面r添加adius效果即可

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600psx; height: 400px"></div>
    <script type="text/javascript">
        // 基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        var option = {
            title: { // 配置标题组件
                text: '会员入会渠道分布情况', // 设置主标题
                subtext: '', // 设置次标题
                left: 'center' // 设置主次标题都左右居中
            },
            tooltip: { // 配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: { // 配置图例组件
                orient: 'vertical', // 设置垂直排列
                left: 62, // 设置图例左边距
                top: 22, // 设置图例顶边距
                data: ['自愿', '微信推广', '团购促销', '节日活动']
            },
            toolbox: { // 配置工具箱组件
                show: true, // 设置工具箱组件是否显示
                left: 444, // 设置工具箱左边距
                top: 28, // 设置工具箱顶边距
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [ // 配置数据系列组件
                {
                    name: '入会方式',
                    type: 'pie',
                    radius: '66%', // 设置半径
                    radius: ['20%', '60%'],  //添加饼图空心效果,圆环形状
                    center: ['58%', '55%'], // 设置圆心
                    clockWise: true,
                    data: [ // 设置数据的具体值
                        {
                            value: 5,
                            name: '自愿'
                        },
                        {
                            value: 2,
                            name: '微信推广'
                        },
                        {
                            value: 3,
                            name: '团购促销'
                        },
                        {
                            value: 4,
                            name: '节日活动'
                        }
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

效果展示