内容简介：这篇文章会首先介绍使用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的交互，如果有想知道其他配置的使用，可以留言。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Building Websites with Joomla!
H Graf / Packt Publishing / 2006-01-20 / USD 44.99
This book is a fast paced tutorial to creating a website using Joomla!. If you've never used Joomla!, or even any web content management system before, then this book will walk you through each step i......一起来看看 《Building Websites with Joomla!》 这本书的介绍吧!
