Echarts---介绍/柱形图和扇形图

最新推荐文章于 2025-05-19 11:17:04 发布

IfIloseyou

最新推荐文章于 2025-05-19 11:17:04 发布

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/IfIloseyou/article/details/107982783

Echarts是一个基于JavaScript的图表库，适用于移动端和PC端，兼容多种浏览器，提供多种图表类型如折线图、柱状图、饼图等。本文介绍了如何从官网下载ECharts，通过cdn引入，以及如何初始化实例并创建柱状图和扇形图的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Echarts?
Echarts,它是一个JavaScript图表库，底层是依赖Canvas类库ZRender实现的，可以流畅的在移动端和PC端使用，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，生动，可交互，可高度个性化定制的数据可视化图表。说白了就是一个可以简便的画出你想要的任何图表。它拥有丰富图表类型：比如折线图、柱状图、地图、饼图、热力图、日历图等等
echarts官网

获取ECharts
你可以通过以下几种方式获取 ECharts。
①从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
②在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
③cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
我们去这个地址获取：地址

引入就和js的外部引入一样

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

绘制图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

 	// 基于准备好的dom，初始化echarts实例
		var mychart = echarts.init($('.box').get(0));
         // 指定图表的配置项和数据
        mychart.setOption({
        	//标题组件
            title:{
                text:'柱状图'
            },
            //图例组件
            legend:{
                data: ['姓名']
            },
            //柱状图的x轴，data是x轴上的数据是个数组
            xAxis:{
                data:['李易峰','胡歌','彭于晏','郭富城','杨洋','范丞丞','陈赫']
            },
            //柱状图的y轴，因为会按照数据自动生成所以y轴上面什么也不写但是不能不写这行代码
            yAxis:{},
            //系列列表。每个系列通过 type 决定自己的图表类型
            series:{
            	//这个的名字要和图例的名字一样
                name : '姓名',
                //柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
                //这个type是你想要什么图就写什么图的值
                type : 'bar',
                data : [100000,20000,30000,40000,50000,12000,34000],
                //y轴上的数据
            }
        });

在这里插入图片描述

这个案例是打开页面在50条数据中随机生成20条数据并且不能重复的柱状图

 var arr = ['王祖贤','李若彤','朱茵','温碧霞','邱淑贞','周慧敏','赵雅芝','梅艳芳',
        '刘亦菲','舒畅','佟丽娅','毛晓彤','唐艺昕','万茜','韩雪','李沁','金晨','陈瑶',
        '刘诗诗','景甜','张钧甯','李彩桦','林允儿','张萌','张嘉倪','白冰','胡冰卿','杨幂','唐嫣','郭碧婷',
        '陈楚生', '付辛博', '井柏然','乔任梁','俞灏明','王栎鑫','陈柏霖','陈冠希','陈浩民','陈小春',
        '周传雄','周华健','周杰伦','周启生','周润发','周星驰','周渝民','朱孝天','甄子丹','郑少秋'];
        var arr2 = [100,20,30,40,120,120,130,150,160,170,
        100,200,300,400,500,600,100,200,300,400,
        101,102,103,104,150,190,140,150,300,200,
        400,500,600,200,100,45,67,78,89,99,
        100,300,400,550,880,400,200,700,100,1000];
        function ArrayToHeavy(arr){
                //新建一个空数组
                var newArr = [];
                for(var i = 0; i < arr.length; i++ ){
                    //遍历传入的数组，查找传入数组的值是否存在新数组中
                    if(newArr.indexOf(arr[i]) === -1){
                        //不存在就把值push到新数组
                        newArr.push(arr[i]);
                    }
                }
                //返回新的数组
            return newArr;
        }
       
        
        
        var index = [];
        while (true) {
            var r = Math.floor(Math.random()*50);
            index.push(r);
            var c = ArrayToHeavy(index);
            if(c.length == 20){
                index = c;
                break;
            }
        }
        var xarr = [],sarr = [];
        for(var i = 0; i < index.length; i++){
            xarr.push(arr[index[i]]);
            sarr.push(arr2[index[i]]);
        }
        
        // 基于准备好的dom，初始化echarts实例
        var mychart = echarts.init($('.box').get(0));
         // 指定图表的配置项和数据
        mychart.setOption({
        	//标题组件
            title:{
                text:'柱状图'
            },
            //图例组件
            legend:{
                data: ['姓名']
            },
            //柱状图的x轴，data是x轴上的数据是个数组
            xAxis:{
                // data:['李易峰','胡歌','彭于晏','郭富城','杨洋','范丞丞','陈赫']
                data : xarr,
            },
            //柱状图的y轴，因为会按照数据自动生成所以y轴上面什么也不写但是不能不写这行代码
            yAxis:{},
            //系列列表。每个系列通过 type 决定自己的图表类型
            series:{
            	//这个的名字要和图例的名字一样
                name : '姓名',
                //柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
                //这个type是你想要什么图就写什么图的值
                type : 'bar',
                // data : [100000,20000,30000,40000,50000,12000,34000],
                //y轴上的数据
                data : sarr
            }
        });

通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的扇形图，下面是完整代码。
在这里插入图片描述

//扇形图是没有x和y轴的所以不用写
 var mychart = echarts.init($('.box').get(0));
        mychart.setOption({
            title:{
                text:'扇形'
            },
            legend:{
                data: ['姓名'],
            },
            series:{
                name : '姓名',
                //这个是扇形图的值
                type : 'pie',
                data : [
                    {
                        value:325,//数据
                        name:'伊泽瑞尔'//内容
                    },
                    {
                        value:200,
                        name:'薇恩'
                    },
                    {
                        value:100,
                        name:'泽拉斯'
                    }]
            }
        })