parent
a91857167b
commit
9cc629e796
@ -0,0 +1,19 @@
|
||||
import request from "@/utils/request"
|
||||
|
||||
// 查询模板指标自定义选择
|
||||
export function templateMetrics(params) {
|
||||
return request({
|
||||
url: "/jjh/templateMetrics/templateMetrics",
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 新增服务业发展报告
|
||||
export function templateMetricsAdd(data){
|
||||
return request({
|
||||
url: "/jjh/templateMetrics",
|
||||
method: "post",
|
||||
data
|
||||
})
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div id="echartsHome" ref="myChartHome"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
let colors = ['#5CBC69','#FF8929']
|
||||
let datas = [
|
||||
{ value: 5, name: '已完成', label:{color:"#5CBC69"}},
|
||||
{ value: 95, name: '未完成', label:{color:"#FF8929"}},
|
||||
];
|
||||
// 公用调整
|
||||
let itemStyle = {
|
||||
// normal: {
|
||||
borderRadius: 4,
|
||||
borderColor: "#F5F8FA",
|
||||
borderWidth: 4,
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
// },
|
||||
};
|
||||
return {
|
||||
myChartHome: false,
|
||||
option: {
|
||||
color:colors,
|
||||
legend: {
|
||||
bottom: '10%',
|
||||
right: '20%',
|
||||
orient: 'horizontal',
|
||||
data: datas,
|
||||
icon: 'square',
|
||||
itemWith: 14,
|
||||
itemHeight: 14,
|
||||
itemGap: 13,
|
||||
// padding: [5, 10, 5, 0],
|
||||
formatter(name) {
|
||||
// debugger;
|
||||
// const item = datas.filter((item) => item.name === name)[0];
|
||||
return `{name|${name}}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#666666',
|
||||
fontSize: 14,
|
||||
width: 100,
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 数据
|
||||
type: "pie",
|
||||
zlevel: 3,
|
||||
radius: ["40%", "55%"],
|
||||
center: ["45%", "40%"],
|
||||
itemStyle: itemStyle,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
data: datas,
|
||||
label: {
|
||||
// show: true,
|
||||
// position: "outside",
|
||||
padding: [10, -20],
|
||||
formatter: (params) => {
|
||||
return "{a|" +params.value+"}{b|" + "%}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontFamily: "DINCondensed",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: [-15, 0, 0, 0],
|
||||
},
|
||||
b: {
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
padding: [-15, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 15,
|
||||
length2: 20,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "阴影圈",
|
||||
type: "pie",
|
||||
radius: ["0%", "35%"],
|
||||
center: ["45%", "40%"],
|
||||
hoverAnimation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(0, 174, 255, 0.1)",
|
||||
borderWidth:1,
|
||||
borderColor: "rgba(0, 174, 255, 0.6)",
|
||||
},
|
||||
zlevel: 4,
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(()=>{
|
||||
this.initEchart();
|
||||
})
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
cancalDebounce(){
|
||||
console.log("走了吗");
|
||||
window.onresize = this.myChartHome.resize();
|
||||
},
|
||||
initEchart(){
|
||||
var chartDom = document.getElementById("echartsHome");
|
||||
this.myChartHome = echarts.init(chartDom);
|
||||
this.myChartHome.setOption(this.option)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue