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