echarts title位置_【前端框架】Echarts——大数据量面积图的使用

一.前言

相较于其他折线图，大数据量面积图，可以将时间轴进行伸张与压缩，可以满足对图表的细致与粗略的双重观察。

二.结合echarts文档具体理解样例代码

这就是整个样例的全部js代码，进行细致分析：

var base = +new Date(1968, 9, 3);var oneDay = 24 * 3600 * 1000;var date = [];var data = [Math.random() * 300];for (var i = 1; i < 20000; i++) {    var now = new Date(base += oneDay);    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));}option = {    tooltip: {        trigger: 'axis',        position: function (pt) {            return [pt[0], '10%'];        }    },    title: {        left: 'center',        text: '大数据量面积图',    },    toolbox: {        feature: {            dataZoom: {                yAxisIndex: 'none'            },            restore: {},            saveAsImage: {}        }    },    xAxis: {        type: 'category',        boundaryGap: false,        data: date    },    yAxis: {        type: 'value',        boundaryGap: [0, '100%']    },    dataZoom: [{        type: 'inside',        start: 0,        end: 10    }, {        start: 0,        end: 10,        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',        handleSize: '80%',        handleStyle: {            color: '#fff',            shadowBlur: 3,            shadowColor: 'rgba(0, 0, 0, 0.6)',            shadowOffsetX: 2,            shadowOffsetY: 2        }    }],    series: [        {            name: '模拟数据',            type: 'line',            smooth: true,            symbol: 'none',            sampling: 'average',            itemStyle: {                color: 'rgb(255, 70, 131)'            },            areaStyle: {                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                    offset: 0,                    color: 'rgb(255, 158, 68)'                }, {                    offset: 1,                    color: 'rgb(255, 70, 131)'                }])            },            data: data        }    ]};

(1)第一部分：

定义待填充数组，以及添加。对实际本身自己的项目没多大关系，因为拿过来实例最终都是要用ajax请求后端数据最后填充进option中的。

(2)option配置项——tooltip:position属性

根据官方文档写到：tooltip.position属性用于确定提示框悬浮层的位置，默认不设置时位置会跟随鼠标的位置。

即这一句的意思就是让悬浮提示层一直在图表的最顶部。

(3)option配置项——toolbox.feature.dataZoom属性

用于数据区域缩放。目前仅支持直角坐标系的缩放

很显然，例子中的意思是图表缩放时 y 轴不动，具体显示如下所示

(3)option配置项——xAxis/yAxis.boundaryGap属性

坐标轴两边留白策略：

类目(catagery)轴中boundaryGap可以配置为true和false。默认为true。这时候 刻度 只是作为分割线，标签和数据点都会在两个 刻度之间的中间

非类目轴，包括时间，数值，数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效

(4)option配置项——dataZoom.inside.start||end属性

也就是缩放比例的控制。

(4)option配置项——handleIcon，handleSize属性

就是滑动时间轴的按钮图标，也可以替换做自己项目中的本地图片。

那么handleSize就很显然，是调整这个按钮大小的属性。

(5)option配置项——handleStyle.shadowBlur属性

图形阴影的模糊程度，该属性配合以下的shadowColor，shadowOffsetX，shadowOffsetY一起使用。

shadowColor：阴影颜色

shadowOffsetX：阴影水平方向的偏移量

shadowOffsetY：阴影竖直方向的偏移量

好久不见！祝各位小伙伴越来越强！

推荐《LeetCode电子书学习》 下方领取 ???

链接: https://pan.baidu.com/s/1A9hgIMavlTLpju34s6gbjw 提取码: 4uax