|
@@ -1,9 +1,5 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- class="myChart"
|
|
|
- ref="myChart"
|
|
|
- :style="{ height: height+'px' }"
|
|
|
- ></div>
|
|
|
+ <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -12,7 +8,7 @@ import apiWorkMeeting from "@/api/work/apiWorkMeeting";
|
|
|
export default {
|
|
|
props: {
|
|
|
height: Number,
|
|
|
- queryData: Object
|
|
|
+ queryData: Object,
|
|
|
},
|
|
|
data() {
|
|
|
let that = this;
|
|
@@ -20,37 +16,37 @@ export default {
|
|
|
{
|
|
|
name: "市场部",
|
|
|
color: "#5087ec",
|
|
|
- startColor: '#B2D5FF',
|
|
|
+ startColor: "#B2D5FF",
|
|
|
data: [],
|
|
|
},
|
|
|
{
|
|
|
name: "办公室",
|
|
|
color: "#89D7B6",
|
|
|
- startColor: '#C5FFE6',
|
|
|
+ startColor: "#C5FFE6",
|
|
|
data: [],
|
|
|
},
|
|
|
{
|
|
|
name: "产品中心",
|
|
|
color: "#FAC37A",
|
|
|
- startColor: '#FFEACF',
|
|
|
+ startColor: "#FFEACF",
|
|
|
data: [],
|
|
|
},
|
|
|
{
|
|
|
name: "智慧院",
|
|
|
color: "#FF6E4D",
|
|
|
- startColor: '#FFB5A4',
|
|
|
+ startColor: "#FFB5A4",
|
|
|
data: [],
|
|
|
},
|
|
|
{
|
|
|
name: "业务一部",
|
|
|
color: "#4DF5FF",
|
|
|
- startColor: '#B3FBFF',
|
|
|
+ startColor: "#B3FBFF",
|
|
|
data: [],
|
|
|
},
|
|
|
{
|
|
|
name: "其他部门",
|
|
|
color: "#8B4DFF",
|
|
|
- startColor: '#CDB2FF',
|
|
|
+ startColor: "#CDB2FF",
|
|
|
data: [],
|
|
|
},
|
|
|
];
|
|
@@ -61,7 +57,7 @@ export default {
|
|
|
stack: "Total",
|
|
|
showAllSymbol: false,
|
|
|
smooth: true,
|
|
|
- showSymbol:false,
|
|
|
+ showSymbol: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: item.color, // 线条颜色
|
|
@@ -74,21 +70,21 @@ export default {
|
|
|
normal: {
|
|
|
//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
|
|
|
color: new that.$echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: item.startColor,
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.7,
|
|
|
- color: '#ffffff',
|
|
|
- },
|
|
|
- ],
|
|
|
- false
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: item.startColor,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.7,
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
),
|
|
|
},
|
|
|
},
|
|
@@ -96,7 +92,6 @@ export default {
|
|
|
};
|
|
|
});
|
|
|
return {
|
|
|
- height: 450,
|
|
|
option: {
|
|
|
// backgroundColor: "#000237",
|
|
|
dataZoom: this.$constant.ECHARTS_DATAZOOM,
|
|
@@ -135,13 +130,13 @@ export default {
|
|
|
top: "5%",
|
|
|
//itemWidth: 30,
|
|
|
//itemHeight: 10,
|
|
|
- formatter: name => {
|
|
|
+ formatter: (name) => {
|
|
|
return `{a|${name}} `;
|
|
|
},
|
|
|
textStyle: {
|
|
|
- color: '#999999',
|
|
|
+ color: "#999999",
|
|
|
fontSize: 12,
|
|
|
- align: 'left',
|
|
|
+ align: "left",
|
|
|
backgroundColor: "transparent",
|
|
|
rich: {
|
|
|
a: {
|
|
@@ -149,13 +144,11 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
- left: "15%",
|
|
|
- right: "5%",
|
|
|
+ left: "16%",
|
|
|
+ right: "9%",
|
|
|
bottom: "18%",
|
|
|
// containLabel: true
|
|
|
},
|
|
@@ -227,28 +220,35 @@ export default {
|
|
|
],
|
|
|
series: ySeries,
|
|
|
},
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.init()
|
|
|
- })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.init();
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- let chart = this.$echarts.init(this.$refs.myChart)
|
|
|
+ let chart = this.$echarts.init(this.$refs.myChart);
|
|
|
this.chart = chart;
|
|
|
this.$util.chartsResize(this.chart);
|
|
|
- chart.setOption(this.option)
|
|
|
- this.getData()
|
|
|
+ chart.setOption(this.option);
|
|
|
+ this.getData();
|
|
|
},
|
|
|
getData() {
|
|
|
- return apiWorkMeeting.getMeetingCostTrend(this.queryData).then(res=>{
|
|
|
- let data = this.$util.dataUtil.covertDataToEcharts(res, ['shichang','bangong','chanpin','zhihui','yewu','qita'])
|
|
|
- console.log(data)
|
|
|
- this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
+ return apiWorkMeeting.getMeetingCostTrend(this.queryData).then((res) => {
|
|
|
+ let data = this.$util.dataUtil.covertDataToEcharts(res, [
|
|
|
+ "shichang",
|
|
|
+ "bangong",
|
|
|
+ "chanpin",
|
|
|
+ "zhihui",
|
|
|
+ "yewu",
|
|
|
+ "qita",
|
|
|
+ ]);
|
|
|
+ console.log(data);
|
|
|
+ this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|