内容简介:这篇文章会首先介绍使用echarts的最简单的例子,然后介绍一些通用的配置项。后面会拿几篇文章专门讲解echarts的graphic, 以及echarts的自定义系列,掌握了echarts的自定义系列的用法,那绘制任何图形都不在话下。除了普通的渲染,还有一些交互行为,比如拖动等等,后面也会介绍。所以主要包含几个方面:1、echarts的通用配置项
这篇文章会首先介绍使用echarts的最简单的例子,然后介绍一些通用的配置项。后面会拿几篇文章专门讲解echarts的graphic, 以及echarts的自定义系列,掌握了echarts的自定义系列的用法,那绘制任何图形都不在话下。除了普通的渲染,还有一些交互行为,比如拖动等等,后面也会介绍。
所以主要包含几个方面:
1、echarts的通用配置项
2、echarts的graphic
3、echarts的自定义系列
4、echarts的交互
首页进入第一块内容,echarts的通用配置项。
我们来看看官网的第一的例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
通用的配置项可以查看官网的配置项手册: https://echarts.baidu.com/opt...
这里只介绍几种通用的配置,比如grid, xAxis的配置 , yAxis的配置, DataZoom的配置 以及Echarts拖动。
一、grid的配置
单个grid最多可以放上下两个X轴,左右两个Y轴,在Echarts3中可以存在任意个grid组件
下面给几个grid的实例:
https://gallery.echartsjs.com... 而且grid的位置是可以任意调整的:
grid: [ {x: '7%', y: '7%', width: '38%', height: '38%'}, {x2: '7%', y: '7%', width: '38%', height: '38%'} ]
https://gallery.echartsjs.com...
grid: [ {x: '7%', y: '7%', width: '38%', height: '38%'}, {x: '7%', y2: '7%', width: '38%', height: '38%'} ]
https://gallery.echartsjs.com...
grid: [ {x: '7%', y: '7%', width: '38%', height: '38%'}, {x2: '7%', y2: '7%', width: '38%', height: '38%'} ]
二、xAxis的配置 , yAxis的配置
xAxis的配置与yAxis的配置可以是数组,也就是如果是多个grid的时候,就可以按照数组的形式来配置
比如:
xAxis: [ {gridIndex: 0, min: 0, max: 20}, {gridIndex: 1, min: 0, max: 20} ], yAxis: [ {gridIndex: 0, min: 0, max: 20}, {gridIndex: 1, min: 0, max: 15} ],
https://gallery.echartsjs.com...
xAxis gridIndex:0 表示第一个grid的x轴,xAxis gridIndex: 1表示第二个grid的x轴;对于yAxis同理
三、DataZoom的配置
dataZoom 组件用于区域缩放,这里详细介绍几个属性:type, start, end, filterMode, xAxisIndex, yAxisIndex。
type: inside, 内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系
type: slider, 有单独的滑动条,用户在滑动条上进行缩放或漫游
start: 数据窗口范围的起始百分比, 范围是:0 ~ 100
end: 数据窗口范围的结束百分比, 范围是:0 ~ 100
startValue: 数据窗口范围的起始数值。如果设置了 dataZoom-inside.start 则 startValue 失效。如果轴的类型为 category,则 startValue 既可以设置为 axis.data 数组的 index,也可以设置为数组值本身。 但是如果设置为数组值本身,会在内部自动转化为数组的 index
endValue: 数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效。
dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同,效果也不同。
filterMode:
可选值为:
'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。
'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。
'none':不过滤数据,只改变数轴范围。
如何设置,由用户根据场景和需求自己决定。经验来说:
1、当『只有 X 轴 或 只有 Y 轴受 dataZoom 组件控制』时,常使用 filterMode: 'filter',这样能使另一个轴自适应过滤后的数值范围。
2、当『X 轴 Y 轴分别受 dataZoom 组件控制』时:
如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 fiterMode: 'empty'。
3、如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 dataZoomX 改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 dataZoomY 改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 fiterMode: 'filter',Y 轴设为 fiterMode: 'empty',即主轴 'filter',辅轴 'empty’。
xAxisIndex:表示控制第几个x轴,如果是 number 表示控制一个轴,如果是 Array 表示控制多个轴
yAxisIndex:表示控制第几个y轴,如果是 number 表示控制一个轴,如果是 Array 表示控制多个轴
详情查看下面的实例:
https://gallery.echartsjs.com...四、Echarts拖动
关于拖动的例子还是挺少的,在官网上echarts给了两个实例, 详见 https://echarts.baidu.com/exa...
第一个实例比较简单,就是通过graphic的ondrag与draggable结合使用的方式,里面使用了convertToPixel,convertFromPixel两个方法
convertToPixel:转换坐标系上的点到像素坐标值
convertFromPixel:转换像素坐标值到逻辑坐标系上的点,是convertToPixel的逆运算
比如:
在直角坐标系(cartesian,grid)上,把某个点的坐标转换成为像素坐标:
chart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);
把某个坐标轴的点转换成像素坐标:
// id 为 'x0' 的 xAxis 的刻度 3000 位置所对应的横向像素位置: chart.convertToPixel({xAxisId: 'x0'}, 3000); // 返回一个 number。 // 第二个 yAxis 的刻度 600 位置所对应的纵向像素位置: chart.convertToPixel({yAxisIndex: 1}, 600); // 返回一个 number。
把关系图(graph)的点转换成像素坐标:
// 因为每个 graph series 自己持有一个坐标系,所以我们直接在 finder 中指定 series:
chart.convertToPixel({seriesIndex: 0}, [2000, 3500]); chart.convertToPixel({seriesId: 'k2'}, [100, 500]);
在某个系列所在的坐标系(无论是 cartesian、geo、graph 等)中,转换某点成像素坐标:
// 使用第一个系列对应的坐标系: chart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]); // 使用 id 为 'k2' 的系列所对应的坐标系: chart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);
当然,还有其他的定位依据,详见如下
seriesIndex: number,
seriesId: string, seriesName: string, geoIndex: number, geoId: string, geoName: string, xAxisIndex: number, xAxisId: string, xAxisName: string, yAxisIndex: number, yAxisId: string, yAxisName: string, gridIndex: number, gridId: string gridName: string
对于里面的第二个实例,下次会详细介绍第二个实例。
拖动实例:
有时候我们会对多个grid拖动重新设置不同grid高度的需求,如下实例:
https://gallery.echartsjs.com...
其实这个实例也是利用了ondrag的方法去重新设置了option里面的一些属性,然后重新render。
总结
这篇文章主要介绍了grid, xAxis的配置, yAxis的配置, DataZoom的配置以及Echarts拖动功能,后面的文章会分别介绍Echarts的graphic,Echarts的自定义系列,Echarts的交互,如果有想知道其他配置的使用,可以留言。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
维多利亚时代的互联网
[英] 汤姆·斯丹迪奇 / 多绥婷 / 后浪丨江西人民出版社 / 2017-8 / 38.00元
人类历史上的第一次大连接 回顾互联网的前世 预言互联网的未来 ……………… ※编辑推荐※ ☆《财富》杂志推荐的75本商务人士必读书之一 ☆ 回顾互联网的前世,颠覆你的思维,升级你对互联网的认知 ☆ 人类历史上一次全球大连接是维多利亚时期的电报时代,那时候也有疯狂的资本、 巨大的泡沫、网络新型犯罪、网络亚文化崛起……现在的互联网时代就是电报时代的重演;回顾那......一起来看看 《维多利亚时代的互联网》 这本书的介绍吧!