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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| <template>
| <div class="echart34_box">
| <div id="echart34"></div>
| </div>
| </template>
|
| <script>
| export default {
| //import引入的组件需要注入到对象中才能使用
| components: {},
| data() {
| //这里存放数据
| return { myChart:null};
| },
| mounted() {
| this.lineChart();
| this.$bus.$on('resizeEchart', (res) => {
| this.myChart.resize();
| });
| },
| //方法集合
| methods: {
| lineChart() {
| let option = {
| title: {
| text: '项目进度完成百分比',
| top:15,
| textStyle: {
| color: '#fff',
| },
| },
| grid: {
| left: '0%',
| right: '0%',
| bottom: '0%',
| containLabel: true,
| },
| xAxis: {
| type: 'category',
| data: [
| '中俄东线管道工程南段',
| '中俄东线管道工程中段',
| '广州站',
| '唐山LNG',
| '新疆连木沁站场',
| '中缅天然气管道风险排查航空摄影测量',
| ],
| axisLine: {
| lineStyle: {
| color: '#ccc',
| },
| },
| axisLabel: {
| show: true,
| textStyle: {
| color: '#fff',
| },
| formatter: function (params) {
| var newParamsName = ''; // 最终拼接成的字符串
| var paramsNameNumber = params.length; // 实际标签的个数
| var provideNumber = 3; // 每行能显示的字的个数
| var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
| /**
| * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
| */
| // 条件等同于rowNumber>1
| if (paramsNameNumber > provideNumber) {
| /** 循环每一行,p表示行 */
| for (var p = 0; p < rowNumber; p++) {
| var tempStr = ''; // 表示每一次截取的字符串
| var start = p * provideNumber; // 开始截取的位置
| var end = start + provideNumber; // 结束截取的位置
| // 此处特殊处理最后一行的索引值
| if (p == rowNumber - 1) {
| // 最后一次不换行
| tempStr = params.substring(start, paramsNameNumber);
| } else {
| // 每一次拼接字符串并换行
| tempStr = params.substring(start, end) + '\n';
| }
| newParamsName += tempStr; // 最终拼成的字符串
| }
| } else {
| // 将旧标签的值赋给新标签
| newParamsName = params;
| }
| //将最终的字符串返回
| return newParamsName;
| },
| },
| },
| yAxis: {
| type: 'value',
| axisLine: {
| lineStyle: {
| color: '#ccc',
| },
| },
| axisLabel: {
| show: true,
| textStyle: {
| color: '#fff',
| },
| },
| },
| series: [
| {
| data: [0.4, 0.2, 0.7, 0.65, 0.5, 0.1],
| type: 'bar',
| showBackground: true,
| barWidth: 20,
| backgroundStyle: {
| color: 'rgba(180, 180, 180, 0.2)',
| },
| },
| ],
| };
| this.myChart = this.$echarts.init(document.getElementById('echart34'));
| this.myChart.setOption(option);
| window.addEventListener('resize', function () {
| this.myChart.resize();
| });
| },
| },
| created() {},
| };
| </script>
| <style lang="less" scoped>
| //@import url(); 引入公共css类
| .echart34_box {
| padding: 20px;
| width: 100%;
| height: 100%;
| }
| #echart34 {
| width: calc(100% - 40px);
| height: calc(100% - 40px);
| }
| </style>
|
|
