Skip to content

P
pica-learning-report
提交 7484f2e4 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

图表样式处理

上级 fc6e6ea9
隐藏空白字符变更
内嵌 并排
正在显示 包含 113 行增加 和 72 行删除
components/bussiness/charts/chart-column-horizontal-tc-long.vue
浏览文件 @ 7484f2e4
<!-- 柱状图-竖向 -->
<template>
<div class="chart-column-vtc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<div>
<div class="chart-column-vtc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</div>
<CommonNoMore></CommonNoMore>
</div>
</template>
<script>
let vm = null;
import CommonNoMore from "@/components/common/common-no-more";
// let chartColumn = null;
export default {
components: {
CommonNoMore
},
props: {
id: {
type: String,
......@@ -32,7 +39,7 @@ export default {
data() {
return {
chartWidth: "100%",
chartHeight: "350px"
chartHeight: "200px"
};
},
watch: {
......@@ -56,37 +63,40 @@ export default {
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = clientWidth + "px";
// this.chartHeight = 54 * 3 + "px";
this.chartHeight = 43 * this.dataList.length + "px";
this.chartHeight = 53 * this.dataList.length + "px";
this.drawColumn(yAxisData, series0Data, series1Data);
}
// this.drawColumn(yAxisData, series0Data, series1Data);
},
deep: false
deep: true
}
},
created() {
if (process.client) {
// vm = this;
// this.drawColumn([], [], []);
}
},
mounted() {
vm = this;
},
methods: {
// 画
drawColumn(yAxisData, series0Data, series1Data) {
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// let chartColumn = this.$echarts.init(document.getElementById("myChart1"));
// 基于准备好的dom，初始化echarts实例
// 绘制图表
let options = {
color: vm.colors,
color: vm.colors || [],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%"
},
legend: {
show: false,
......@@ -112,6 +122,7 @@ export default {
xAxis: {
axisTick: false,
type: "value",
minInterval: 1,
axisLabel: {
show: false,
formatter: "{value}",
......@@ -187,6 +198,14 @@ export default {
]
};
chartColumn.setOption(options);
let autoHeight = this.dataList.length * 53; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
chartColumn.getDom().style.height = autoHeight + "px";
chartColumn.getDom().childNodes[0].style.height = autoHeight + "px";
chartColumn.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight);
chartColumn.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";
chartColumn.resize();
},
shortName: function (value, length = 5, append = '...') {
if (value && value.length > length) {
......
components/bussiness/charts/chart-column-horizontal-tc.vue
浏览文件 @ 7484f2e4
......@@ -108,6 +108,7 @@ export default {
max: 100,
axisTick: false,
type: "value",
minInterval: 1,
axisLabel: {
formatter: "{value}%",
textStyle: {
......
components/bussiness/charts/chart-column-stack.vue
浏览文件 @ 7484f2e4
......@@ -139,6 +139,9 @@ export default {
color: "#676869"
},
xAxis: {
// min: 0,
// max: 'dataMax',
minInterval: 1,
axisTick: false,
type: "value",
axisLabel: {
......@@ -152,6 +155,15 @@ export default {
color: "#efefef",
width: 1
}
},
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ["#efefef"],
width: 1,
type: "solid"
}
}
},
yAxis: {
......@@ -174,7 +186,16 @@ export default {
color: "#efefef",
width: 1
}
}
},
// //设置网格线颜色
// splitLine: {
// show: true,
// lineStyle: {
// color: ["#efefef"],
// width: 1,
// type: "solid"
// }
// }
},
series: vm.seriesData
// series: [
......
components/bussiness/charts/chart-column-vertical-score.vue
浏览文件 @ 7484f2e4
......@@ -64,6 +64,7 @@ export default {
yAxis: {
axisTick: false,
type: "value",
minInterval: 1,
axisLabel: {
formatter: "{value}",
textStyle: {
......
components/bussiness/charts/chart-column-vertical-tc.vue
浏览文件 @ 7484f2e4
......@@ -110,6 +110,7 @@ export default {
yAxis: {
axisTick: false,
type: "value",
minInterval: 1,
axisLabel: {
formatter: "{value}%",
textStyle: {
......
components/bussiness/charts/chart-column-vertical-times.vue
浏览文件 @ 7484f2e4
......@@ -66,6 +66,7 @@ export default {
yAxis: {
axisTick: false,
type: "value",
minInterval: 1,
axisLabel: {
formatter: "{value}",
textStyle: {
......
components/bussiness/charts/chart-column-vertical.vue
浏览文件 @ 7484f2e4
......@@ -66,6 +66,7 @@ export default {
yAxis: {
axisTick: false,
type: "value",
minInterval: 1,
axisLabel: {
formatter: "{value}",
textStyle: {
......
components/bussiness/charts/chart-pie-cert.vue
浏览文件 @ 7484f2e4
......@@ -62,22 +62,10 @@ export default {
// 绘制图表
let options = {
color: echartColors,
// title: {
// text: "总人数: 1,339,220人",
// // subtext: "纯属虚构",
// top: '20%',
// left: '60%',
// textStyle: {
// fontSize: 12,
// fontWeight: "bolder",
// color: "#000000"
// }
// },
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vertical",
......@@ -98,12 +86,13 @@ export default {
},
series: [
{
name: "证书分布情况",
name: "证书分布情况1",
type: "pie",
label: {
position: "inner",
formatter: function(config) {
return `${config.percent}%`;
// alert(JSON.stringify(config))
return `${config}%`;
}
},
radius: "65%",
......
components/bussiness/charts/chart-pie-edu.vue
浏览文件 @ 7484f2e4
......@@ -28,7 +28,8 @@ export default {
chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
seriesData: {},
count: 0
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
};
},
......@@ -63,6 +64,11 @@ export default {
this.seriesData = pieData.map( item => {
return { name: item.name, value: item.value}
})
let count = 0
pieData.forEach( item => {
count += item.value;
})
this.count = count;
},
// 画饼图
drawPie() {
......@@ -71,9 +77,21 @@ export default {
// 绘制图表
let options = {
color: echartColors,
title: {
text: "总人数: " + vm.count,
// subtext: "纯属虚构",
top: '10%',
left: '60%',
textStyle: {
fontSize: 12,
fontWeight: "bolder",
color: "#000000"
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
// formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: "{b}{c}人"
},
legend: {
......@@ -83,7 +101,7 @@ export default {
itemWidth: 9,
itemHeight: 9,
borderRadius: 9,
top: '10%',
top: '20%',
left: '60%',
bottom: 20,
data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
......@@ -104,7 +122,8 @@ export default {
label: {
position: "inner",
formatter: function(config) {
return `${config.percent}%`;
// return `${config.percent}%`;
return `${config.percent.toFixed(1)}%`;
}
},
radius: "65%",
......
components/bussiness/charts/chart-pie-title.vue
浏览文件 @ 7484f2e4
......@@ -35,18 +35,12 @@ export default {
chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
seriesData: {},
count: 0
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
};
},
watch: {
// pieData: {
// handler(newValue, oldValue) {
// this.handlePieData(newValue);
// this.drawPie();
// },
// deep: true
// },
dataList: {
handler(newValue, oldValue) {
if (process.client) {
......@@ -77,6 +71,11 @@ export default {
this.seriesData = pieData.map(item => {
return { name: item.name, value: item.value };
});
let count = 0
pieData.forEach( item => {
count += item.value;
})
this.count = count;
},
// 画饼图
drawPie() {
......@@ -85,31 +84,32 @@ export default {
// 绘制图表
let options = {
color: echartColors,
// title: {
// text: "总人数: 1,339,220人",
// // subtext: "纯属虚构",
// top: '20%',
// left: '60%',
// textStyle: {
// fontSize: 12,
// fontWeight: "bolder",
// color: "#000000"
// }
// },
title: {
text: "总人数: " + vm.count,
// subtext: "纯属虚构",
top: '10%',
left: '60%',
textStyle: {
fontSize: 12,
fontWeight: "bolder",
color: "#000000"
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
// formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: "{b}{c}人"
},
legend: {
// type: "scroll",
type: "scroll",
type: "plain", // 普通图例
orient: "vertical",
itemWidth: 9,
itemHeight: 9,
borderRadius: 20,
// orient:'horizontal',
top: '10%',
top: '20%',
left: "60%",
bottom: 20,
data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
......@@ -159,7 +159,8 @@ export default {
label: {
position: "inner",
formatter: function(config) {
return `${config.percent}%`;
// return `${config.percent}%`;
return `${config.percent.toFixed(1)}%`;
}
},
radius: "65%",
......
components/bussiness/charts/chart-pie.vue
浏览文件 @ 7484f2e4
......@@ -67,20 +67,10 @@ export default {
// 绘制图表
options = {
color: echartColors,
// title: {
// text: "总人数: 1,339,220人",
// // subtext: "纯属虚构",
// top: '20%',
// left: '60%',
// textStyle: {
// fontSize: 12,
// fontWeight: "bolder",
// color: "#000000"
// }
// },
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
// formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: "{b}{c}人"
},
legend: {
......@@ -109,7 +99,8 @@ export default {
label: {
position: "inner",
formatter: function(config) {
return `${config.percent}%`;
// alert(JSON.stringify(config))
return `${config.percent.toFixed(1)}%`;
}
},
radius: "65%",
......
nuxt.config.js
浏览文件 @ 7484f2e4
......@@ -10,7 +10,7 @@ module.exports = {
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'screen-orientation', content: 'portrait' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'format-detection', content: 'telephone=yes' },
{ name: 'format-detection', content: 'telephone=no' },
{ name: 'full-screen', content: 'yes' },
{ name: 'x5-fullscreen', content: 'true' },
{ name: 'x5-fullscreen', content: 'true' },
......
pages/index.vue
浏览文件 @ 7484f2e4
......@@ -104,7 +104,6 @@
<PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
<CommonLoading v-show="false"></CommonLoading>
<PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
<a href="tel:13817237261">打电话：13817237261</a>
</section>
</template>
......
pages/klgpoint.vue
浏览文件 @ 7484f2e4
......@@ -4,7 +4,6 @@
<TitleKLGPoint :title="title"></TitleKLGPoint>
<TipsInfo :content="tipsContent"></TipsInfo>
<ChartColumnHorizontalTCLong :dataList="knowledgeEffectList" class="mt-10"></ChartColumnHorizontalTCLong>
<CommonNoMore></CommonNoMore>
</section>
</template>
<script>
......@@ -13,7 +12,6 @@ import { getStudyEffect } from "@/service";
import CommonHeader from "@/components/common/common-header";
import TitleKLGPoint from "@/components/bussiness/title-klg-point";
import CommonNoMore from "@/components/common/common-no-more";
import TipsInfo from '@/components/bussiness/tips-info'
import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-column-horizontal-tc-long";
......@@ -39,13 +37,12 @@ export default {
}
},
tipsContent: '报告数据来源仅包含摸底考和正式考的课程培训',
knowledgeEffectList: []
knowledgeEffectList: [],
};
},
components: {
CommonHeader,
TitleKLGPoint,
CommonNoMore,
ChartColumnHorizontalTCLong,
TipsInfo
},
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或