echarts常用图表

已于 2024-08-10 13:53:44 修改
阅读量195 收藏 2
点赞数 1
分类专栏： echarts 文章标签： echarts 前端
于 2024-08-10 13:50:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80695016/article/details/141062620
版权

1.柱状图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div style="width: 600px;height: 400px;background-color: pink;"></div>
	<script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
	<script>
		let mCharts = echarts.init(document.querySelector('div'))
		let xAx = ['1号','2号','3号','4号','5号']
		let yAy = [89,67,87,54,90]
		let yAy1 = [79,97,57,44,80]
		let option = {
			title:{
				text:'成绩展示',
				textStyle:{
					color:'red'	//文本红色
				},
				borderWidth:5,	//边框宽度5
				borderColor:'blue',	//边框颜色圆角
				borderRadius:5	//边框
			},
			tooltip:{
				// trigger:'item',	//鼠标经过显示具体数据
				triggerOn:'click',//点击弹出数据
			},
			toolbox:{
				feature:{
					saveAsImage:{},	//导出图片
					dataView:{},	//数据视图
					restore:{},		//重置
					dataZoom:{},		//区域缩放
					magicType:{		//图标类型切换
						type:['bar','line']
					}
				}
			}
			,
			xAxis:{
				type:'category',
				data:xAx
			},
			yAxis:{
				type:'value'
			},
			legend:{
				data:['语文','数学']
			}
			,
			series:[
				{
					name:'数学',
					type:'bar',	//饼图
					markPoint:{	//配置最大值最小值
						data:[
							{
								type:'max',name:'最大值'
							},{
								type:'min',name:'最小值'
							}
						]
					},markLine:{  //配置平均值
						data:[
							{
								type:'average',name:'平均值'
							}
						]
					},
					label:{	//显示label
						show:true,
						rotate:60	//旋转60°
					},
					data:yAy,

				},{
					name:'语文',
					type:'bar',
					markPoint:{	//配置最大值最小值
						data:[
							{
								type:'max',name:'最大值'
							},{
								type:'min',name:'最小值'
							}
						]
					},markLine:{  //配置平均值
						data:[
							{
								type:'average',name:'平均值'
							}
						]
					},
					label:{	//显示label
						show:true,
						rotate:60	//旋转60°
					},
					data:yAy1
				}
			]
		}
		mCharts.setOption(option)
	</script>
</body>
</html>

效果图：

2.折线图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
    <script>
        let mCharts = echarts.init(document.querySelector('div'))
        let xAx = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        let yAy = [16,25,27,28,28,33,37,39,25,21,14,10]
        let yAy1 = [14,23,25,26,26,31,35,37,23,19,12,8]
        let option = {
            xAxis:{
                type:'category',
                data:xAx,
                boundaryGap:false  //紧挨边缘
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'气候',
                    type:'line',    //折现图
                    data:yAy,
                    markPoint:{	//配置最大值最小值
						data:[
							{
								type:'max',name:'最大值'
							},{
								type:'min',name:'最小值'
							}
						]
					},markLine:{  //配置平均值
						data:[
							{
								type:'average',name:'平均值'
							}
						]
					},
                    markArea:{  //标记区间
                        data:[
                            [
                            {
                                xAxis:'1月'
                            },
                            {
                                xAxis:'5月'
                            }
                        ]
                        ]
                    },
                    smooth:true,    //线条配置控制
                    lineStyle:{     //线条风格
                        color:'green',  
                        type:'dotted'
                    },
                    areaStyle:{     //填充风格
                        color:'pink'
                    }
                },
                {
                    name:'气候',
                    type:'line',    //折现图
                    data:yAy1,
                    areaStyle:{}     //填充风格
                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>
</html>

效果图：

3.散点图

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
    <script>
        let data = [[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],[9.15, 7.2],[11.5, 7.2],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],[7.08, 5.82],[5.02, 5.68]]
        let mCharts = echarts.init(document.querySelector('div'))
        let option = {
            xAxis:{
                type:'value',
                scale:true  //缩放
            },
            yAxis:{
                type:'value',
                scale:true
            },
            series:[
                {
                    // type:'scatter',     //散点图
                    type:'effectScatter',    //涟漪动画
                    showEffectOn:'emphasis',
                    rippleEffect:{      //动画
                        scale:5
                    },
                    data:data,       //数据
                    symbolSize:()=>{    //设置点大小
                        return 10
                    },
                    itemStyle:{
                        color:()=>{
                            return 'red'
                        }     //设置颜色
                    }
                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>

</html>

效果图

直角坐标系

配置1：网格grid

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div style="width: 600px;height: 400px;background-color: pink;"></div>
	<script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
	<script>
		let mCharts = echarts.init(document.querySelector('div'))
		let xAx = ['1号','2号','3号','4号','5号']
		let yAy = [89,67,87,54,90]
		let option = {
            grid:{  //grid配置
                show:true,  //显示网格   
                borderWidth:10, //网格边框粗细
                borderColor:'red',  //网格边框颜色
                left:120,   //距离左边
                top:120,     //距离顶部
                width:300,  //控制大小
                height:200  
            },
			xAxis:{
				type:'category',
				data:xAx
			},
			yAxis:{
				type:'value'
			},
			series:[
				{
					name:'数学',
					type:'bar',	//饼图
					data:yAy,

				}
			]
		}
		mCharts.setOption(option)
	</script>
</body>
</html>

效果图：

配置2：坐标轴axis

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div style="width: 600px;height: 400px;background-color: pink;"></div>
	<script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
	<script>
		let mCharts = echarts.init(document.querySelector('div'))
		let xAx = ['1号','2号','3号','4号','5号']
		let yAy = [89,67,87,54,90]
		let option = {
            grid:{  //grid配置
                show:true,  //显示网格   
                borderWidth:10, //网格边框粗细
                borderColor:'red',  //网格边框颜色
                left:120,   //距离左边
                top:120,     //距离顶部
                width:300,  //控制大小
                height:200  
            },
			xAxis:{
				type:'category',
				data:xAx,
                position:'top'  //显示在顶部
			},
			yAxis:{
				type:'value',
                position:'right'    //显示在右边
			},
			series:[
				{
					name:'数学',
					type:'bar',	//饼图
					data:yAy,

				}
			]
		}
		mCharts.setOption(option)
	</script>
</body>
</html>

效果图：

配置3：区域缩放dataZoom

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 600px;height: 400px;background-color: pink;"></div>
    <script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
    <script>
        let mCharts = echarts.init(document.querySelector('div'))
        let xAx = ['1号', '2号', '3号', '4号', '5号']
        let yAy = [89, 67, 87, 54, 90]
        let option = {
            dataZoom: [{
                type: 'slider',   //滑块
                // type: 'inside'   //内置鼠标滚动
                xAxisIndex: 0,     //控制x轴
            },
            {

                type: 'slider',   //滑块
                // type: 'inside'   //内置鼠标滚动
                yAxisIndex: 0,  //控制y轴
                start:0,
                end:80
            }],
            grid: {  //grid配置
                show: true,  //显示网格   
                borderWidth: 10, //网格边框粗细
                borderColor: 'red',  //网格边框颜色
                left: 120,   //距离左边
                top: 120,     //距离顶部
                width: 300,  //控制大小
                height: 200
            },
            xAxis: {
                type: 'category',
                data: xAx
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '数学',
                    type: 'bar',	//饼图
                    data: yAy,

                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>

</html>

效果：

4.饼图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
    <script>
        let mCharts = echarts.init(document.querySelector('div'))
        let pieDate = [{name:'淘宝',value:1000},{name:'拼多多',value:2000},{name:'得物',value:3000},{name:'京东',value:4000}]
        let option = {
            series:[
                {
                    type:'pie',
                    data:pieDate,
                    label:{ //饼图显示文字
                        show:true,
                        formatter:function(arg){    //显示返回文字
                            return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
                        }
                    },
                // radius:['50%','75%']    //饼图的半径    第0个元素设置内圆的半径，，第1个元素设置外圆的半径      形成圆环
                roseType:'radius',   //南丁格尔图
                selectedMode:'single',       //选中效果  选中偏移圆点一段距离
                // selectedMode: 'muitiple',
                selectedOffset:50
                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>
</html>

效果图：

梦晨黑
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【高级课程笔记】—— Echarts常用图表
柳柳66的博客
10-19 1524
一、折线图 line 折线图主要用来展示数据相随着时间推移的变化。 折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>折线</title&...
Apache Echarts常用图表之散点图
diviner_s的博客
04-21 4085
文章目录Echarts常用图表散点图1. 散点图的实现步骤2. 散点图的常见效果 Echarts常用图表 散点图 散点图可以帮助我们推断出变量间的相关性，追求不同维度数据之间的相关性，根据点的分布，从而找到线性的关系。 散点图也经常用在地图的标注上 1. 散点图的实现步骤 1.先上Echarts经典基本代码框架~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
Echarts常用图表
weixin_38974419的博客
02-05 1457
1.折线图： (1).代码： const self = this let chart = echarts.init(self.$refs.chart) // 数据 let date = ['1-22', '1-23', '1-24', '1-25', '1-26', '1-27', '1-28', '1-29', '1-30', '1-31', '2-1', '2-2', '2-3', '2...
ECharts常用图表绘制
2401_83182791的博客
03-18 397
（1）堆积柱状图的绘制。
echarts常用图表颜色
localhost
05-13 985
FF4343#FCA146#F6D54A#45DBF7#44AFF0#4777F5#FF7811#2ED1CB#21DC2F#F845F1#AD46F3#5045F6。
Apache Echarts常用图表之柱状图
diviner_s的博客
04-21 1万+
文章目录Echarts常用图表柱状图1. 柱状图的实现步骤2. 柱状图的常见效果最大值\最小值 `markPoint`平均值 `markLine`数值显示 `label`柱宽度 `barwidth`横向柱状图3. 通用配置标题：`title`提示框：`tooltip`工具按钮：`toolbox`图例：`legend` Echarts常用图表 柱状图 1. 柱状图的实现步骤 1.先上Echarts经典基本代码框架~~ <!DOCTYPE html> <html lang="en"> &
Apache Echarts常用图表之折线图
热门推荐
diviner_s的博客
04-21 1万+
文章目录Echarts常用图表折线图1. 折线图的实现步骤2. 折线图的常见效果最大值\最小值 `markPoint`平均值 `markLine`标注区间 `markArea`数值显示 `label`平滑线条`smooth`线条样式`linestyle`填充风格 `areaStyle`紧挨边缘`boundaryGap`配置缩放比例 `scale`堆叠图3. 通用配置标题：`title`提示框：`tooltip`工具按钮：`toolbox`图例：`legend` Echarts常用图表 折线图 折线图更多的使
echarts 常用图表示例
Looking的博客
12-08 3629
条形图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></scrip
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
imByte的博客
12-26 2818
文接上篇 ECharts 入门知识 [ECharts 入门真的很简单] ，本文继续介绍 ECharts 常用图表相关内容，如最受大家喜爱的中国地图实现。
echarts常用语法
05-15
### ECharts常用语法详解 ECharts 是一款由百度前端技术部开发的，基于 JavaScript 的数据可视化图表库。它提供了一套丰富的配置项，允许开发者轻松地创建出各种精美的图表。下面将根据提供的文件信息，详细阐述 ...
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
Echarts常用案例
07-22
本压缩包“Echarts常用案例”可能包含了一系列使用ECharts实现的典型应用示例，旨在帮助开发者更好地理解和运用ECharts进行数据展示。 ECharts的核心知识点包括： 1. **基本概念**：ECharts图表主要由容器（chart...
ECharts 产品图表系统 v4.0.1
11-26
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图
ECharts JSP常用图表制作系统 v4.2.0 rc2
10-07
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 534
ASP.NET Core Web API 使用Autofac框架
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
最新发布
qq_30193097的博客
08-13 123
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1036
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端JS总结（中）
m0_54066656的博客
08-12 676
前端JS之内置对象总结，这很重要！！！
echarts设置图表位置
05-17
Echarts 可以通过设置图表容器的位置来控制图表的位置。常用的设置图表位置的方法有以下几种： 1. 设置容器的 CSS 样式：可以通过设置容器的 `position`、`left`、`top`、`width` 和 `height` 等属性来控制容器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值