echart的学习：1.雷达图在es5（不使用框架的原生情况下）下的使用

最新推荐文章于 2024-05-12 14:16:53 发布
最新推荐文章于 2024-05-12 14:16:53 发布
阅读量527 收藏
点赞数 1
分类专栏： 插件 文章标签： echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HUSHILIN001/article/details/87163595
版权

这个系列的博客没什么大的用处，因为echart基本都有范例的了。我只是为了自己能更好的学习下这个插件，而写博客总结下经验

1.准备：

使用雷达图不能直接下载常用的echart.js，需要下载完整的echart.js

2.使用的代码：

    1.title：标题的设置

     2.legend：里程碑的设置

     3.radar：雷达项的设置（使用的是雷达坐标系）

     4.series：数据的设置（主要是type）

3.代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

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

	</body>
	<script type="text/javascript" src="js/echarts.common.min.js"></script>
	<script>
		var mychart = echarts.init(document.getElementById('main'));
		var option = {
			title: {
				text: "这个是测试",
				link: 'https://www.baidu.com',
				target: "blank",
				textAlign: 'left',

			},
			tooltip: {}, //提示层
			legend: {
				data: ['name1']
			},
			radar: {
				name: {
					textStyle: {
						color: '#fff', //字体颜色
						backgroundColor: '#999', //背景色
						borderRadius: 3, //圆角
						padding: [3, 5] //padding
					}
				},
				center: ['50%', '50%'],
				radius: '80%',
				startAngle: 270,
				indicator: [{
						name: '指标一',
						max: 600
					},
					{
						name: '指标二',
						max: 600
					},
					{
						name: '指标三',
						max: 600
					}
				],
			},
			series: [{
				name: '测试标题名字',
				type: 'radar',
				data: [{
					value: [400, 200, 20],
					name: "123",
				}]
			}]
		}
		mychart.setOption(option);
	</script>

</html>

19/2/13：

1.补充效果图

 

2.修改代码，添加提示层 

参考资料：

1.echart配置项文档：https://echarts.baidu.com/option.html#title

2.echart的示例：https://echarts.baidu.com/examples

mkmin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts雷达图 echart雷达图 雷达图
qq_34200636的博客
02-16 1万+
echarts雷达图 echart雷达图 雷达图
echarts----雷达图
grow_的博客
03-15 6994
区域填充的背景颜色设置为： rgba(238, 197, 102, 0.6)---数据围成的图形填充。区域填充的线条颜色为白色----数据围成的线条颜色填充。需求7： 标记的图形(拐点）设置 注意 series 里面设置。需求4： 雷达图 坐标轴轴线相关设置(竖线) axisLine。* 寻找官方的类似示例，给予分析，并引入到HTML页面中。* 在小圆点上显示相关数据，颜色设置为白色，10像素。* 用圆点显示， 拐点的大小设置为 5。第二步：按照需求来定制它。* 按照需求来定制它。* 小圆点设置为白色。
2024年前端最全ES5，ES6的简要说明及浏览器支持性总结，华为Web前端面试真题解析
最新发布
2301_82243710的博客
05-12 935
（7）Object.getOwnPropertyDescriptor() 返回对象上一个自有属性对应的属性描述符（不需要从原型链上进行查找的属性）。（6）Array.prototype.lastIndexOf() 返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。callback：用来测试数组的每个元素的函数。（7）Array.prototype.map() 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
ECharts雷达图一些配置的使用方法
Be myself
10-30 1万+
一、ECharts雷达图详细配置说明： // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色，默认无背景 rgba(51,255,255,0.7) title: { text: '各教育阶段男女人数统计', link: 'https://www.xxx.com', target: 'blank', top.
echarts radar雷达图常规使用
m0_54281425的博客
11-21 3288
<div id="idRadar"></div> data() { return { // 雷达图 optionRadar: { color: '#1890FF', fontSize: 16, grid: { //绘图网格 left: '0', right: '0', top: '0', bottom:.
Echarts雷达图绘制
2301_81170993的博客
04-01 2039
雷达图又称戴布拉图或蜘蛛网图，它从一个中心点向外辐射出多条坐标轴（4条以上），每一个分类数据都占有一条数值坐标轴，并连接各坐标轴上同一系列的值构成一个个不规则多边形。在任何一个轴上靠近图形中心的点表示一个较低的数值，靠近图形边缘的点表示一个较高的数值。雷达图通常用于在同一组坐标轴上比较不同实体的性能，也可用于表示和同一个项目相关的多个不同的因素。
ES6Macros:使用sweet.js实现在ES5中使用的新ES6语法
05-23
这是宏的集合，这些宏在ES6（和谐）中实现了新的语法更改，同时允许您使用sweet.js将其编译为ES5代码。 这将使您在所有（或大多数）浏览器实现它们之前熟悉编写ES6代码。 根据MIT许可获得许可。 入门 简短的介绍...
components.js:在ES5中创建和使用类似React的组件
04-17
但有时候，我们可能需要在不支持ES6或不能使用Babel转译的环境中工作，这时候就需要用ES5的方式来实现类似React的组件功能。本篇将探讨如何在ES5中创建和使用类似于React的组件。 首先，理解React组件的基本概念。...
ES5customElements.js:允许使用 ES5 语法创建自定义元素（Web 组件）的库
08-05
在使用之前将 ES5customElements.js JavaScript 库导入到文档中的任意位置。 < script src =" ES5customElements.min.js " > </ script > < script src =" mybeautyfulbutton.js " > </ ...
PropHtml:在没有任何框架的情况下使用其他 Html 文件构建 Html 文件
07-06
在现代Web开发中，我们经常使用各种框架如React、Vue或Angular来构建复杂的单页应用程序。然而，有时候项目需求可能相对简单，或者你只是想快速地整合一些静态HTML页面，这时，你可能并不需要引入一个完整的框架。...
Object.getPrototypeOf:符合ES5规范的Object.getPrototypeOf` shampolyfillreplacement，可在尽可能多的引擎中使用
05-12
object.getprototypeof ES5符合大多数规范的Object.getPrototypeOf sham / polyfill / Object.getPrototypeOf ，可在尽可能多的引擎中使用-特别是支持__proto__或ES6的任何引擎。 内置类型也可以在较旧的引擎中正常...
Echart-2.2.7学习
01-21
Echart是基于JavaScript的计算机图形库，是当前比较流行的可视化开发工具。
Echart(多雷达图展示)
发财糕
04-01 787
在数据可视化领域，雷达图（Radar Chart）是一种常用的图表类型，它能够直观地展示多个变量之间的关系。当我们需要比较多个数据集在多个维度上的表现时，雷达图就能发挥巨大的作用。在本文中，我们将基于ECharts这个强大的数据可视化库，来探讨如何实现多雷达图的展示。首先，你需要在你的项目中引入 ECharts 库。你可以通过下载 ECharts 的库文件，然后在 HTML 文件中使用标签引入它。也可以通过 CDN 直接引入。在 HTML 文件的标签中，创建一个
【Echarts】绘制雷达图、浏览以及多雷达图
2403_83182454的博客
04-01 1244
雷达图，也称为蜘蛛网图或星形图，是一种用于可视化多个变量之间关系的图表。它以一个中心点为起点，从中心向外辐射出多条轴线，每条轴线代表一个变量。在每条轴线上，通过不同的数据点或者连线来表示不同变量的取值或者关系。雷达图常用于比较不同实体在多个维度上的表现，例如产品的特征对比、团队成员的能力评估等。通过雷达图，我们可以直观地看到各个变量之间的相对差异和关系。通过雷达图，我们可以直观地比较不同实体在各个维度上的表现，并且可以发现各个维度之间。
【Echarts】一文快速上手Echarts（持续更新）
热门推荐
慕白Lee的博客
10-29 13万+
如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式，将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例，是如下代码。选择一个最基本的柱状图吧。
雷达图 自定义点样式 渐变背景色
祝贺
03-12 6352
雷达图的自定义点样式与渐变背景色 1、首先通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 2、然后准备一个具备高
ECharts学习(持续更新中)
~~~的博客
06-12 4277
Echarts 特点:丰富的可视化类型，折线图，柱状图，饼图，K线图 多种数据格式支持，key-value数据格式，二维表，TypedArray格式 流数据的支持，流数据的动态渲染，增量渲染技术 其他，移动端优化，跨平台使用，三维可视化echarts使用过程.......................................
echarts雷达图样式配置
qq_45887784的博客
07-29 9068
雷达图背景颜色设置. 雷达图的圈数 雷达图每圈上面的数字 雷达图区域拐点的数值 雷达图拐点的样式 雷达图每个区域的颜色设置 雷达图tooltip限制在图表区域内 ```javascript function getRadarChart(){ var option = { radar: { // shape: 'circle', indicator: [ { name: '渠道1'.
echarts实现雷达图
故里的博客
07-24 622
一、现有功能介绍： 1.在轮播图中插入雷达图，配到的问题如何解决。 2.修改雷达图的颜色等功能。 3.点击弹出内容介绍。 4.待添加… 二、实现图： 三、上代码 <van-swipe indicator-color="red" :height="380" ref="swiper" @change="swiperChange" :loop='false'> <div v-for="(item,index) in echartsList" :key="index"
需要在浏览器中使用 Node.js 的一些全局对象和方法 在TS下使用库webpack实现
05-29
在 TypeScript 中使用 Webpack 可以通过以下步骤来实现在浏览器中使用 Node.js 的一些全局对象和方法： 1. 安装依赖：首先需要安装 `webpack` 和 `webpack-cli` 两个依赖。 ``` npm install webpack webpack-cli --save-dev ``` 2. 配置 TypeScript 编译选项：在 `tsconfig.json` 文件中，需要将 `target` 选项设置为 `es5` 或更高版本，以支持一些新的 JavaScript 特性。同时，需要将 `module` 选项设置为 `commonjs`，以支持 Node.js 的模块化规范。 ```json { "compilerOptions": { "target": "es5", "module": "commonjs" } } ``` 3. 配置 Webpack：在根目录下创建一个 `webpack.config.js` 文件，用于配置 Webpack。 ```javascript const path = require('path'); module.exports = { mode: 'development', entry: './src/index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] } }; ``` 上述配置文件中，`entry` 选项指定了入口文件，`output` 选项指定了打包后的文件名和文件路径，`resolve` 选项指定了可以省略的文件扩展名，`module` 选项中的 `rules` 字段指定了处理 TypeScript 文件的 loader。 4. 安装 `ts-loader`：在命令行中执行以下命令来安装 `ts-loader`。 ``` npm install ts-loader --save-dev ``` 5. 编写代码：在 `src` 目录下编写 TypeScript 代码，使用 Node.js 的全局对象和方法。 ```typescript import fs from 'fs'; const data = fs.readFileSync('test.txt', 'utf8'); console.log(data); ``` 上述代码中使用了 Node.js 的 `fs` 模块来读取文件，并且使用了 `console.log` 方法来输出数据。 6. 打包代码：在命令行中执行以下命令来打包代码。 ``` npx webpack ``` 执行完毕后，会在 `dist` 目录下生成一个 `bundle.js` 文件，可以在浏览器中加载使用。需要注意的是，在浏览器中使用 Node.js 的全局对象和方法时，需要确保这些方法在浏览器中的兼容性和安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值