ex3.vue
2.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
<div>
<div class="pie">
<div id="pie2">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width: 100%; height: 260px"></div>
</div>
</div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
data() {
return {
zhuX: [],
zhuY: [],
};
},
created() {},
mounted() {
// this.initData();
},
methods: {
//初始化数据
initData(x, y) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main2"));
// 绘制图表
myChart.setOption({
title: {
text: "决策节点通过率分析",
subtext: "",
left: "center",
},
color: ["#409EFF"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
y2: 150,
containLabel: true,
},
xAxis: [
{
type: "category",
data: x,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
interval:0,
rotate:-25
},
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "处理总量",
type: "bar",
barWidth: "60%",
label: {
// 柱图头部显示值
show: true,
position: "top",
color: "#333",
fontSize: "12px",
formatter: (params) => {
return params.value[params.encode.x[0]];
},
},
data: y,
},
],
});
},
},
};
</script>