Echarts的简单学习（后续持续补充）

最新推荐文章于 2023-05-09 10:50:29 发布
最新推荐文章于 2023-05-09 10:50:29 发布
阅读量360 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrslonly/article/details/107856381
版权

Echarts是什么？

  1. ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
  2. ECharts 遵循 Apache-2.0 开源协议，免费商用。
  3. ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

Echarts的使用方法：
第一步：创建 HTML 页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器

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

第三步: 设置配置信息

  1. ECharts 库使用 json 格式来配置。

echarts.init(document.getElementById(‘main’)).setOption(option);

  1. 标题

title: {text: ‘第一个 ECharts 实例’}

  1. 提示信息

tooltip: {}

  • 图例组件

legend: {
data: [{
name: ‘系列1’,
// 强制设置图形为圆。
icon: ‘circle’,
// 设置文本为红色
textStyle: {
color: ‘red’
}
}]
}

  • X 轴，Y 轴

xAxis: {
data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”]
}
yAxis: {}

  • 系列列表

series: [{
name: ‘销量’, // 系列名称
type: ‘bar’, // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
}]

每个系列通过 type 决定自己的图表类型

type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列

我的第一个Echarts

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<style type="text/css">
		
	</style>
	</head>
	<body>
		<!-- 为echarts准备一个具备宽高的Dom -->
		 <div id="main" style="width: 1000px;height:800px;"></div>
	</body>
	<script>
		//基于准备好的dom，初始化echarts实例
		 var myChart = echarts.init(document.getElementById('main'));
		 //折线图
		 //指定图标的配置项和数据
		  var option = {
			  //为图标配置标题
		             title: {
		                 text: '第一个 ECharts 实例'
		             },
					 //标题字体大小修改
					 textStyle: {
					       fontSize: 40
					 },
					 //配置提示信息
		             tooltip: {},
					 //图例组件
		             legend: {
		                 data:['销量']
		             },
					 //X轴  配置要在X轴显示的项
		             xAxis: {
						 //type: "category",
		                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
						 //X轴字体大小修改
						         axisLabel: {
						             textStyle: {
						                 color: '#000',
						                 fontSize:'25',
						                 //itemSize:''
						                 
						             }
						         },
					 },
					 //Y轴  配置要在Y轴显示的项
		             yAxis: {},
					 //系列列表
		             series: [{
		                 name: '销量',//系列名称
		                 type: 'line',//系列图表类型
		                 data: [5, 20, 36, 10, 10, 20]//系列中的数据内容
		             }],
					 
					 /* 
						type: 'bar'：柱状/条形图
					     type: 'line'：折线/面积图
					     type: 'pie'：饼图
					     type: 'scatter'：散点（气泡）图
					     type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
					     type: 'radar'：雷达图
					     type: 'tree'：树型图
					     type: 'treemap'：树型图
					     type: 'sunburst'：旭日图
					     type: 'boxplot'：箱形图
					     type: 'candlestick'：K线图
					     type: 'heatmap'：热力图
					     type: 'map'：地图
					     type: 'parallel'：平行坐标系的系列
					     type: 'lines'：线图
					     type: 'graph'：关系图
					     type: 'sankey'：桑基图
					     type: 'funnel'：漏斗图
					     type: 'gauge'：仪表盘
					     type: 'pictorialBar'：象形柱图
					     type: 'themeRiver'：主题河流
					     type: 'custom'：自定义系列
					 */
		         };
				 
				 //使用刚指定的配置和数据显示图表
				 myChart.setOption(option)
	</script>
</html>

成果如下图所示：
在这里插入图片描述

Echarts饼图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<script src="https://www.runoob.com/static/js/wonderland.js"></script>
	<style type="text/css">
		
	</style>
	</head>
	<body>
		<!-- 为echarts准备一个具备宽高的Dom -->
		 <div id="circle" style="width: 1000px;height:800px;"></div>
	</body>
	<script>
		//基于准备好的dom，初始化echarts实例
		 var myCharttwo = echarts.init(document.getElementById('circle'));
		 //饼图
		 myCharttwo.setOption({
		     series : [
		         {
		             name: '访问来源',
		             type: 'pie',    // 设置图表类型为饼图
		             radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
		             data:[          // 数据数组，name 为数据项名称，value 为数据项值
		                 {value:235, name:'视频广告'},
		                 {value:274, name:'联盟广告'},
		                 {value:310, name:'邮件营销'},
		                 {value:335, name:'直接访问'},
		                 {value:400, name:'搜索引擎'}
		             ]
		         }
		     ]
		 })
		 
					 /* 
						type: 'bar'：柱状/条形图
					     type: 'line'：折线/面积图
					     type: 'pie'：饼图
					     type: 'scatter'：散点（气泡）图
					     type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
					     type: 'radar'：雷达图
					     type: 'tree'：树型图
					     type: 'treemap'：树型图
					     type: 'sunburst'：旭日图
					     type: 'boxplot'：箱形图
					     type: 'candlestick'：K线图
					     type: 'heatmap'：热力图
					     type: 'map'：地图
					     type: 'parallel'：平行坐标系的系列
					     type: 'lines'：线图
					     type: 'graph'：关系图
					     type: 'sankey'：桑基图
					     type: 'funnel'：漏斗图
					     type: 'gauge'：仪表盘
					     type: 'pictorialBar'：象形柱图
					     type: 'themeRiver'：主题河流
					     type: 'custom'：自定义系列
					 */
		         };
				 
				 //使用刚指定的配置和数据显示图表
				 myChart.setOption(option)
	</script>
</html>

在这里插入图片描述
ECharts 数据集（dataset）：

ECharts 使用 dataset 管理数据。
dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。

一个简单例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<script src="https://www.runoob.com/static/js/wonderland.js"></script>
	</head>
	<body>
		<!-- 为echarts准备一个具备宽高的Dom -->
		 <div id="main" style="width: 1000px;height:800px;"></div>
	</body>
	<script>
		/* 
		ECharts数据集
		 ECharts使用dataset管理数据
		 dataset组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射
		 */
		var myChart = echarts.init(document.getElementById('main'));
		var option={
			legend:{},
			tooltip:{},
			dataset:{
				//提供一份数据
				source:[
					['product', '2015', '2016', '2017'],
					['西安', 43.3, 85.8, 93.7],
					['北京', 83.1, 73.4, 55.1],
					['兰州', 86.4, 65.2, 82.5],
					['上海', 72.4, 53.9, 39.1]
				]
			},
		// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
		xAxis:{
			type:'category',
			axisLabel: {
		    textStyle: {
		        color: '#000',
		        fontSize:'25',
		        //itemSize:''
		        
		    }
		},
		},
		//声明一个Y轴，数值轴
		yAxis:{},
		// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
		series: [
		     {type: 'bar'},
		     {type: 'bar'},
		     {type: 'bar'}
		   ]
		}
		
		// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
	</script>
</html>

在这里插入图片描述
安利两个网址：

  1. echarts样式修改
  2. echarts主题设置
Sk8？？？
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts如何画柱状图，以及参数解释
qq_42566295的博客
07-20 1821
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
Echarts 数据集
lzy2213811239的博客
06-21 1131
Echarts 数据集
vue实战开发019:Echarts修改各种标签的字体大小
kevinfan的博客
06-22 8455
Vue中设计图表有个很强大的插件，那就是Echarts，这是一款强大的可视化图表制作工具，用纯 Javascript 打造的图表库,提供了丰富多彩的图表样式，使用Echarts我们可以快速的实现数据可视化操作，而且这些图标逼格都很高，特别的专业。 为了找到合适的模板，通常我们会在Echarts实例中找到一些合适的图标然后在线修改下参数看看是否能满足项目需求，如果合适的话我们就可以...
Echarts 热力图的详细配置过程
梁辰兴的博客
05-09 4417
在这个实例中，我们创建了一个 3x7 的热力图，用于显示一周中每天不同时间段的活动强度。其中，xAxis 表示星期几，yAxis 表示时间段，visualMap 表示颜色对应的数据范围，series 表示热力图的数据。其中，需要注意的是，热力图的数据格式为二维数组，每个元素包含三个值，分别代表x轴坐标、y轴坐标和数据值。配置 echarts 图表的各种属性，包括 tooltip、animation、grid、xAxis、yAxis、visualMap 和 series。// 使用配置项显示图表。
echarts里面的参数解释_Libra 技术解读！详解move语法、解释器和介绍器
weixin_36141019的博客
12-15 191
本周将主要介绍：move语法、解释器和验证器快搬好小板凳来听课咯！move语法白皮书使用了一种半形式化(semi-formal)的描述语言进行了描叙。至于这套描述语言，主要符号解释如下： =： 定义::= ： 赋值⇀： 映射×： product type，也就是表示结构体∈： 表示属于某个类型或者集合中的一个元素通过这些符号，Move定义了如下的语法类型：Global state： 地址到账户的m...
ECharts学习代码
03-19
下面我们将深入探讨ECharts的学习要点。 首先，**安装与引入**。ECharts可以通过npm或CDN方式引入到项目中。如果使用npm，可以运行`npm install echarts --save`，然后在代码中用`import echarts from 'echarts'`...
echarts 学习笔记 文档
02-26
echarts 学习笔记 文档
echarts学习文档
05-10
echarts学习文档
echarts学习demo
03-22
用echarts写的一个demo，里面有很多参数说明以及使用echarts的用法
基于Echarts的数据可视化学习空间项目源码.zip
最新发布
08-21
基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习...
echarts插件
06-09
echarts插件
echarts 当需要对个别数据进行个性化定义时
韦大人orz
02-23 881
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{undefined //直接在data 数据修改 data: [120, 200, 150, 80, 70, { ...
Echarts-双轴图
牛栏山矿泉水
06-12 349
1、问题描述 利用Echarts制作一个折线图，条件是：三条折线，一条代表可利用率，另外两条代表数量。 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Echarts-双轴图&lt;/title&gt; &lt;link
Echarts地图使用json数据显示方法
热门推荐
LisenYang的专栏
12-21 2万+
echarts3.0以后取消了内置地图，可用百度地图或json或js。 需要导入jquery、echarts和china地图的js文件。   我这里主要说明的是地图怎么加载出来，Echarts官网有很多Demo，很多人会问明明把例子的代码都复制HTML里了，js和地图也引用了，但是地图还是加载不出来。这是因为请求json数据需要服务器才能运行，这里推荐两种方式：一种是用php集成环境，p...
ECharts学习篇一
sms
11-19 528
前言
echarts 简介
weixin_43931625的博客
10-19 1559
echarts 简介
按需引入 ECharts 图表和组件
qq_42006353的博客
03-22 8495
一、安装echarts 在vue项目中使用echarts首先要先安装echarts npm install echarts --save 二、按需引入需要的图表和组件 2.1 template部分 template部分跟标签为echarts图表的容器，id为这个容器初始化时的唯一标识。 2.2 script部分 这部分的代码就是按需引入的操作 引入echarts全部的操作如图中代码注释的部分 let echarts = require(‘echarts’) 这样引入了整个echarts，打包后体积非常大，
echarts可视化进阶
an_wenhao的博客
07-01 247
一、ECharts 异步加载数据 ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。 数据的动态更新 ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。 所有数据的更新都通过 setOption 实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动
echarts 快速学习
05-24
学习 ECharts 的最佳方法是通过官方文档进行学习。下面是一些快速入门 ECharts 的步骤： 1. 在你的 HTML 文件中引入 ECharts 库。 ``` <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值