2. 程式人生 > >echarts 在 vue 隨瀏覽器視窗改變響應

echarts 在 vue 隨瀏覽器視窗改變響應

阿新 • • 發佈：2019-01-26
// 引入 echarts 主模組。 import * as echarts from 'echarts/lib/echarts' // 引入折線圖。 import 'echarts/lib/chart/pie' import 'echarts/lib/chart/bar' // 引入提示框元件、標題元件、工具箱元件。 import 'echarts/lib/component/title' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' import home from '@/api/home' var clearId export default
{ data() { return { countNum: 0, options_person: { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', x: 'right', bottom: 'center', itemWidth: 20, itemHeight: 20
, data: ['教職工', '學生', '訪客', '社會人員', '其他'] }, series: [ { name: '人員佔比', type: 'pie', radius: ['60%', '80%'], center: ["40%", "50%"], avoidLabelOverlap: false, label: { normal: { show: false
, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '22', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ { value: 0, name: '教職工', itemStyle: { color: '#728FFC' } }, { value: 0, name: '學生', itemStyle: { color: '#FFB22D' } }, { value: 0, name: '訪客', itemStyle: { color: '#3EB934' } }, { value: 0, name: '社會人員', itemStyle: { color: '#FF6EEC' } }, { value: 0, name: '其他', itemStyle: { color: '#FF6E9B' } } ] } ] }, options_statistical: { title: { text: '進出人數', textStyle: { color: '#000', fontWeight: '400', fontSize: 14 } }, tooltip: { //提示框元件 trigger: 'axis', formatter: '{b}<br/>{a0}: {c0}<br/>', axisPointer: { type: 'shadow' }, textStyle: { color: '#fff', fontStyle: 'normal', fontFamily: '微軟雅黑', fontSize: 12 } }, grid: { left: 0, right: 0, bottom: 0, top: 50, containLabel: true }, xAxis: [ { type: 'category', data: [], axisLabel: { //座標軸刻度標籤的相關設定。 // interval: 0,//設定為 1，表示『隔一個標籤顯示一個標籤』 // margin:15, textStyle: { color: '#000', fontStyle: 'normal', fontFamily: '微軟雅黑', fontSize: 12 }, rotate: 65 }, axisTick: { //座標軸刻度相關設定。 show: false }, axisLine: { //座標軸軸線相關設定 lineStyle: { color: '#fff', opacity: 0.2 } }, splitLine: { //座標軸在 grid 區域中的分隔線。 show: false } } ], yAxis: [ { type: 'value', splitNumber: 5, axisLabel: { textStyle: { color: '#000', fontStyle: 'normal', fontFamily: '微軟雅黑', fontSize: 12 } }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: true, lineStyle: { color: ['#DCDCDC'], opacity: 1 } } } ], series: [ { name: '總數量', type: 'bar', data: [], barWidth: 10, barGap: 0, //柱間距離 label: { //圖形上的文字標籤 normal: { show: true, position: 'top', textStyle: { color: '#000', fontStyle: 'normal', fontFamily: '微軟雅黑', fontSize: 12 } } }, itemStyle: { normal: { show: true, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#FF6EEC' }, { offset: 1, color: '#728FFC' } ]), barBorderRadius: 50, borderWidth: 0 } } } ] }, homeBar: '', homePie: '' } }, mounted() { this.drawLines(); // 重點，能夠響應瀏覽器視窗改變的程式碼：原理主要是 // 監聽瀏覽器視窗變化，進而重新繪製圖表 window.addEventListener('resize', () => { this.homeBar.resize(); // 多個圖表，第一個圖表 this.homePie.resize(); // 多個圖表，第二個圖表 }); }, methods: { drawLines() { // 基於echarts，初始化 echarts 例項並繪製圖表 this.homePie = echarts.init(this.$refs._person_chart); this.homePie.setOption(this.options_person); this.homeBar = echarts.init(this.$refs._statistical_chart) this.homeBar.setOption(this.options_statistical) }, init() { home.homeReportBySchool().then((res) => { res.map((item, index) => { this.options_statistical.xAxis[0].data[index] = item.name this.options_statistical.series[0].data[index] = item.count }) this.drawLines() }) }, scaleByPerson() { this.countNum = 0; home.homeScaleByPerson().then((res) => { let new_res = res.filter((item) => { return item.name != '總數' }) let count_array = res.filter((item) => { return item.name == '總數' })[0] this.options_person.legend.data = new_res.map((i) => { return i.name }) new_res.map((item, index) => { this.options_person.series[0].data[index].name = item.name; this.options_person.series[0].data[index].value = item.count; }) this.countNum = (count_array && count_array.count) ? count_array.count : 0; this.drawLines() }) } }, created() { this.init() this.scaleByPerson() clearId = setInterval(() => { this.init() }, 5000) }, destroyed() { clearTimeout(clearId); } }

相關推薦

echarts 在 vue 隨瀏覽器視窗改變響應

// 引入 echarts 主模組。 import * as echarts from 'echarts/lib/echarts' // 引入折線圖。 import 'echarts/lib/chart/pie' import 'echarts/lib/chart/bar' // 引入提示框元件、標題元件、

jquery 獲取瀏覽器視窗改變事件

$(window).resize(function() { var width = $(this).width(); var height = $(this).height(); //console.log('width'+width+'-height'+height); ｝

vue 關閉瀏覽器視窗的時候，清空localStorage的資料

如果是用vue做的單頁面程式的時候，將監聽的方法放在App.vue是最靈活的 <template> <div id="main" class="app-main"> <router-view></router

【vue】vue 關閉瀏覽器視窗的時候，清空localStorage的資料

vue 關閉瀏覽器視窗的時候，清空localStorage的資料 如果是用vue做的單頁面程式的時候，將監聽的方法放在App.vue是最靈活的 <template> <div id="main" class="app-main"> &l

瀏覽器視窗大小改變時頁面尾部 footer 可以以原來寬度隨滾動條顯示

今天在做前端頁面時碰到一個問題，發現footer底部部分當改變瀏覽器視窗大小時（變小），底部的內容背景色看到的區域也變小了，滾動條向右拉動，右邊留白了一部分，而左邊的內容不能顯示完整，就像下圖這樣： 想把它做成人家這樣： 於是思考半天想出來解決方案，很簡單，給bod

js實現字型和容器寬高隨視窗改變

  用於字型大小和容器的寬高字型和寬高設為rem就可以了 var html = document.documentElement; 　　function fonts(){ 　　var hW = html.offsetWidth;   　　var&

vue 解決介面資料改變 檢視不能實時響應的問題

問題：在vue專案中，新增，刪除，更改等操作後，介面資料已經更改，但是檢視需重新整理才可更改 原因：因為資料層次太多，render函式沒有自動更新 解決：手動強制重新整理 呼叫this.$forceUpdate(); 方法 var flag = true; for (let k

設定html的根rem（隨視窗改變自動調整）

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in

asp.net 呼叫echarts顯示圖表控制元件隨瀏覽器自適應解決方案

1、問題來源        我們在asp.net開發中常使用到frameset的框架結構，比如上左中右方式，在中間部分是一個可以控制左側部分顯示隱藏的功能，這時右邊內容區域如果有使用echarts進行圖表顯示時，就會出現不能隨瀏覽器自適應，我們該如何做呢？2、解決方法   

flash大小隨瀏覽器大小變化自動變化 flash全屏 swf大小自動適應瀏覽器視窗的變化

第一步：註釋掉flex專案中的詞句 //[SWF(width="1250",height="650",backgroundColor="0X00AAFF")] As程式碼如下：呼叫AddEvent介面 package helper.fullScreen { import

vlc sdl 播放視訊可隨視窗改變大小

#include <stdio.h> #include <stdint.h> #include <math.h> #include <stdlib.h> #include <assert.h>   #include

js瀏覽器視窗大小改變時事件

設定一個寬高根據當前視窗自適應的div，當頁面大小發生改變時，div的寬高也隨之發生改變： <div id="homePage_svcSuccessData" class="main" st

MFC----視窗的縮放及控制元件隨拖動改變大小

當我們想得到一個視窗物件（CWnd的派生物件）指標的控制代碼（HWND）時，最安全的方法是使用GetSafeHwnd()函式，通過下面的例子來看其理由： 　　CWnd *pwnd = FindWindow(“ExploreWClass”,NULL); //希望找到資源管理器 　　HWND hwnd = pwn

vue 什麼是漸進式 響應式 意思。Vue常用的指令。VUE:跨域設定。vue router 新視窗。$router.push。

Vue  是 輕量的 模型檢視檢視模型 框架。就是資料的雙向開發。資料驅動+元件化開發。漸進式框架。官網：cn.vuejs.org在讀 Vue2.0 文件的時候，介紹“Vue.js（讀音 /vjuː/,類似於 view）是一套構建使用者介面的漸進式框架。與其他重量級不同的是，

echarts使圖示能自適應瀏覽器視窗變化，及經緯度轉換

1、echarts使圖示能自適應瀏覽器視窗變化 window.onresize = function () {myChart.resize(); //使第一個圖表適應myChart_pieMain.r

瀏覽器視窗大小改變，onresize()事件觸發兩次

當瀏覽器視窗大小改變的時候將會觸發onresize事件 可以監控該事件的發生做一些響應式的處理 JS： window.onresize(function(){ //code }): jQuery: $(window).resize(functi

Ext3.2.2 表格隨視窗改變動態適應窗體大小

首先是要有個表格物件var grid = new Ext.grid.GridPanel({ bodyStyle:'width:100%', store: store, columns: columns, stripeRows: true, au

echarts 隨螢幕大小改變大小chart.resize()

<script> function mainchart(){ // 基於準備好的dom，初始化echarts例項 var resourceChart = echarts.init(document.getElementById('mainchart'

jsp頁面提交的時候，瀏覽器提示未響應，因為腳本長時間運行

and 點擊事件 點擊 btn func logs pan handler 頁面提交 解決的思路： 首先是對問題的分析，在提交的時候出現的問題，所以從jsp頁面的提交方法入手 原來的jsp頁面： 1 <!-- 提交按鈕

CSS實現背景圖尺寸不隨瀏覽器縮放而變化的兩種方法

簡單 fix chrom per 實現 瀏覽器 webkit 只需要 div 方法一. 把圖片作為background 有幾個CSS的屬性要提一下：background-size：cover，這個CSS3的屬性作用是把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域，背景