Echarts学习笔记（一）canvas\svg

最新推荐文章于 2024-05-13 20:13:00 发布
最新推荐文章于 2024-05-13 20:13:00 发布
阅读量801 收藏 2
点赞数 2
分类专栏： echarts js html 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyx9611/article/details/90137267
版权
js 同时被 3 个专栏收录
91 篇文章 0 订阅
订阅专栏
echarts
7 篇文章 0 订阅
订阅专栏
html
7 篇文章 0 订阅
订阅专栏

官网下载echarts：（选择其一即可）

浏览器画图原理

Canvas

  1. 基于像素
  2. 单个html，类似于画笔在画布上画画
  3. Echarts基于canvas画图

SVG

  • 基于对象模型
  • 多个图形元素
  • 高保真
<!--canvas.html-->
<!-- 添加canvas -->
	<canvas id="myCanvas" width="400" height="400" >
		您的浏览器不支持
	</canvas>
	<script>
		// 获取画布对象 
		var myCanvas = document.getElementById('myCanvas');
		var ctx = myCanvas.getContext('2d');
		// 开始绘画一个新的路径
		ctx.beginPath();
		// 设置弧线为蓝色
		ctx.strokeStyle = "blue";
		var circle = {
			x : 100,//圆心x轴的坐标
			y : 100,
			r : 50 //圆的半径
		};
		ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false);
		// 按照指定的路径绘制弧线
		ctx.stroke();
	</script>

<!--svg.html-->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<!-- circle是圆形标签 -->
		<circle cx="70" cy="50" r="40" stroke="blank" stroke-width="2" fill="red">
		</circle>
		<!-- rect绘制长方形 -->
		<rect x="120" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)">
		</rect>
	</svg>

常见的图形组件

  • 标题、工具栏、图例、提示框
  • 坐标轴
    X轴
    Y轴

1、HTML结构
2、 Echarts.init()：

  • 初始化Echarts实例
  • setOption用指定数据绘图
    3、Option对象
  • title标题
  • 图例：legend
  • X轴：xAxis
  • 数据：series：
    - name、type、data

柱状图如下：

<!--bar.html-->
<div id="main" style="width: 1000px;height: 600px;"></div>
	<script>
		var myCharts = echarts.init(document.getElementById('main'));
		//指定图标的配置项和数据
		var option = {
			// 标题
			title:{
				text: 'Echarts 入门示例'
			},
			// 工具箱
			toolbox:{
				show: true,
				feature: {
					saveAsImage: {
						show: true
					}
				}
			},
			// 图例
			legend: {
				data: ['销量']
			},
			// x轴
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋"]
			},
			yAxis: {},
			// 数据
			series: [{
				name: '销量',
				type: 'bar',
				data: [5,20,37,10,10,20]
			}]
		};
		// 使用刚设置的数据项和数据显示图标
		myCharts.setOption(option);
	</script>

柱状图和折线图

<!--line.html:type的为line-->
<div id="main" style="width: 1000px;height: 600px;"></div>
	<script>
		var myCharts = echarts.init(document.getElementById('main'));
		//指定图标的配置项和数据
		var option = {
			// 标题
			title:{
				text: 'Echarts 入门示例'
			},
			// 工具箱
			toolbox:{
				show: true,
				feature: {
					saveAsImage: {
						show: true
					}
				}
			},
			// 图例
			legend: {
				data: ['销量']
			},
			// x轴
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋"]
			},
			yAxis: {},
			// 数据
			series: [{
				name: '销量',
				type: 'line',//折线图
				data: [7,30,47,30,30]
			}]
		};
		// 使用刚设置的数据项和数据显示图标
		myCharts.setOption(option);
	</script>

标题组件

  • text：标题文字
  • subtext：子标题
  • left、right、top、bottom标题位置
  • borderColor：边框颜色
  • borderWidth：边框宽度
<div id="main" style="width: 1000px;height: 600px;"></div>
	<script>
		var myCharts = echarts.init(document.getElementById('main'));
		//指定图标的配置项和数据
		var option = {
			// 标题
			title:{
				show: true,
				text: 'Echarts 入门示例',
				subtext: '学习Echarts，20190511，好好学习',
				left: 'right',//数字就是像素值，也可以是center left  right这种值
				borderColor: 'red',
				borderWidth: 5,
				textStyle: {
					color: 'blue',
					fontSize: 30
				}
			},
			// 工具箱
			toolbox:{
				show: true,
				feature: {
					saveAsImage: {
						show: true
					}
				}
			},
			// 图例
			legend: {
				data: ['销量']
			},
			// x轴
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			// 数据
			series: [{
				name: '销量',
				type: 'bar',
				data: [5,20,37,10,10,40]
			},{
				name: '销量',
				type: 'line',//折线图
				data: [7,30,40,30,30,42]
			}]
		};
		// 使用刚设置的数据项和数据显示图标
		myCharts.setOption(option);
		</script>

工具栏组件

  • show：是否显示
  • feature：具体显示的功能
  • saveAsImage：保存图片
  • restore：还原
  • dataView：数据视图
  • dataZoom：缩放视图
  • magicType：动态类型切换
<div id="main" style="width: 1000px;height: 600px;"></div>
	<script>
		var myCharts = echarts.init(document.getElementById('main'));
		//指定图标的配置项和数据
		var option = {
			// 标题
			title:{
				text: 'Echarts 入门示例'
			},
			// 工具箱
			toolbox:{
				show: true,
				feature: {
					dataView:{
						show:true
					},
					restore:{
						show:true
					},
					dataZoom:{
						show:true
					},
					saveAsImage: {
						show: true
					},
					magicType:{
						type: ['line','bar']
					}

				}
			},
			// 图例
			legend: {
				data: ['销量']
			},
			// x轴
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋"]
			},
			yAxis: {},
			// 数据
			series: [{
				name: '销量',
				type: 'bar',
				data: [5,20,37,10,10,20]
			}]
		};
		// 使用刚设置的数据项和数据显示图标
		myCharts.setOption(option);
	</script>

*****代码写好了，但是在谷歌访问却乱码了。上面的代码是我之后换了js文件。
就说说我是怎解决的吧
具体解决办法参考本人博客

tooltip组件

  • show：是否显示
  • trigger：出发方式，axis就是x轴出发
    为了避免代码太多，我就只放tooltip的设置部分了！
// 提示框组件
			tooltip: {
				trigger: 'axis'
//axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
			},

markPoint

symbol：默认是pin

series: [{
				name: '销量',
				type: 'line',
				data: [5,20,37,10,10,20],
				markPoint: {
					data: [
						{type: 'max',name: '最大值'},
						{type: 'min',name: '最小值',symbol: 'triangle'}
					]
				},
				markLine: {
					data: [
						{type: 'average',name: '平均值'}
					]
				}
			}]

饼图

pie

饼图展示数据的特点

 - 展示百分比
  - type是pie

center圆心坐标
radius半径
name：图例名字
selectMode是否支持多选

<div id="main" style="width: 1000px;height: 600px;"></div>
	<script>
		var myCharts = echarts.init(document.getElementById('main'));
		//指定图标的配置项和数据
		var option = {
			// 标题
			title:{
				text: 'Echarts 入门示例',
				subtext:'纯属虚构',
				x:'center'
			},
			// 工具箱
			toolbox:{
				show: true,
				feature: {
					dataView:{
						show:true
					},
					restore:{
						show:true
					},
					dataZoom:{
						show:true
					},
					saveAsImage: {
						show: true
					},
					// magicType:{
					// 	type: ['line','bar']
					// }

				}
			},
			// 提示框组件
			tooltip: {
				trigger: 'item',
				//axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
				formatter:"{a}<br/>{b} : {c} ({d}%)"//
			},
			// 图例
			legend: {
				orient: 'vertical',
				left:'left',
				data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			},
			// // x轴
			// xAxis: {
			// 	// data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			// },
			// yAxis: {},
			// 数据
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: '55%',
				center: ['50%','60%'],
				data:[
				{value:335,name:'直接访问'},
				{value:310,name:'邮件营销'},
				{value:234,name:'联盟广告'},
				{value:135,name:'视频广告'},
				{value:1548,name:'搜索引擎'}
				]
			}]
		};
		// 使用刚设置的数据项和数据显示图标
		myCharts.setOption(option);
	</script>

仪表盘

gauge
仪表图展示数据的特点
type是gauge
动态修改仪表盘数据

<div id="main" style="width: 1000px;height: 600px;"></div>
	<script>
		var myCharts = echarts.init(document.getElementById('main'));
		//指定图标的配置项和数据
		var option = {
			// 工具箱
			toolbox:{
				show: true,
				feature: {
					saveAsImage: {
						show: true
					},
				}
			},
			// 提示框组件
			tooltip: {
				trigger: 'item',
				//axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
				formatter:"{a}<br/>{b} : {c}%"//
			},
			
			
			// 数据
			series: [{
				name: '业务指标',
				type: 'gauge',
				detail:{formatter:'{value}%'},
				data:[
				{value:32,name:'完成率'},
				
				]
			}]
		};
		// 使用刚设置的数据项和数据显示图标
		myCharts.setOption(option);
	</script>

地图
散点图
k线图
雷达图

shangrila-xiu
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts实现svg地图
qq_42221321的博客
01-21 9969
链接 阿里云数据可视化平台 介绍 之前写了另一个echarts实现地图的，可以移步这里 这次是用的echarts+svg实现的，参考了echarts的这两个案例 庖丁解牛 内脏数据 代码 废话不多说，直接上代码 <template> <div> <h1>深圳罗湖区--svg地图</h1> <div id="main"></div> </div> </template> <script
Echarts学习笔记（二）
qq_31457247的博客
11-21 129
简单图表的实现 饼状图（pie） option = { series : [ { name: '姓名', type: 'pie', radius : '55%', data: [{ name:'男性', valu...
echarts地图svg拓展实例
02-22
开始在使用echarts地图的svg拓展的时候遇到required('echarts/util/mapData/params').params这里一直报错，在网上也没有很好的解释，然后就有了这个demo，给大家在学习echarts的时候提供一些方便
数据可视化 — 01_svg+echarts实现自定义厂区平面图
文泽路小男孩的博客
11-16 7039
文章目录svg+echarts实现自定义厂区平面图一、最终效果二、设计思路三、开发步骤3.1 在AI中画矢量图，并保存为svg格式3.2 使用svg2geojson插件，将svg转为geojson格式3.3 使用echarts，展现效果四、踩的坑4.1 正确的svg格式4.2 svg的\标签在geojson中无点坐标4.3 最后在浏览器中，地图上下颠倒180度 欢迎访问笔者个人技术博客： http://rukihuang.xyz/ svg+echarts实现自定义厂区平面图 一、最终效果 二、设计思路
Vue 使用echarts svg底图的map
最新发布
hrcsdn13的博客
05-13 386
1、一定要是 svg路径图，别的svg图不可以，我们可以把要做成路径图的图片导入svg在线生成器，一定要用钢笔工具圈出路径图部分，这样做出来的才是路径图，至于图片背景色与路径区域背景色作图小白可能在在线生成器上做不成自己想要的样式，无妨，只要生成的是路径图，这些可以在生成的文件中修改。二、vue 中需要导入图片，不能直接写图片相对路径，否则获取不到真正的svg图片。四、附让我做出以svg为底图的地图的帖子。一、官网庖丁解牛教程。
数据可视化-Echarts
ximingx
05-25 3559
需要注意的是，ECharts的渲染原理是基于浏览器的Canvas或SVG技术实现的，因此在使用ECharts时，需要确保浏览器支持Canvas或SVG技术，并且需要注意图表的性能和兼容性问题。SVG 和 Canvas 这两种使用方式在技术上是有很大的差异的，EChart能够做到同时支持，主要归功于 ECharts 底层库 ZRender 的抽象和实现。在绘制渲染阶段，ECharts会根据布局计算阶段的结果，使用Canvas或SVG等技术，将图表的各个组件和数据绘制出来。具体来说，可以在事件处理函数中调用。
数据可视化Echarts实现地图系列绘制svg作为底图
qq_61788891的博客
09-12 4319
从v5.1.0开始，ECharts 支持在和中使用 SVG 作为底图，所以我们这里直接使用svg。
Echarts学习笔记
huohuoit的博客
09-23 119
一、基本概念 1、echarts 实例 每个 echarts 实例独占一个 DOM 节点（作为 echarts 的渲染容器）。 2、系列（series） 系列（series）：一组数值以及他们映射成的图。 一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。 系列类型（图表类型）（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、..
数据可视化-canvas-svg-Echarts
08-19
在本主题中，我们将深入探讨三种主要的数据可视化技术：HTML5的Canvas、SVG（可缩放矢量图形）以及ECharts，一个基于JavaScript的数据可视化库。 1. **Canvas**: Canvas是HTML5中的一个重要元素，它允许开发者通过...
echarts学习笔记之图表自适应问题详解
12-28
为了直观查看公司服务器各个进程占用的内存动态情况，我使用echarts进行数据可视化，具体的实现过程按下不表。 最后实现的效果如图： 然后问题就来了，因UI采用了Bootstrap响应式框架，所以除了图表之外其他都是...
canvas学习笔记之绘制简单路径
01-21
1 线段（直线路径） 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式，绘制当前或已经存在的路径 ...
canvas2svg：将HTML5 Canvas绘制命令转换为SVG
02-04
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件...
canvas学习笔记之2d画布基础的实现
01-21
< canvas> 元素创造了一个固定大小的画布，其上的渲染上下文CanvasRenderContext2D，可以用来绘制和处理要展示的内容。 若要在canvas上绘图，首先得获取CanvasRenderContext2D2d渲染上下文。（此处指2d的，
ECharts 中 Legend自定义可以使用svg标签
Ypromise-的博客
01-25 847
Echarts Legend 自定义可以使用svg标签
问题记录：echarts图表使用svg渲染，在服务器上会渲染两次
helldevilll的博客
02-20 225
获取id为chart8的元素后就能打印出下图内容，页面里有多个图表，有些正常有些会多次渲染。bug是解决了，但不知道是怎么解决的...我的解决方式是把渲染方式改回默认方式。
echarts图例中使用svg path
zxo_apple的博客
04-24 4037
开发echarts时，经常会要求自定义icon，但是由echarts提供的icon类型比较有限，只有几种 icon: ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ 比如要实现以下格式的legend 首先使用formatter自定义图例名称 let legend = { itemGap: 24, itemWidth: 2, itemHeight: 16, top: 0, icon:
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
qq_72760247的博客
08-29 3450
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
数据可视化（svg和echarts）基础笔记
m0_62508027的博客
07-30 604
准备一个二维数组data作为数据集,在配置项中写 dataset:{source:data},在series中的每一个对象中加上配置项encode:{y:index} 其中index表示对应data中第几列索引值为数据,注意在这里 饼图中对应的配置项是 encode:{itemName:index,value:index}数据集(dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射.这一特性能够将逻辑和数据分离,带来更好的复用,并易于理解.
漏刻有时数据可视化Echarts组件开发(41)svg格式地图应用
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-08 821
echarts.registerMap(mapName, geoJson) 参数mapName是地图的名称,geoJson是地图的数据。注册后可以使用这个地图名称在Echarts中使用这个地图。如有需要，建议咨询Echarts官方网站或者查询专业书籍。Echarts.registerMap是Echarts图表库中用于注册地图的函数。它可以将第三方地图或自定义地图数据与Echarts进行集成，使用Echarts的API进行绘制。
Echarts渲染选择SVG /canvas
05-18
Echarts 默认使用 Canvas 渲染图表，但是也支持使用 SVG 渲染。在使用 Canvas 渲染时，Echarts 会自动根据设备的像素比例进行缩放，以保证图表在高分辨率设备上的显示效果。而 SVG 则在任何分辨率下都具有一致的清晰...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值