vue+highCharts實現(xiàn)可選范圍的圖表
更新時間：2022年03月27日 15:37:37 作者：String佳佳
這篇文章主要為大家詳細介紹了vue+highCharts實現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue+highCharts實現(xiàn)可選范圍的圖表，供大家參考，具體內容如下
效果圖：
實現(xiàn)方法（數(shù)據(jù)可自行修改）：
<div id="container" style="width: 100%;height:370px;position: relative"> ? <div id="detailContainer" ref="chart1" style="width:100%;height:370px" /> ? <div id="masterContainer" ref="chart2" style="position: absolute;top: 270px;height: 100px;width: 100%" /> </div>
import Highcharts from 'highcharts'//eslint-disable-line
import $ from 'jquery'
var detailChart //eslint-disable-line
var masterChart //eslint-disable-line
export default {
? name: 'CollectDataCharts',
? data() {
? ? return {
? ? ? detailChartData: [//eslint-disable-line
? ? ? ? 0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
? ? ? ? 0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
? ? ? ? 0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269,
? ? ? ? 0.8269, 0.8258, 0.8247, 1.8286, 0.8289, 0.8316, 0.832, 0.8333, 0.8352, 0.8357,
? ? ? ? 0.8355, 0.8354, 0.8403, 0.8403, 0.8406, 0.8403, 0.8396, 0.8418, 0.8409, 0.8384,
? ? ? ? 0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,
? ? ? ? 0.838, 0.8373, 0.8316, 0.8303, 0.8303, 0.8302, 0.8369, 0.84, 0.8385, 0.84,
? ? ? ? 0.8401, 0.8402, 0.8381, 0.8351, 0.8314, 0.8273, 0.8213, 0.8207, 0.8207, 0.8215,
? ? ? ? 0.8242, 0.8273, 0.8301, 0.8346, 0.8312, 0.8312, 0.8312, 0.8306, 0.8327, 0.8282,
? ? ? ? 0.824, 0.8255, 0.8256, 0.8273, 0.8209, 1.8151, 0.8149, 0.8213, 0.8273, 0.8273, // 100
? ? ? ? 0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097,
? ? ? ? 0.8101, 0.8119, 0.8107, 0.8105, 0.8084, 0.8069, 0.8047, 0.8023, 0.7965, 0.7919,
? ? ? ? 0.7921, 0.7922, 0.7934, 0.7918, 0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867,
? ? ? ? 0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816,
? ? ? ? 0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845,
? ? ? ? 0.7798, 0.7777, 0.7822, 0.7785, 0.7744, 0.7743, 0.7726, 0.7766, 0.7806, 0.785,
? ? ? ? 0.7907, 0.7912, 1.7913, 0.7931, 0.7952, 0.7951, 0.7928, 0.791, 0.7913, 0.7912,
? ? ? ? 0.7941, 0.7953, 0.7921, 0.7919, 0.7968, 0.7999, 0.7999, 0.7974, 0.7942, 0.796,
? ? ? ? 0.7969, 0.7862, 0.7821, 0.7821, 0.7821, 0.7811, 0.7833, 0.7849, 0.7819, 0.7809,
? ? ? ? 0.7809, 0.7827, 0.7848, 0.785, 0.7873, 0.7894, 0.7907, 0.7909, 0.7947, 0.7987, // 200
? ? ? ? 0.799, 0.7927, 0.79, 0.7878, 0.7878, 0.7907, 0.7922, 0.7937, 0.786, 0.787,
? ? ? ? 0.7838, 0.7838, 0.7837, 0.7836, 0.7806, 0.7825, 0.7798, 0.777, 0.777, 0.7772,
? ? ? ? 0.7793, 0.7788, 0.7785, 0.7832, 0.7865, 0.7865, 0.7853, 0.7847, 0.7809, 0.778,
? ? ? ? 0.7799, 0.78, 0.7801, 0.7765, 0.7785, 0.7811, 0.782, 0.7835, 0.7845, 0.7844,
? ? ? ? 0.782, 0.7811, 0.7795, 0.7794, 0.7806, 0.7794, 0.7794, 0.7778, 0.7793, 0.7808,
? ? ? ? 0.7824, 0.787, 0.7894, 0.7893, 0.7882, 1.7871, 0.7882, 0.7871, 0.7878, 0.79,
? ? ? ? 0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786,
? ? ? ? 0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901,
? ? ? ? 0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995, 0.7994,
? ? ? ? 0.7976, 0.7977, 0.796, 0.7922, 0.7928, 0.7929, 0.7948, 0.797, 0.7953, 0.7907 // 300
? ? ? ]
? ? }
? },
? mounted() {
? ? $(window).resize(() => {
? ? ? detailChart.reflow()
? ? ? masterChart.reflow()
? ? })
? },
? beforeDestroy() {
? ? $(window).off('resize')
? },
? methods: {
? ? createDetail(masterChart) {
? ? ? var detailData = []
? ? ? Highcharts.each(masterChart.series[0].data, (d, index) => {
? ? ? ? if (d.x < 30) {
? ? ? ? ? detailData.push({
? ? ? ? ? ? x: d.x,
? ? ? ? ? ? y: d.y,
? ? ? ? ? ? time: d.time
? ? ? ? ? })
? ? ? ? }
? ? ? })
? ? ? detailChart = Highcharts.chart('detailContainer', {
? ? ? ? chart: {
? ? ? ? ? type: 'area', // areaspline
? ? ? ? ? marginBottom: 120,
? ? ? ? ? reflow: false,
? ? ? ? ? marginLeft: 50,
? ? ? ? ? marginRight: 20,
? ? ? ? ? style: {
? ? ? ? ? ? position: 'absolute'
? ? ? ? ? }
? ? ? ? },
? ? ? ? credits: {
? ? ? ? ? enabled: false
? ? ? ? },
? ? ? ? title: {
? ? ? ? ? text: ''
? ? ? ? },
? ? ? ? subtitle: {
? ? ? ? ? text: ''
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? // type: 'datetime'
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? gridLineDashStyle: 'dash',
? ? ? ? ? title: {
? ? ? ? ? ? text: null
? ? ? ? ? },
? ? ? ? ? maxZoom: 0.1
? ? ? ? },
? ? ? ? tooltip: {
? ? ? ? ? formatter: function() {
? ? ? ? ? ? var point = this.points[0]
? ? ? ? ? ? const date = new Date(point.point.time)
? ? ? ? ? ? const y = date.getFullYear()
? ? ? ? ? ? let MM = date.getMonth() + 1
? ? ? ? ? ? MM = MM < 10 ? ('0' + MM) : MM
? ? ? ? ? ? let d = date.getDate()
? ? ? ? ? ? d = d < 10 ? ('0' + d) : d
? ? ? ? ? ? let h = date.getHours()
? ? ? ? ? ? h = h < 10 ? ('0' + h) : h
? ? ? ? ? ? let m = date.getMinutes()
? ? ? ? ? ? m = m < 10 ? ('0' + m) : m
? ? ? ? ? ? let s = date.getSeconds()
? ? ? ? ? ? s = s < 10 ? ('0' + s) : s
? ? ? ? ? ? const time = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
? ? ? ? ? ? return '<span>' + time + '</span><br/>' +
? ? ? ? ? ? ? ? '<b>' + point.series.name + '：' + point.y + ' mm/s</b>'
? ? ? ? ? },
? ? ? ? ? shared: true
? ? ? ? },
? ? ? ? legend: {
? ? ? ? ? enabled: false
? ? ? ? },
? ? ? ? plotOptions: {
? ? ? ? ? series: {
? ? ? ? ? ? shadow: {
? ? ? ? ? ? ? color: '#e1e8fe',
? ? ? ? ? ? ? width: 6,
? ? ? ? ? ? ? offsetY: 3
? ? ? ? ? ? },
? ? ? ? ? ? marker: {
? ? ? ? ? ? ? enabled: true,
? ? ? ? ? ? ? radius: 3.5,
? ? ? ? ? ? ? states: {
? ? ? ? ? ? ? ? hover: {
? ? ? ? ? ? ? ? ? enabled: true,
? ? ? ? ? ? ? ? ? radius: 3
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? fillColor: {// 注意！??！如果是柱狀圖請使用color，如果是面積圖請使用fillColor
? ? ? ? ? ? ? linearGradient: {
? ? ? ? ? ? ? ? x1: 0,
? ? ? ? ? ? ? ? y1: 0,
? ? ? ? ? ? ? ? x2: 0,
? ? ? ? ? ? ? ? y2: 1
? ? ? ? ? ? ? },
? ? ? ? ? ? ? stops: [
? ? ? ? ? ? ? ? [0, '#f3f6ff'],
? ? ? ? ? ? ? ? [1, Highcharts.Color('white').setOpacity(0).get('rgba')]
? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? series: [{
? ? ? ? ? name: '總體振動',
? ? ? ? ? animation: false,
? ? ? ? ? color: '#225FFB',
? ? ? ? ? data: detailData
? ? ? ? }]
? ? ? })
? ? },
? ? createMaster() {
? ? ? let detailData = []//eslint-disable-line
? ? ? Highcharts.each(this.detailChartData, (d, index) => {
? ? ? ? if (d) {
? ? ? ? ? detailData.push({
? ? ? ? ? ? x: Number(index) + 1,
? ? ? ? ? ? y: Number(d),
? ? ? ? ? ? time: 1639538317248
? ? ? ? ? })
? ? ? ? }
? ? ? })
? ? ? masterChart = Highcharts.chart('masterContainer', {
? ? ? ? chart: {
? ? ? ? ? type: 'spline',
? ? ? ? ? reflow: false,
? ? ? ? ? borderWidth: 0,
? ? ? ? ? backgroundColor: null,
? ? ? ? ? marginLeft: 50,
? ? ? ? ? marginRight: 20,
? ? ? ? ? zoomType: 'x',
? ? ? ? ? events: {
? ? ? ? ? ? // listen to the selection event on the master chart to update the
? ? ? ? ? ? // extremes of the detail chart
? ? ? ? ? ? selection: function(event) {
? ? ? ? ? ? ? var extremesObject = event.xAxis[0]
? ? ? ? ? ? ? var min = extremesObject.min
? ? ? ? ? ? ? var max = extremesObject.max
? ? ? ? ? ? ? var detailData = []
? ? ? ? ? ? ? var xAxis = this.xAxis[0]
? ? ? ? ? ? ? Highcharts.each(this.series[0].data, (d, index) => {
? ? ? ? ? ? ? ? if (d.x > min && d.x < max) {
? ? ? ? ? ? ? ? ? detailData.push({
? ? ? ? ? ? ? ? ? ? x: d.x,
? ? ? ? ? ? ? ? ? ? y: d.y,
? ? ? ? ? ? ? ? ? ? time: d.time
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? ? ? xAxis.removePlotBand('mask-before')
? ? ? ? ? ? ? xAxis.addPlotBand({
? ? ? ? ? ? ? ? id: 'mask-before',
? ? ? ? ? ? ? ? from: 1,
? ? ? ? ? ? ? ? to: min,
? ? ? ? ? ? ? ? color: 'rgba(0, 0, 0, 0.1)'
? ? ? ? ? ? ? })
? ? ? ? ? ? ? xAxis.removePlotBand('mask-after')
? ? ? ? ? ? ? xAxis.addPlotBand({
? ? ? ? ? ? ? ? id: 'mask-after',
? ? ? ? ? ? ? ? from: max,
? ? ? ? ? ? ? ? to: 300,
? ? ? ? ? ? ? ? color: 'rgba(0, 0, 0, 0.1)'
? ? ? ? ? ? ? })
? ? ? ? ? ? ? detailChart.series[0].setData(detailData)
? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? title: {
? ? ? ? ? text: null
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? plotBands: [{
? ? ? ? ? ? id: 'mask-before',
? ? ? ? ? ? from: 30,
? ? ? ? ? ? to: 300,
? ? ? ? ? ? color: 'rgba(0, 0, 0, 0.1)'
? ? ? ? ? }],
? ? ? ? ? title: {
? ? ? ? ? ? text: null
? ? ? ? ? }
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? gridLineWidth: 0,
? ? ? ? ? labels: {
? ? ? ? ? ? enabled: false
? ? ? ? ? },
? ? ? ? ? title: {
? ? ? ? ? ? text: null
? ? ? ? ? },
? ? ? ? ? min: 0.6,
? ? ? ? ? showFirstLabel: false
? ? ? ? },
? ? ? ? tooltip: {
? ? ? ? ? formatter: () => {
? ? ? ? ? ? return false
? ? ? ? ? }
? ? ? ? },
? ? ? ? legend: {
? ? ? ? ? enabled: false
? ? ? ? },
? ? ? ? credits: {
? ? ? ? ? enabled: false
? ? ? ? },
? ? ? ? plotOptions: {
? ? ? ? ? series: {
? ? ? ? ? ? fillColor: {
? ? ? ? ? ? ? linearGradient: [0, 0, 0, 70],
? ? ? ? ? ? ? stops: [
? ? ? ? ? ? ? ? [0, '#c3cffe'],
? ? ? ? ? ? ? ? [1, 'rgba(255,255,255,0)']
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? lineWidth: 1,
? ? ? ? ? ? marker: {
? ? ? ? ? ? ? enabled: false
? ? ? ? ? ? },
? ? ? ? ? ? shadow: false,
? ? ? ? ? ? states: {
? ? ? ? ? ? ? hover: {
? ? ? ? ? ? ? ? lineWidth: 1
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? enableMouseTracking: false
? ? ? ? ? }
? ? ? ? },
? ? ? ? series: [{
? ? ? ? ? type: 'area',
? ? ? ? ? name: 'USD to EUR',
? ? ? ? ? pointInterval: 100,
? ? ? ? ? pointStart: 1,
? ? ? ? ? animation: false,
? ? ? ? ? color: '#225FFB',
? ? ? ? ? data: detailData
? ? ? ? }],
? ? ? ? exporting: {
? ? ? ? ? enabled: false
? ? ? ? }
? ? ? }, (masterChart) => {
? ? ? ? this.createDetail(masterChart)
? ? ? })
? ? ? return masterChart
? ? }
? }
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解Vue SPA項目優(yōu)化小記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue中函數(shù)防抖節(jié)流的理解及應用實現(xiàn)
這篇文章主要介紹了Vue中函數(shù)防抖節(jié)流的理解及應用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
今天小編就為大家分享一篇vue組件開發(fā)之用戶無限添加自定義填寫表單的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了vue單頁面SEO優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
antv完成區(qū)間柱形圖一列多柱配置實現(xiàn)詳解
這篇文章主要為大家介紹了antv完成區(qū)間柱形圖一列多柱配置實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在使用npm命令時,如果直接從國外的倉庫下載依賴,下載速度很慢,甚至會下載不下來,我們可以更換npm的倉庫源,提高下載速度,這篇文章主要給大家介紹了關于vue中npm如何設置倉庫地址的相關資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了nuxt.js中間件實現(xiàn)攔截權限判斷的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue前端框架—Mint UI的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉的示例
今天小編就為大家分享一篇vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09