一、ECharts介绍

ECharts是一款基于JavaScript的数据可视化图表库/，底层依赖矢量图形库 ZRender，提供直观，生动，可交互，可个性化定制，可以流畅的运行在 PC 和移动设备上的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

ECharts官网：https://echarts.apache.org/zh/index.html

Echarts

二、ECharts特性

ECharts 包含了以下特性：

  • 丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

  • 多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。

  • 千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。

  • 移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

  • 多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。

  • 深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

  • 多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。

  • 动态数据: 数据的改变驱动图表展现的改变。

  • 绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

  • 通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。

  • 无障碍访问（4.0+）: 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问！

三、ECharts语法

1、ECharts常见术语

title 标题
legend 图例
tooltip 提示
series 系列
data 数据
xAxis x轴线
yAxis y轴线

2、图表常见类型

bar 柱状图

line折线图：

        (1)曲线图

        加上smooth:true;就会变成曲线图

        (2)面积图

        加上areaStyle:{fill:“#f70”} 会变成面积图

pie 饼形图

        加上radius:[80,50] 会变成环形图

四、ECharts中的样式简介

1、颜色主题

主题可以通过切换深色模式，直接看到采用主题的效果，通过light 、dark切换。

定制主题，具体可以参考官网，需要导入下载的JavaScript文件：

// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...

2、color调色盘

在 option 中设置。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

全局调色盘option.color

option.color：color: ["pink", "#ff0", "#f0f", "#0ff"]

局部调色盘series.item.color

series: [
    {
      type: 'bar',
      // 此系列自己的调色盘。
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ]
     
    },

3、itemStyle项的颜色

  • itemStyle:{color:“#00f” }
  • 高亮的样式emphasis
itemStyle:{
normal:{color:"#93da6c"},
emphasis:{color:"#bcff57"}
}

4、特殊样式 

渐变色：

（1）定义渐变

// 定义渐变
	var linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#02bcff' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#5555ff' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
	}

（2）使用渐变

itemStyle:{
	color:linear,
	borderRadius:[30,30,0,0]
		}

5、label标签

  • show：true是否显示
  • position：”insideRight“位置
  • formatter格式

        formatter: “{a}\n{c}分”

        {a}系列名

        {b}数据名

        {c}数值

        {d}百分百

  • rich富文本
series:[				
{type:"pie",radius:[200,110],data:[
{name:"百度",value:1200,
label:{show:true,
position:"center",
// {d}百分比 {big|内容} 使用样式
formatter:"{big|{d}}{small|%}\n{b}",
// 定义样式（富文本）
rich:{
	big:{
		color:"#f70",
		fontSize:"48px",
		fontWeight:900,
		},
	small:{											color:"#f70"
		}
		}
		}},
{name:"其他",value:360,
// 样式灰色
itemStyle:{color:"#ccc"},
// 标签不显示
label:{show:false},
// 提示不显示
tooltip:{show:false}}
					]}
				]
				 
			}

五、动态显示局部 

  1. 定义option
  2. 修改option值
  3. echart.setOption(option);更新数据和视图

六、缓动动画

  • 动画延迟animationDelay
  • 动画时长animationDuration
  • 动画缓动函数animationEasing 
animationDelay: function(idx) {
					// 越往后的数据延迟越大
					return idx * 200;
				},
				animationDuration: function(idx) {
					// 每小格动画的时候
					return idx * 200;
				},
				// 弹性的方式出现动画
				animationEasing: "bounceInOut"
			}

七、ECharts应用实例

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
			#container{
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = {
			// 图表的标题
			title:{
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["睡眠时长"]},
			// x轴线
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
					}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 
		// legend传奇（图例） tooltip 提示 init初始化 document文档 
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#container{
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
	// 定义渐变
	var linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#02bcff' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#5555ff' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
	}
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 主题，light，dark，自定义
		// var echart = echarts.init(document.getElementById("container"),'purple-passion')
		// 4.2 定义配置项
		var option = {
			// 调色盘
			// color:["#55aaff","#aaff7f","#55007f","#ffff00"],
			// 图表的标题
			title:{
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
			// x轴线
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8],
					// color:["#ac4cff"]
					itemStyle:{
						color:linear,
						borderRadius:[30,30,0,0]
					}
				},
				{
					// 数据名称
					name:"玩游戏时长",
					// 类型为柱状图
					type:"line",
					// 数据data
					data:[2,4,1,5,6,8,5]
				},
				{
					// 数据名称
					name:"上课时长",
					// 类型为柱状图
					type:"line",
					smooth:true,
					// 数据data
					data:[6,7,5,8,6,1,0],
					// areaStyle:"#f70"
					
				},
				{
					name:"成绩",
					// 饼形图
					type:"pie",
					// radius:80,
					// 半径
					radius:[80,50],
					// 位移
					left:-80,
					top:-270,
					// 数据
					data:[
						{name:"js",value:90},
						{name:"html",value:85,itemStyle:{
							color:"#ffaa00"
						}},
						{name:"jq",value:90,
						 itemStyle:{
							 normal:{color:"#93da6c"},
							 emphasis:{color:"#bcff57"}
						 }
						},
						{name:"vue",value:50},
					]
				}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 
		// legend传奇（图例） tooltip 提示 init初始化 document文档 
	</script>
</html>

# echarts # 前端 # javascript # html5
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

Python 数据分析与可视化：开启数据洞察之旅（5/10）

avatar 永洪数据分析社区

Python数据分析案例74——基于内容的深度学习推荐系统（电影推荐）

电影数据集构建推荐系统，结合内容推荐和深度学习两种方法。预处理、探索性分析，加权平均法和余弦相似度进行基于内容的推荐，计算电影的相似度并生成推荐结果。并且使用深度学习模型，构建评分预测和检索任务，用户个性化推荐和评分预测。

avatar 永洪数据分析社区

高级可视化图表分析实践——以《大侠立志传》武器系统为例

高级可视化图表分析实践——以《大侠立志传》武器系统为例

avatar 永洪数据分析社区