tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加mixins功能，修改图标引入方式

Browse Source
This commit is contained in:
MTrunning
2020-06-28 18:15:55 +08:00
parent 46eced28ce
commit 89de9fa802
11 changed files with 163 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/echart/bottom/bottomLeftChart.vue
+9 -10
View File
@@ -5,20 +5,22 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie() {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("bottomLeftChart")
);
this.chart = echarts.init(document.getElementById("bottomLeftChart"));
// ----------------------------------------------------------------
let category = [
"市区",
@@ -255,10 +257,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/bottom/bottomRightChart.vue
+10 -11
View File
@@ -5,26 +5,28 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mounted() {
this.drawPie();
this.draw();
this.charTimg();
},
mixins: [echartMixins],
methods: {
charTimg() {
setInterval(() => {
this.drawPie();
this.draw();
}, 6000);
},
drawPie() {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("bottomRightChart")
);
this.chart = echarts.init(document.getElementById("bottomRightChart"));
// ----------------------------------------------------------------
// 数据
let dateBase = new Date();
@@ -392,10 +394,7 @@ export default {
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/center/centerChartRate.vue
+9 -8
View File
@@ -5,13 +5,17 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
props: {
id: {
@@ -41,9 +45,9 @@ export default {
}
},
methods: {
drawPie() {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(document.getElementById(this.id));
this.chart = echarts.init(document.getElementById(this.id));
// ----------------------------------------------------------------
let tips = this.tips;
let option = {
@@ -88,10 +92,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/centerLeft2/centreLeft1Chart.vue
+9 -14
View File
@@ -5,23 +5,25 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie(sidebar) {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreLeft1Chart")
);
this.chart = echarts.init(document.getElementById("centreLeft1Chart"));
// ----------------------------------------------------------------
myChartPieLeft.setOption({
this.chart.setOption({
color: [
"#37a2da",
"#32c5e9",
@@ -68,13 +70,6 @@ export default {
}
]
});
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
}
},
destroyed() {
src/components/echart/centerLeft2/centreLeft2Chart.vue
+9 -14
View File
@@ -5,20 +5,22 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie(sidebar) {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreLeft2Chart")
);
this.chart = echarts.init(document.getElementById("centreLeft2Chart"));
// ----------------------------------------------------------------
let option = {
@@ -188,14 +190,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/centreRight2/centreRight2Chart1.vue
+13 -20
View File
@@ -5,24 +5,24 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie(sidebar) {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreRight2Chart1")
);
this.chart = echarts.init(document.getElementById("centreRight2Chart1"));
// ----------------------------------------------------------------
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var dataBJ = [
let dataBJ = [
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
@@ -32,7 +32,7 @@ export default {
[160, 120, 186, 2.77, 91, 50, 28]
];
var dataGZ = [
let dataGZ = [
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
@@ -42,7 +42,7 @@ export default {
[56, 48, 68, 1.336, 37, 9, 28]
];
var dataSH = [
let dataSH = [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
@@ -52,7 +52,7 @@ export default {
[106, 77, 114, 1.07, 55, 51, 7]
];
var lineStyle = {
let lineStyle = {
normal: {
width: 1,
opacity: 0.5
@@ -151,14 +151,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
this.chart.setOption(option);
}
},
destroyed() {
src/main.js
+17 -12
View File
@@ -1,21 +1,26 @@
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import dataV from "@jiaminghi/data-view";
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import dataV from '@jiaminghi/data-view';
Vue.use(dataV);
// 引入vue-awesome
import Icon from "vue-awesome/components/Icon";
import "vue-awesome/icons/index.js";
// 按需引入vue-awesome图标
import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js';
import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js';
// 全局注册图标
Vue.component("icon", Icon);
Vue.component('icon', Icon);
// 适配flex
import "@/common/flexible.js";
import '@/common/flexible.js';
// 引入全局css
import "./assets/scss/style.scss";
import './assets/scss/style.scss';
Vue.config.productionTip = false;
@@ -23,4 +28,4 @@ new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
}).$mount('#app');
src/utils/index.js
+34
View File
@@ -0,0 +1,34 @@
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp;
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function(...args) {
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}
src/utils/resizeMixins.js
+26
View File
@@ -0,0 +1,26 @@
// 混入代码 resize-mixins.js
import { debounce } from '@/utils/index';
const resizeChartMethod = '$__resizeChartMethod';
export default {
data() {
// 在组件内部将图表init的引用映射到chart属性上
return {
chart: null,
};
},
created() {
window.addEventListener('resize', this[resizeChartMethod], false);
},
beforeDestroy() {
window.removeEventListener('reisze', this[resizeChartMethod]);
},
methods: {
// 通过lodash的防抖函数来控制resize的频率
[resizeChartMethod]: debounce(function() {
if (this.chart) {
this.chart.resize();
}
}, 100),
},
};
src/views/index.vue
+1 -1
View File
@@ -126,7 +126,7 @@ export default {
cancelLoading() {
setTimeout(() => {
this.loading = false;
}, 2000);
}, 500);
}
}
};