Skip to content

M
monthReport_smzx
提交 ad78f66e authored 作者: 邓文彬's avatar 邓文彬
浏览文件
操作

fix(图表)： 图表完成

上级 c571475d
隐藏空白字符变更
内嵌 并排
正在显示 包含 169 行增加 和 119 行删除
pages/monthReport/components/rightBar.vue
浏览文件 @ ad78f66e
<template>
<view>
<view class="echartsBar" id="echartsBar"></view>
<view
class="echartsBar"
id="echartsBar"
:prop="option"
:change:prop="echarts.updateEcharts"
></view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<script module="echarts" lang="renderjs">
import * as echarts from "echarts";
export default {
props: {},
......@@ -77,26 +75,49 @@ export default {
};
},
},
async mounted() {
this.$nextTick(() => {
this.init();
});
},
async mounted() {},
methods: {
init() {
const DOM = document.getElementById("echartsBar");
const myChart = echarts.init(DOM);
myChart.setOption(this.option);
window.addEventListener("resize", () => {
myChart.clear();
myChart.setOption(this.option);
myChart && myChart.resize();
});
changeOption() {
// const data = this.option.series[0].data;
// // 随机更新示例数据
// data.forEach((item, index) => {
// data.splice(index, 1, Math.random() * 40);
// });
},
},
};
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echartsBar'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
}
}
</script>
<style lang="scss" scoped>
.echartsBar {
height: 200px;
......
pages/monthReport/components/rightLine.vue
浏览文件 @ ad78f66e
<template>
<view>
<view canvas-id="myChart" id="myChart" class="echartsBar"></view>
<view
id="echartsLine"
class="echartsLine"
:prop="option"
:change:prop="echarts.updateEcharts"
></view>
</view>
</template>
......@@ -8,17 +13,7 @@
export default {
data() {
return {
};
},
};
</script>
<script module="echarts" lang="renderjs">
import * as echarts from "echarts";
export default {
data() {
return {
lists: [
{
name: "终端",
......@@ -59,7 +54,7 @@ export default {
xData = [];
for (let i = 1; i <= 31; i++) {
yData.push(Math.floor(Math.random() * 100));
xData.push("10-" + i.toString().padStart(2, '0'));
xData.push("10-" + i.toString().padStart(2, "0"));
}
serverData.push({
name: item.name,
......@@ -114,6 +109,28 @@ export default {
};
},
},
methods: {
changeOption() {
// const data = this.option.series[0].data;
// // 随机更新示例数据
// data.forEach((item, index) => {
// data.splice(index, 1, Math.random() * 40);
// });
},
},
};
</script>
<!-- <script module="echarts" lang="renderjs">
import * as echarts from "echarts";
export default {
data() {
return {
};
},
mounted() {
// 初始化图表
this.initChart();
......@@ -137,10 +154,39 @@ export default {
}
}
}
</script>
</script> -->
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echartsLine'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
}
}
</script>
<style lang="scss" scoped>
.echartsBar {
.echartsLine {
height: 200px;
width: 100%;
}
......
pages/monthReport/components/rightPie.vue
浏览文件 @ ad78f66e
<template>
<view>
<view id="lineTendencyChart"></view>
<view class="content">
<!-- #ifdef APP-PLUS || H5 -->
<view
:prop="option"
:change:prop="echarts.updateEcharts"
id="echarts"
class="echarts"
></view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view>非 APP、H5 环境不支持</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {};
},
async mounted() {
}
};
</script>
<script module="echarts" lang="renderjs">
import * as echarts from "echarts";
export default {
props: {
value: {
......@@ -25,17 +26,14 @@ export default {
},
data() {
return {
Chart: null,
};
},
async mounted() {
this.$nextTick(() => {
this.initChart();
});
},
onLoad() {},
computed: {
options() {
let dataTmp = this.value;
option() {
let dataTmp = this.value || 0;
let max = 100;
let min = 0;
let scoresPercentage = dataTmp / max;
......@@ -117,16 +115,7 @@ export default {
//底部点位名称
detail: {
show: false,
// offsetCenter: [0, '75%'],
// formatter: ['{name|' + '温度' + '}'].join('\n'),
// rich: {
// name: {
// fontFamily: 'Microsoft YaHei',
// fontSize:14,
// color: 'red',
// lineHeight: 52
// }
// }
},
data: [
{
......@@ -355,23 +344,6 @@ export default {
value: 100,
itemStyle: {
color: "#fcfdff",
// {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '##fcfdff',
// },
// {
// offset: 1,
// color: '#fff',
// },
// ],
// },
},
},
],
......@@ -395,23 +367,6 @@ export default {
value: 100,
itemStyle: {
color: "#fff",
// {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '##fcfdff',
// },
// {
// offset: 1,
// color: '#fff',
// },
// ],
// },
},
},
],
......@@ -421,30 +376,58 @@ export default {
},
},
methods: {
initChart() {
let Chart = echarts.init(document.getElementById("lineTendencyChart"));
Chart.setOption(this.options);
this.Chart = Chart;
window.addEventListener("resize", function () {
Chart.resize();
});
changeOption() {
// const data = this.option.series[0].data;
// // 随机更新示例数据
// data.forEach((item, index) => {
// data.splice(index, 1, Math.random() * 40);
// });
},
},
watch: {
value: {
immediate: true,
handler(val) {
this.$nextTick(() => {
this.initChart();
});
},
onViewClick(options) {
console.log(options);
},
},
};
</script>
<style lang="scss" scoped>
#lineTendencyChart {
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.echarts {
width: 230px;
height: 230px;
}
......
浏览文件 @ ad78f66e
No preview for this file type
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论