前端Echarts自適應(yīng)分辨率和縮放功能代碼實例
更新時間：2024年07月29日 10:26:21 作者：Lucky小維
ECharts提供了自適應(yīng)功能,可以自動調(diào)整圖表大小以適應(yīng)屏幕變化,下面這篇文章主要給大家介紹了關(guān)于前端Echarts自適應(yīng)分辨率和縮放功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
版本
yarn add echarts@4.9.0 yarn 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', //滑動條型數(shù)據(jù)縮放組件
start: 90, //數(shù)據(jù)窗口的起始位置百分比
end: 100, //數(shù)據(jù)窗口的結(jié)束位置百分比
height: 6, //數(shù)據(jù)縮放組件的高度
bottom: 20, //數(shù)據(jù)縮放組件距離底部的距離
realtime: false, //是否實時顯示，這里是 false，表示拖動結(jié)束時才觸發(fā)數(shù)據(jù)變化
backgroundColor: '#EDF0F5', //數(shù)據(jù)縮放組件的背景色
handleSize: 12, //滑塊的大小
//滑塊的圖標(biāo)
handleIcon:
'image://data:image/png;base64,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',
dataBackground: {
//數(shù)據(jù)區(qū)域的背景配置
lineStyle: {
//數(shù)據(jù)區(qū)域邊界線的樣式配置，這里設(shè)置為透明
opacity: 0,
},
areaStyle: {
//數(shù)據(jù)區(qū)域填充樣式配置，這里設(shè)置為透明
opacity: 0,
},
},
selectedDataBackground: {
//選中數(shù)據(jù)區(qū)域的背景配置
lineStyle: {
//選中數(shù)據(jù)區(qū)域邊界線的樣式配置，這里設(shè)置為透明
opacity: 0,
},
areaStyle: {
// 選中數(shù)據(jù)區(qū)域填充樣式配置，這里設(shè)置為透明
opacity: 0,
},
brushStyle: {
//選中數(shù)據(jù)區(qū)域的刷子樣式配置，這里設(shè)置邊框顏色為紅色
borderColor: '#f00',
},
},
// fillerColor: ' #A3A1FB', //數(shù)據(jù)區(qū)域的填充顏色 紫色
textStyle: {
color: 'transparent', //文本顏色，這里設(shè)置為透明
},
},
],
}
使用
<template>
<div class="mod-demo-echarts">
<el-row :gutter="20">
<el-col :span="17">
<el-card>
<div id="lucky_chart" style="min-height: 400px"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
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軸數(shù)據(jù)
let dataValue = [120, 130, 140, 135, 134, 115, 156, 115, 112, 215, 134, 142] //y軸數(shù)據(jù)1
let dataValue1 = [1.0, 3.0, 2.0, 1.0, 3, 1, 2, 3.2, 4.5, 5.0, 4.3, 3] //y軸數(shù)據(jù)2
let dataValue2 = [3, 6, 7, 15, 8, 5, 2, 5, 4, 2, 10, 3] //y軸數(shù)據(jù)3
let colors = ['#a5c5d4', '#91CC75', '#EE6666'] //顏色
let option = {
dataZoom: dataZoom,
color: colors,
tooltip: {
//懸浮放上面的提示
trigger: 'axis', //坐標(biāo)軸觸發(fā)
axisPointer: {
type: 'line', //直線指示器
},
},
grid: {
right: '20%', //echarts離容器左側(cè)的距離
},
toolbox: {
//工具欄。內(nèi)置有導(dǎo)出圖片，數(shù)據(jù)視圖，動態(tài)類型切換，數(shù)據(jù)區(qū)域縮放，重置五個工具。
feature: {
dataView: { show: true, readOnly: false }, //數(shù)據(jù)視圖
restore: { show: true }, //重置
saveAsImage: { show: true }, //下載
},
},
legend: {
//圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字?？梢酝ㄟ^點擊圖例控制哪些系列不顯示
data: ['濁度', 'PH', '水溫'], //就是圖表上面正中間那3，點擊某個某個就能隱藏
},
xAxis: [
{
type: 'category', //類目軸，適用于離散的類目數(shù)據(jù)。為該類型時類目數(shù)據(jù)可自動從 series.data 或 dataset.source 中取，或者可通過 xAxis.data 設(shè)置類目數(shù)據(jù)
boundaryGap: false, //false從0開始,最少x會放0位置
axisTick: {
//坐標(biāo)軸刻度|和數(shù)據(jù)是對齊的，加上這個
alignWithLabel: true,
},
// prettier-ignore
data: xLabel, //x軸數(shù)據(jù)
},
],
yAxis: [
//直角坐標(biāo)系 grid 中的 y 軸，一般情況下單個 grid 組件最多只能放左右兩個 y 軸，多于兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。
{
type: 'value', //適用于連續(xù)數(shù)據(jù)
name: '濁度（ntu）', //坐標(biāo)軸名稱
position: 'left', //左邊
alignTicks: true, //開啟該配置項自動對齊刻度
min: 0, //初始
max: 1000, //結(jié)束值
interval: 200, //間距 如果沒這3，會自適應(yīng)數(shù)據(jù)
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', //適用于連續(xù)數(shù)據(jù)
name: 'PH',
position: 'right', //右邊
alignTicks: true, //開啟該配置項自動對齊刻度
min: 0, //初始
max: 14, //結(jié)束值
interval: 3, //間距 如果沒這3，會自適應(yīng)數(shù)據(jù)
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: [
//數(shù)據(jù)
{
name: '濁度',
type: 'line', //折線
symbol: 'none', // 默認(rèn)是空心圓（中間是白色的），改成實心圓
smooth: true, //是否平滑
color: '',
areaStyle: {
normal: {
//線性漸變，前4個參數(shù)分別是x0,y0,x2,y2(范圍0~1);相當(dāng)于圖形包圍盒中的百分比。如果最后一個參數(shù)是‘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, //默認(rèn)是0就左邊那個y軸，1是右邊第一個
data: dataValue1,
},
{
name: '水溫',
type: 'line',
symbol: 'none', // 默認(rèn)是空心圓（中間是白色的），改成實心圓
smooth: true,
yAxisIndex: 2,
areaStyle: {
normal: {
//線性漸變，前4個參數(shù)分別是x0,y0,x2,y2(范圍0~1);相當(dāng)于圖形包圍盒中的百分比。如果最后一個參數(shù)是‘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();
},
},
}
</script>
總結(jié)
到此這篇關(guān)于前端Echarts自適應(yīng)分辨率和縮放功能的文章就介紹到這了,更多相關(guān)Echarts自適應(yīng)分辨率和縮放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)的自定義右鍵菜單,以兩則實例形式分析了javascript自定義右鍵菜單效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
深入解析Javascript閉包的功能及實現(xiàn)方法
這篇文章主要為大家詳細(xì)解析Javascript閉包的功能及實現(xiàn)方法，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了JS常用倒計時代碼,結(jié)合實例形式總結(jié)分析了JS常用的倒計時功能實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序rich-text富文本用法,結(jié)合實例形式分析了微信小程序rich-text富文本插件的功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JS原型與繼承操作,涉及javascript面向?qū)ο蟪绦蛟O(shè)計中原形與繼承的相關(guān)定義、實例化操作技巧,需要的朋友可以參考下2019-05-05
下面小編就為大家?guī)硪黄褂胘s獲取地址欄參數(shù)的方法推薦(超級簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Javascript中產(chǎn)生固定結(jié)果的函數(shù)優(yōu)化技巧
分享一個Javascript編寫函數(shù)的優(yōu)化技巧;適用的函數(shù)應(yīng)該要滿足以下條件;產(chǎn)生固定結(jié)果;復(fù)雜或較耗時等等，感興趣的朋友可以了解下2013-01-01
JS針對瀏覽器窗口關(guān)閉事件的監(jiān)聽方法集錦
這篇文章主要介紹了JS針對瀏覽器窗口關(guān)閉事件的監(jiān)聽方法,總結(jié)整理了幾種常用的瀏覽器關(guān)閉事件監(jiān)聽方法,非常簡單實用,需要的朋友可以參考下2016-06-06
BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實現(xiàn)百度下拉效果(續(xù))
這篇文章主要介紹了BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實現(xiàn)百度下拉效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
js中如何對嵌套數(shù)組進(jìn)行filter過濾
這篇文章主要介紹了js中如何對嵌套數(shù)組進(jìn)行filter過濾問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06