行业知识
【前端】Echarts自适应分辨率和缩放功能
2026-11-15 11:40:48
来源：互联网转载
版本
yarn add echarts@4.9.0yarn add resize-detector@0.3.0
mixins-resize.js
import { addListener, removeListener } from 'resize-detector';import _ from 'lodash';export default { mounted() { const { onResize } = this; this.__resizeHandler = _.debounce(() => { if (typeof onResize === 'function') onResize(); }, 100); this.$nextTick(() => { addListener(this.$el, this.__resizeHandler); }); }, beforeDestroy() { removeListener(this.$el, this.__resizeHandler); }} dataZoom.js
export const echartOptions = { dataZoom: [ { type: 'slider', //滑动条型数据缩放组件 start: 90, //数据窗口的起始位置百分比 end: 100, //数据窗口的结束位置百分比 height: 6, //数据缩放组件的高度 bottom: 20, //数据缩放组件距离底部的距离 realtime: false, //是否实时显示，这里是 false，表示拖动结束时才触发数据变化 backgroundColor: '#EDF0F5', //数据缩放组件的背景色 handleSize: 12, //滑块的大小 //滑块的图标 handleIcon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAGvElEQVRYR82YS2hc5xXH/+d8333pzki+chVLlR0Zm2AY2oVjyKKvhK7aLtrVZN+WZtFnoC+y0jiQktJVaVei0BJoA1Z3Ld3WId0mgULVxqRBtuWMLMUzkWZG931OuTORbD1sybYCHWZg4N773R//8//Od84h/J996OF5lFSBy5ex8+z8PIDLw+/wMz8PpeFV0odd/4hAuyC4AXDtGVC/D+52QUFwm6L4lMYRdDCAhiFkagqyvr6ozWZTHgbuUCBVpcXF4YvZdWHCENYZwHa17xDVDHNsAgSIEYMTFc8ZK3IPRZJ8WNQ3kqIbni6iCNJsQogOV+wBQEqtFujZZ8HLy7CTAmcQwBOBT3kaGON5ieQeCywTSAzUiFOoIis5TYk0waBIuF5L1tZW8osXT+dvvAGZb0HpAaG8D9AIZmYGJgjgqsIvS4yNWdSyIh9XUN0aCkspA2OMowpWFQU0h5oY0IEI+o6RTctur4h7W0VQj30febOJAqg8drBaBwCNYBqARQNukmCMCONU5BEZmixKOWnIfkZIv0giZwSYZiZPRFNmXoXqijL9i7V8U0Q7UL6jRroixaZIOKjXkQIo7xfCfUCtlnKlTFTAG4wNah6cEyV4SlROMfEXlOgbRHr2sN2johsAv0aEf6jobYasq+N2xzP00zrSpSUUrRZ0707cBVQZ+OpVmJs34aXpoBbaMCpMcYqVZlX1uyB8/jCQvddV9G0i/FqFVhh2NSd0trbQtxbpCy+g2Bu6e4CUrlwBDwZwmHsh524EY2ZA8qSCfkxEFx8WZvt+VVklmJ9D9YbD9gNJ0LERBgCy55+H3KvSDlClzsICbJp2gqna5ERJ+TSY51T1xUdRZp9Sqm9D9VcMWqbSaTslPlpqL8Xz8438XpXuArWU/zBX7ah+3YU7ReAzQvgqGD96VGX2PieqrzP4j8rmOoA130dvpBKV2/d+DKT09xbM+hT8fhBHFvbTSnqemH5BoLnjAqqMToQfQug9luJWQn7n3DnEzz2HclulIdAwG19ecvInZsMs8D/FauYM+Mtq5KXjgtlZR+l3K***Uruc6ub6+Ph4v9nETtiGQNVWf2YSzmqtP07kTrtqzgnrT4/DO/u8BH2HVF9BSe+p47TLEpvXryNrtUiGx/E2UGMc3iDCBFE+y8pPEeNVQI8tXDtggg0QfY9UrqWS3yqKsY/abSS7gLSl/NcZ+B0/jqi0p0lxQQ0tEME79pABYKJvkuq7kuU3xQu6vo9k29gjD1VAl+CvrsaTLjtniPUCMf3+k4AZhYW+XVRAkt+wNugcDLStENnTJHxBoZ+YQlD9FoTepTK/caBClakbDXhpd+uEWmeWjD6loFeJ6MljV0mxISLfh9C1gvKVAz1UAc3NLbuhnq3HZTYDxnm2/BMAnzt2IOAdKL1SqPy3KLK2teHGvl32cVXo5DnCokinWMycgprE+p3jBhpma6XXDGTZlu4axrE/DymUrrZg3j/zYeA4tUhzO2usnFfl34IwcWxQig0Iv0Qs/8y1uOX0/M7sZ7G1L1NXL7xyRQ1WVtwkOFG3QW2q0HQOsF8h1h8cGxD4dYL+CWKuc4G1nrR7UTSTHnCWjY6P6rQPQwRJkkQum2mFnmXmn4Hw9ONCqep/CPyyIbNMgrYJ0QUQjwq1UZbeydSjv6N6qFKpG06Evu9OUmlmiKtsTb8EYfqRoVRvk5qXifnfmWTtUN07qKH/wHpo+5BdWHjLBsEltywHdUedSQFPE9Nphbz4KEVapQyr+Q0xXyvzbJU8947nodftIm23Ud6rzh6FRoq1WkqNBmyvB891USNCpHnxhEKmlejrDPrakYxeGZj4b1D9S1VTw9o1x0GnLNF3XSRHqql3SpHFRQaapoJiRmglnSDmSIlPAnJSFV8ixtNQOrcLbgiB96VSRcybZPSmltoxJJ3SulUtNOh0kE5Pozhy17ENVam1uAiLdbhFBF8VYVmiTkUxzkAdlkIRBIC4RExVX0aiubKJoTogQg9qNw3QixWDWg1x5ZkHtUAHhWzHt9WuqwYKw5Yogu124QYBPJMlgXi+jyz3ieEyk80U7JKVHHkpgsyDJikk8Qo/thNIKpBuF0XlmdEg4v4t9SG9/WjIUPX2WIJBA8brwa4rHNeFzfMt63ljnGUxuW6gJt2S3Bkr/AxF5qNwXeSVItVvaQl6UB+2d+ceOmzYTgnbYFNToPX1YbvEWQYOgrtjmTiGui6kmn50u29pFF2So4IckIeOmmV2z4cajbtA1curVaqwDP1whGnHIyp0VNjHv++IIXv8Fx11hf8B8c+fUjRHBs0AAAAASUVORK5CYII=', dataBackground: { //数据区域的背景配置 lineStyle: { //数据区域边界线的样式配置，这里设置为透明 opacity: 0, }, areaStyle: { //数据区域填充样式配置，这里设置为透明 opacity: 0, }, }, selectedDataBackground: { //选中数据区域的背景配置 lineStyle: { //选中数据区域边界线的样式配置，这里设置为透明 opacity: 0, }, areaStyle: { // 选中数据区域填充样式配置，这里设置为透明 opacity: 0, }, brushStyle: { //选中数据区域的刷子样式配置，这里设置边框颜色为红色 borderColor: '#f00', }, }, // fillerColor: ' #A3A1FB', //数据区域的填充颜色 紫色 textStyle: { color: 'transparent', //文本颜色，这里设置为透明 }, }, ],} 使用
import { deepClone } from '@/views/common'import { echartOptions } from '@/views/common/dataZoom.js'import ResizeMixins from '@/views/common/mixins-resize.js'export default { mixins: [ResizeMixins], data() { return { chartLine: null, myChart: null, chartPie: null, chartScatter: null, } }, mounted() { this.initLuckyChart() }, methods: { initLuckyChart() { let dataZoom = deepClone(echartOptions.dataZoom) let xLabel = ['8:05', '8:10', '8:15', '8:25', '8:30', '8:35', '8:40', '8:45', '8:55', '9:00', '9:05', '9:10'] //x轴数据 let dataValue = [120, 130, 140, 135, 134, 115, 156, 115, 112, 215, 134, 142] //y轴数据1 let dataValue1 = [1.0, 3.0, 2.0, 1.0, 3, 1, 2, 3.2, 4.5, 5.0, 4.3, 3] //y轴数据2 let dataValue2 = [3, 6, 7, 15, 8, 5, 2, 5, 4, 2, 10, 3] //y轴数据3 let colors = ['#a5c5d4', '#91CC75', '#EE6666'] //颜色 let option = { dataZoom: dataZoom, color: colors, tooltip: { //悬浮放上面的提示 trigger: 'axis', //坐标轴触发 axisPointer: { type: 'line', //直线指示器 }, }, grid: { right: '20%', //echarts离容器左侧的距离 }, toolbox: { //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。 feature: { dataView: { show: true, readOnly: false }, //数据视图 restore: { show: true }, //重置 saveAsImage: { show: true }, //下载 }, }, legend: { //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示 data: ['浊度', 'PH', '水温'], //就是图表上面正中间那3，点击某个某个就能隐藏 }, xAxis: [ { type: 'category', //类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据 boundaryGap: false, //false从0开始,最少x会放0位置 axisTick: { //坐标轴刻度|和数据是对齐的，加上这个 alignWithLabel: true, }, // prettier-ignore data: xLabel, //x轴数据 }, ], yAxis: [ //直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。 { type: 'value', //适用于连续数据 name: '浊度（ntu）', //坐标轴名称 position: 'left', //左边 alignTicks: true, //开启该配置项自动对齐刻度 min: 0, //初始 max: 1000, //结束值 interval: 200, //间距 如果没这3，会自适应数据 axisLine: { show: false, //y轴| 是否显示 lineStyle: { color: colors[0], //颜色 }, }, splitLine: { //隐藏纵轴的横线 show: true, //展示 lineStyle: { color: '#DCDFE6 ', //虚线颜色 type: 'dashed', //虚线 }, }, axisLabel: { //纵轴文字,就是0 200 400 600 800 1000 show: true, formatter: '{value} ', }, }, { type: 'value', //适用于连续数据 name: 'PH', position: 'right', //右边 alignTicks: true, //开启该配置项自动对齐刻度 min: 0, //初始 max: 14, //结束值 interval: 3, //间距 如果没这3，会自适应数据 splitLine: { show: false, //y轴| 是否显示 lineStyle: { color: '#1160a0', type: 'solid', //实体线 }, }, axisLine: { //纵轴文字,就是0 3 6 9 12 14 show: false, lineStyle: { color: colors[1], }, }, axisLabel: { formatter: '{value} ', }, }, { type: 'value', name: '水温（°C）', show: true, // 添加该配置来隐藏水温纵轴 position: 'right', alignTicks: true, min: 0, max: 100, interval: 20, offset: 80, //向右偏移80 axisLine: { show: false, //y轴| 是否显示 lineStyle: { color: colors[2], }, }, splitLine: { //隐藏纵轴的横线 show: false, lineStyle: { color: '#DCDFE6 ', type: 'dashed', }, }, axisLabel: { //纵轴文字 formatter: '{value} ', }, }, ], series: [ //数据 { name: '浊度', type: 'line', //折线 symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆 smooth: true, //是否平滑 color: '', areaStyle: { normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#bed4e5', }, { offset: 0.6, color: '#aac8d9', }, { offset: 1, color: '#9dbec9', }, ], false ), }, }, data: dataValue, }, { name: 'PH', type: 'line', yAxisIndex: 1, //默认是0就左边那个y轴，1是右边第一个 data: dataValue1, }, { name: '水温', type: 'line', symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆 smooth: true, yAxisIndex: 2, areaStyle: { normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#c1a3aa', }, { offset: 0.6, color: '#b19aa3', }, { offset: 1, color: '#a78c95', }, ], false ), }, }, data: dataValue2, }, ], } this.myChart = this.$echarts.init(document.getElementById('lucky_chart')) this.myChart.setOption(option) }, onResize() { this.myChart && this.myChart.resize() // this.$refs.swiper1 && this.$refs.swiper1.resize(); }, },}
