Echarts 通用配置项

时间 2019-11-08

标签 echarts 通用配置繁體版

原文原文链接

这篇文章会首先介绍使用echarts的最简单的例子，而后介绍一些通用的配置项。后面会拿几篇文章专门讲解echarts的graphic, 以及echarts的自定义系列，掌握了echarts的自定义系列的用法，那绘制任何图形都不在话下。除了普通的渲染，还有一些交互行为，好比拖动等等，后面也会介绍。
因此主要包含几个方面：
一、echarts的通用配置项
二、echarts的graphic
三、echarts的自定义系列
四、echarts的交互javascript

首页进入第一块内容，echarts的通用配置项。
咱们来看看官网的第一的例子：html

<!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拖动。java

1、grid的配置

单个grid最多能够放上下两个X轴，左右两个Y轴，在Echarts3中能够存在任意个grid组件
下面给几个grid的实例：数组

https://gallery.echartsjs.com...
并且grid的位置是能够任意调整的：echarts

grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x2: '7%', y: '7%', width: '38%', height: '38%'}
 ]

https://gallery.echartsjs.com...dom

grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x: '7%', y2: '7%', width: '38%', height: '38%'}
 ]

https://gallery.echartsjs.com...ide

grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x2: '7%', y2: '7%', width: '38%', height: '38%'}
 ]

2、xAxis的配置 , yAxis的配置

xAxis的配置与yAxis的配置能够是数组，也就是若是是多个grid的时候，就能够按照数组的形式来配置
好比：spa

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...code

xAxis gridIndex：0 表示第一个grid的x轴，xAxis gridIndex: 1表示第二个grid的x轴；对于yAxis同理htm

3、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': 不过滤数据，只改变数轴范围。

如何设置，由用户根据场景和需求本身决定。经验来讲：
一、当『只有 X 轴或只有 Y 轴受 dataZoom 组件控制』时，常使用 filterMode: 'filter'，这样能使另外一个轴自适应过滤后的数值范围。
二、当『X 轴 Y 轴分别受 dataZoom 组件控制』时：
若是 X 轴和 Y 轴是『同等地位的、不该互相影响的』，好比在『双数值轴散点图』中，那么两个轴可都设为 fiterMode: 'empty'。
三、若是 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...

4、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的交互，若是有想知道其余配置的使用，能够留言。