E-Charts的基本使用

最新推荐文章于 2024-05-28 11:11:34 发布
最新推荐文章于 2024-05-28 11:11:34 发布
阅读量2.3k 收藏 6
点赞数 1
分类专栏： 前端 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RIGHT_LEFT_LONG/article/details/104950822
版权

E-Chart首先放一个E-Chart的官方文档，对于E-Chart的所有使用详情、方法这里都有E-Chart官方文档：https://www.echartsjs.com/zh/tutorial.htmlE-
E-Chart下载地址：
GitHub下载地址：https://github.com/apache/incubator-echarts/releases
网盘下载地址：https://pan.baidu.com/s/1ShSe8C155EIjXNtSlSxsQA
教程相关代码（网盘）：https://pan.baidu.com/s/1a7x3Ufa_SnoLpH2St6yP_g

简单使用

<!DOCTYPE html>
<html lang="en">
<head>    
	<meta charset="UTF-8">    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
	<meta http-equiv="X-UA-Compatible" content="ie=edge">    
	<title>E-Chart教程</title>    
	<!-- 引入echart的js文件 -->    
	<script src="js/echarts.min.js"></script>
</head>
<body>    
	<!-- 添加一个显示图表的容器，并设置容器宽高（必须设置宽高，否则图表将无法显示出来） -->    
	<div id="chart" style="width: 400px;height: 400px;">    </div>
	<script>    
		//通过echarts封装好的代码实例化E-Chart的实例（一个图表对象）    
		var chart = echarts.init(document.getElementById('chart'));    
		//定义一个配置对象用于配置图表    
		var option = {        
			// 设置图表标题        
			title: {        
				text: 'E-Charts教程'        
			},        
			// 设置图表图例        
			legend: {            
				data:['销量']        
			},        
			// 设置X轴的值（坐标点描述,必须设置，否则无法显示图表）        
			xAxis: {            
			data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]        
			},        
			// 设置Y轴的值（必须设置，哪怕大括号中没有内容，否则无法显示图表） 
			yAxis: {},        
			//设置图表数据        
			series: [            
				{                
					// 设置当前这组数据的数据描述                
					name: '销量',                
					// 设置当前这组数据需要显示的形式（bar:条形图;pie:饼图;line:折线图）                
					type: 'bar',                
					// 当前这组数据每个数据点的值                
					data: [5, 20, 36, 10, 10, 20]            
				}        
			]    
		};    
		// 将图表的配置变量赋值给图表，完成图表的设置（千万不能忘了，否则图表不会显示）    
		chart.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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>E-Chart教程</title>
    <!-- 引入echart的js文件 -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 添加一个显示图表的容器，并设置容器宽高（必须设置宽高，否则图表将无法显示出来） -->
    <div id="chart" style="width: 400px;height: 400px;">
        <script>
            //通过echarts封装好的代码实例化E-Chart的实例（一个图表对象）
            var chart = echarts.init(document.getElementById('chart'));


            //定义一个数据对象用于配置图表
            var option = {
                // 设置图表标题
                title: {
                    //标题文本（支持 “\n” 换行）
                    text: 'E-Charts教程',
                    //是否显示标题
                    show:true,
                    // 标题字体样式
                    textStyle:{
                        // 文字颜色
                        color:'#f00',
                        // 文字大小
                        fontSize:16
                    }
                },
                tooltip:{
                    // 是否显示数据提示
                    show:true,
                    // 数据提示的形式
                    trigger:'item',//item、axis、none
                    // 数据点数据提示触发条件
                    triggerOn:'click',//mousemove:移动时触发；click:点击时;none:不触发
                },
                toolbox:{
                    show:true,
                    orient:'horizontal'
                },
                // 设置图表图例
                legend: {
                    //是否显示图例
                    show:true,
                    // 图例项（与series中的name对应）
                    data:['销量'],
                    // 设置图例水平对齐方式
                    left:'center',
                    // 设置图例垂直对齐方式
                    top:'bottom',//middle：垂直居中
                    // 设置图例显示伸展方向    
                    orient:'horizontal',//vertical:垂直方向
                                      // 图例文字样式
                    fontStyle:{
                        // 图例文字颜色
                        color:'#f00',
                        //图例文字大小
                        fontSize:16
                    }
                },
                // 设置X轴的值（坐标点描述,必须设置，否则无法显示图表）
                xAxis: {
                    // x轴数据
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                    //设置x轴位置
                    position:'bottom',
                    // 设置x轴偏移量
                    offset:10,
                    // x轴名称（显示在x轴末尾）
                    name:'x轴',
                    // x轴名称样式
                    nameTextStyle:{
                        // x轴名称文字颜色
                        color:'#f00'
                    }
                },
                // 设置Y轴的值（必须设置，哪怕大括号中没有内容，否则无法显示图表）
                yAxis: {
                    // 设置y轴显示的位置
                    position:'left',
                    // 设置y轴文字显示的偏移量
                    offset:10,
                    // 设置y轴的描述
                    name:'y轴',
                    // 设置y轴名称位置
                    nameLocation:'end',//middle、center:居中,start:Y轴开始的位置，end:Y轴结束的位置
                    // Y轴最小值
                    min:0,
                    // Y轴最大值
                    max:100
                },
                // 颜色盘（全局颜色集合），如果没有设置颜色，系统将自动按顺序从颜色盘中设置颜色
                color:['#ff0000','#888800','#00ff00','#008888','#0000ff'],
                //设置图表数据
                series: [
                    // 设置多组数据
                    {
                        // 设置当前这组数据的数据描述
                        name: '销量1',
                        // 设置当前这组数据需要显示的形式（bar:条形图;pie:饼图;line:折线图;radar:雷达图;tree:树图;）
                        type: 'bar',
                        // 当前这组数据每个数据点的值
                        data: [5, 20, 36, 10, 10, 20]
                    }，
                    {
                        // 设置当前这组数据的数据描述
                        name: '销量2',
                        // 设置当前这组数据需要显示的形式（bar:条形图;pie:饼图;line:折线图;radar:雷达图;tree:树图;）
                        type: 'bar',
                        // 当前这组数据每个数据点的值
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };
            // 将图表的配置变量赋值给图表，完成图表的设置（千万不能忘了，否则图表不会显示）
            chart.setOption(option);
        </script>
    </div>
</body>
</html>

当然，在强大的E-Chart中，这只是一小部分的属性，如果有需要，可以去上面的E-Chart官方文档中查找自己需要的属性，这里就不详细介绍了。

E-Chart进阶使用之动态数据

在上面的案例中，我们图表的数据都是通过Option设置好series之后就没有改变过，也就是静态的数据，但在实际应用中，经常需要图表动态显示我们的数据，下面让我们来看一下如何动态更新、显示我们的数据。

在图表的配置中，我们设置数据是通过series去设置的，设置好后通过图表的setOption();方法将写好的图表设置设置到图表对象上，那么在设置了一次数据之后我们应该怎么再次设置图表数据呢？相信你已经想到了再写个option，再调用一遍setOption();方法，Ok，没问题，我们复制粘贴，又写了一遍option，又调用了图表对象的setOption();方法，但回过头，看了一下代码，为了更新个数据，又多了几十行代码，这无疑增加了代码赘余，不利于后期的代码维护，那么这又怎么办呢？其实，这个问题E-Char官方早就想到了，也早就有了解决方法，那就是我们每次在设置图表的配置时，也就是调用setOption方法时，都会将调用时传入的图表配置与上一次的图表配置进行对比，对比后只会更改有发生变化的部分，也就是说我们如果只是向更改图表的数据，Ok，我只需要重写option中的series部分的内容，然后调用setOption方法去更改我们数据部分的配置信息，下面然我们通过一个实例来展示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{margin: 0;padding: 0;}
        .content{width: 400px;margin:auto;}
        input{padding: 10px;width: 100%;background-color: #ccc;}
    </style>
    <!-- 引入echart的js文件 -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <div class="content">
        <!-- 添加一个显示图表的容器，并设置容器宽高（必须设置宽高，否则图表将无法显示出来） -->
        <div id="chart" style="width: 400px;height: 400px;">
            <script>
                ……
            </script>
        </div>
        <!-- 动态刷新数据按钮 -->
        <input type="button" onclick="javascript:updateData()" value="刷新数据">
    </div>
    <script>
        // 更新图表数据的方法
        function updateData(){
            var cData_1 = new Array();
            var cData_2 = new Array();
            //更改数据数组中的数据
            for(var i=0;i<6;i++){
                cData_1.push(Math.random() * 100);//生成0-100的随机数,并追加到cData_1集合中
                cData_2.push(Math.random() * 100);//生成0-100的随机数,并追加到cData_2集合中
            }
            //更改数据的图表配置变量
            var option = {
                series:[
                    {
                        // 设置当前这组数据的数据描述
                        name: '销量1',
                        // 当前这组数据每个数据点的值
                        data: cData_1   //cData_1作为第一组数据值
                    },
                    {
                        // 设置当前这组数据的数据描述
                        name: '销量2',
                        // 当前这组数据每个数据点的值
                        data: cData_2   //cData_2作为第二组数据值
                    }
                ]
            }
            //调用setOption重新设置图表的数据
            chart.setOption(option);
        }
    </script>
</body>
</html>

最后实现的效果如上图，我们点击刷新数据按钮，便可以看到图表中的数据柱发生了变化，到这里刷新图表数据就结束了，下面我们再来看一下动态添加数据。

E-Chart之动态添加数据
上面我们实现了动态更改图标的所有数据，但有时候我们需要的是动态添加、更新数据，确保数据的实时性，这时候怎么办呢？首先，我们从series标签中可以知道，图表的数据是通过数组的形式添加的，那么我们可不可以在这个数组上做些改变呢？OK,让我们来实践一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{margin: 0;padding: 0;}
        .content{width: 400px;margin:auto;}
        input{padding: 10px;width: 100%;background-color: #ccc;}
    </style>
    <!-- 引入echart的js文件 -->
    <script src="js/echarts.min.js"></script>
    <script>
        // 图表数据值数组
        var xData=[89,12,43,43,12,53];
        // 图表X轴标题数据
        var xTitle=[1,2,3,4,5,6];
        // 动态变化的X轴标签（单个值）
        var xLable = 1;
        //通过echarts封装好的代码实例化E-Chart的实例（一个图表对象）
        var chart;


        // 页面加载完成后调用的方法（通过body标签中的onload(Load())实现调用）
        function Load(){
            chart  = echarts.init(document.getElementById('chart'));
            //定义一个数据对象用于配置图表
            var option = {
                    // 设置图表标题
                    title: {
                        //标题文本（支持 “\n” 换行）
                        text: 'E-Charts教程'
                    },
                    // 设置图表图例
                    legend: {
                        show:true,
                        data:['销量']
                    },
                    // 设置X轴的值（坐标点描述,必须设置，否则无法显示图表）
                    xAxis: {
                        data: xTitle,
                        //设置x轴位置
                        position:'bottom'
                    },
                    // 设置Y轴的值（必须设置，哪怕大括号中没有内容，否则无法显示图表）
                    yAxis: {
                        position:'left',
                    },
                    //设置图表数据
                    series: [
                        {
                            // 设置当前这组数据的数据描述
                            name: '销量',
                            // 设置当前这组数据需要显示的形式（bar:条形图;pie:饼图;line:折线图;radar:雷达图;tree:树图;）
                            type: 'bar',
                            // 当前这组数据每个数据点的值
                            data: xData
                        }
                    ]
                };
                // 将图表的配置变量赋值给图表，完成图表的设置（千万不能忘了，否则图表不会显示）
                chart.setOption(option);
        }
        // 动态向‘图表’中添加数据的方法
        function pushData(data){
            // push()； 该方法是向数组、集合的末尾添加一条数据记录
            xData.push(data);//追加一条数据到数据集合中
            xTitle.push(xLable);//追加一个标签值到x轴标签数组中


            xLable ++;


            // shift(); 该方法是移除数组、集合的第一条数据记录
            xData.shift();//移除第一条数据
            xTitle.shift();//移除第一个x轴标签


            // 重新设置图表数据
            var option = {
                xAxis:{
                    data:xTitle
                },
                series:[
                    {
                        name:"销量",
                        data:xData
                    }
                ]
            }
            chart.setOption(option);
        }
    </script>
</head>
<body onload="Load()">
    <div class="content">
        <!-- 添加一个显示图表的容器，并设置容器宽高（必须设置宽高，否则图表将无法显示出来） -->
        <div id="chart" style="width: 400px;height: 400px;"></div>
        <!-- 动态刷新数据按钮 -->
        <input type="button" onclick="javascript:pushData(Math.random() * 100)" value="刷新数据">
    </div>
</body>
</html>

在代码中，我们通过push方法和shift方法，实现数组在有原始数据的基础上的动态添加、移除，也就是说当没有原始数据时会出现push一条数据，又立马删掉一条数据，导致没有数据显示出来，解决办法也很简单，在图表中我们可以判断数组的长度是否到达自己限定的最大长度，通过这个判断数组长度是否到达最大长度去控制是否需要调用shift方法移除数组中第一条数据记录，这样就解决了上述问题：

// 图表数据值数组
        var xData=[];
        // 图表X轴标题数据
        var xTitle=[];
        // 动态变化的X轴标签（单个值）
        var xLable = 1;
        var xMax = 6;//最多显示六条数据
        //通过echarts封装好的代码实例化E-Chart的实例（一个图表对象）
        var chart;

// 动态向‘图表’中添加数据的方法
        function pushData(data){
            // push()； 该方法是向数组、集合的末尾添加一条数据记录
            xData.push(data);//追加一条数据到数据集合中
            xTitle.push(xLable);//追加一个标签值到x轴标签数组中


            xLable ++;


            // 判断数据条数是否到达规定的最大条数，如果到达最大条数，开始动态移除第一条数据，否则不移除
            if(xTitle.length > xMax){
                // shift(); 该方法是移除数组、集合的第一条数据记录
                xData.shift();//移除第一条数据
                xTitle.shift();//移除第一个x轴标签
            }


            // 重新设置图表数据
            var option = {
                xAxis:{
                    data:xTitle
                },
                series:[
                    {
                        name:"销量",
                        data:xData
                    }
                ]
            }
            chart.setOption(option);
        }

到这里，大家可能有些疑惑，看了这么久，一直在讲条形图，其他图像的话又要怎么用呢？其实，这些图表的用法大抵差不多，只要你懂得怎么使用条形图了，其他图形也就没什么大问题了，只是有些图表注意下它们的一些不同点就行了。

饼图：它区别与条形图的不同点在于饼图只能有一组数据，另外饼图没有x、y轴（无需xAxis和yAxis标签），然后其他地方基本一样；
折线图：除了一些折线样式有些区别之外，其余的基本与条形图一致；
雷达图：与条形图差距较大，有专属的样式配置，数据组配置方式不同；

饼图

var chart  = echarts.init(document.getElementById('chart'));
//定义一个数据对象用于配置图表
var option = {
    // 设置图表标题
    title: {
        //标题文本（支持 “\n” 换行）
        text: 'E-Charts教程'
    },
    // 设置图表图例
    legend: {
        show:true,
        data:['销量']
    },
    //设置图表数据
    series: [
        {
            // 设置当前这组数据的数据描述
            name: '销量',
            // 设置当前这组数据需要显示的形式（bar:条形图;pie:饼图;line:折线图;radar:雷达图;tree:树图;）
            type: 'pie',
            // 当前这组数据每个数据点的值
            data: [
                {value:89,name:'第一条'},
                {value:43,name:'第二条'},
                {value:12,name:'第三条'},
                {value:54,name:'第四条'},
                {value:74,name:'第五条'},
            ]
        }
    ]
};
// 将图表的配置变量赋值给图表，完成图表的设置（千万不能忘了，否则图表不会显示）
chart.setOption(option);

折线图

<script>
        // 页面加载完成后调用的方法（通过body标签中的onload(Load())实现调用）
        function Load(){
            var chart  = echarts.init(document.getElementById('chart'));
            //定义一个数据对象用于配置图表
            var option = {
                // 设置图表标题
                title: {
                    //标题文本（支持 “\n” 换行）
                    text: 'E-Charts教程'
                },
                // 设置图表图例
                legend: {
                    data:['销量']
                },
                xAxis:{
                    data:['第一条','第二条','第三条','第四条','第五条']
                },
                yAxis:{
                },
                //设置图表数据
                series: [
                    {
                        // 设置当前这组数据的数据描述
                        name: '销量',
                        // 设置当前这组数据需要显示的形式（bar:条形图;pie:饼图;line:折线图;radar:雷达图;tree:树图;）
                        type: 'line',
                        // 当前这组数据每个数据点的值
                        data: [89,67,54,87,44]
                    }
                ]
            };
            // 将图表的配置变量赋值给图表，完成图表的设置（千万不能忘了，否则图表不会显示）
            chart.setOption(option);
        }
</script>

雷达图

<script>
        // 页面加载完成后调用的方法（通过body标签中的onload(Load())实现调用）
        function Load(){
            var chart  = echarts.init(document.getElementById('chart'));
            //定义一个数据对象用于配置图表
            var option = {
            // 设置图表标题
            title: {
                //标题文本（支持 “\n” 换行）
                text: 'E-Charts教程'
            },
            // 设置图表图例
            legend: {
                data:['第一组','第二组']
            },
            // 雷达图专属样式（仅雷达图可用，且雷达图必须设置）
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                // 指示器，配置雷达图维度（顶角）
                indicator: [
                    { name: 'one',max:100},
                    { name: 'two',max:100},
                    { name: 'three',max:100},
                    { name: 'four',max:100},
                    { name: 'fiver',max:100},
                ]
            },
            //设置图表数据
            series: [
                {
                    // 设置当前这组数据的数据描述
                    name: '销量',
                    // 设置当前这组数据需要显示的形式（bar:条形图;pie:饼图;line:折线图;radar:雷达图;tree:树图;）
                    type: 'radar',
                    // 当前这组数据每个数据点的值
                    data: [
                        {
                            value:[89,67,54,87,44],
                            name:'第一组'
                        },
                        {
                            value:[65,21,54,6,23],
                            name:'第二组'
                        }
                    ]
                }
            ]
        };
        // 将图表的配置变量赋值给图表，完成图表的设置（千万不能忘了，否则图表不会显示）
        chart.setOption(option);
    }
</script>

以上就是关于E-Chart的一些基本使用，具体的使用可以翻阅官方文档。

风ﾍ(･_|华岁~月
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts 基本使用
王小二的博客
08-04 398
简介 相信很多小伙伴工作中都会遇到统计问题，需要将数据通过柱状图或折线图的方式展示出来。图表插件有很多种，比如说：Highcharts、Chart.js、jFreeChart等等，今天给大家介绍另外一款图表插件---ECharts。 ECharts是一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，fire...
Echarts的基本使用
Kepler_II的博客
03-17 2083
1、基本使用 先引入echarts 然后创建一个元素用来装载echarts图表 echarts.init() 方法初始化 echarts 实例 最后设置配置项和数据 option，使用 setOption() 方法根据数据和配置项来显示图表即可 1. <!DOCTYPE html> 2. <html> 4. <head> 5. <meta charset="utf-8"> 6. <title>ECharts</title&g
ECHART基本使用，折线图，柱状图，散点图，饼图，盒形图5分钟上手
热门推荐
知其白，守其黑；和其光，同其尘。
11-24 2万+
Echarts 是由百度团队打造的纯 JavaScript 的图表库，官网下载路径如下：http://echarts.baidu.com/download.htmlEcharts的特性：丰富的图表类型： 常用的有折线图，柱状图，散点图，饼图，盒形图，用于地理数据可视化的地图，热力图，线图等多个坐标系的支持 直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo） 使
Echats详细介绍
m0_68907098的博客
10-27 1341
echars用法
echarts(7大基础图表)的使用
qq_44930306的博客
05-28 1632
echarts基础应用
ECharts的讲解
weixin_62268437的博客
08-11 1万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
E-Chart图
weixin_34334744的博客
05-09 1651
一、tooltip：鼠标移动到图上展示的文字 属性trigger（String类型）为"item"时，为单个的一条，为“axis”时，为所有的数据，为“formatter”时，为自定义二、color：颜色（数组）三、legend：说明栏 属性x、y（String类型）可以用来控制摆放的位置，x(right,left),y(top,bottom)四、xAxis：横坐标属性data（数组）...
【图表】echart指南
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
06-23 1万+
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 可以流畅的运行在 PC 和移动
react-native-charts-wrapper图表库页面布局使用案例
12-15
在React Native开发中，我们经常会遇到需要展示数据图表的需求，这时`react-native-charts-wrapper`库就显得尤为重要。这个库是专门为React Native设计的一个图表组件，支持多种图表类型，如线图、柱状图、饼图等，...
E-charts.zip
04-09
在给定的“E-charts.zip”压缩包中，我们可以预见到包含了一个使用ECharts实现的饼状图与表格联动的示例。下面将详细讲解ECharts以及如何实现表格与图表的联动效果。 1. **ECharts的基本使用** ECharts是一个基于...
工具-图表：e-charts
06-24
在本文中，我们将深入探讨ECharts的基本概念、特点以及如何利用它来创建图表，特别是在改变背景颜色和实现自适应屏幕尺寸方面的实践。 ### 1. ECharts基础 ECharts是一款开源的JavaScript图表库，它支持多种图表...
jQuery在线选座位插件seat-charts特效代码分享
11-23
以下是seat-charts插件的基本使用示例： ```html <!doctype html> <title>jQuery在线选座位插件seat-charts <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...
数据可视化——数据可视化网站（e-charts）.zip
04-20
以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持...
python-waffle-charts-with-pywaffle
02-18
下面是一个基本的示例，展示如何使用`pywaffle`创建一个简单的waffle图表： ```python import matplotlib.pyplot as plt from pywaffle import Waffle # 示例数据 values = [45, 30, 25] labels = ['Category 1', '...
ngxcharts用于Angular的声明式图表框架
08-10
一、ngx-charts的基本使用 1. 安装：首先，你需要通过npm（Node Package Manager）安装ngx-charts库。在你的Angular项目根目录下运行以下命令： ``` npm install @swimlane/ngx-charts --save ``` 2. 引入：在...
react-React组用于展示一个比赛树状图
08-15
onClick={(e) => this.handleTeamClick(e, team)} {...} /> ``` 在处理点击事件的函数中，可以更新当前选中的队伍信息，或者跳转到新的页面显示详细信息。 最后，将`TournamentBracket`组件引入到`App.js`中，...
快速入门前端图表插件E-chart
qq_39581763的博客
03-07 584
在前端项目开发中，有很多地方会遇到绘制图表的需求，一般的图表可以通过canvas来绘制，但是遇到复杂一点的图表怎么办呢？ 而且黑马的课程大纲已经把canvas课程删掉了，既然canvas有用，为什么要把他从课程大纲里面删掉呢？ canvas主要是用作前端小游戏的渲染，还有图表的制作。我们去公司做的项目，游戏类的项目，很少。然后自己手写canvas图表，非常的复杂，可...
echarts
weixin_34283445的博客
09-24 403
&lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;/div&gt; &lt;script src="~/lib/echarts/dist/echarts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;
E-Charts数据可视化
TimeMoments的博客
12-15 1756
数据可视化 一、展示方法 1).Jfreechart:免费，功能一般，效果一般(不怎么绚丽)，但是是之前的产物， 以前用的比较多，现在用的比较少了(建议以了解为主) 2).e-charts:免费，百度出产的，功能强大，效果(绚丽)，近几年的产物，现 在国内的众多软件公司用的比较多(推荐学习) 3).Hight-charts:国外产生，功能强大，效果绚丽，据说XX是抄袭他的，在国 内用的比较少(也是建议了解) 二、图表工具的作用以及原则 1).作用 1>.清晰直观的使得数据可视化
qiun-data-charts 折柱图 如何显示
最新发布
06-19
以下是使用Qiun-Data-Charts创建折柱图的基本步骤： 1. **安装依赖**：首先，确保已安装了必要的库，如`qiun-data-charts`和可能的依赖库（如`react`或`vue`等前端框架）。 2. **引入库**：在项目中引入Qiun-Data-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值