Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
0f5235aa 1 parent d695ff80

更新依赖，删除无用文件

Inline Side-by-side
Showing 7 changed files with 179 additions and 112 deletions
...@@ -38,7 +38,6 @@ ...@@ -38,7 +38,6 @@
38 "dependencies": { 38 "dependencies": {
39 "axios": "0.21.1", 39 "axios": "0.21.1",
40 "core-js": "3.8.3", 40 "core-js": "3.8.3",
41 - "echarts": "^5.4.0",
42 "element-ui": "2.15.3", 41 "element-ui": "2.15.3",
43 "vue": "2.6.14", 42 "vue": "2.6.14",
44 "vue-router": "3.5.2", 43 "vue-router": "3.5.2",
...@@ -69,4 +68,4 @@ ...@@ -69,4 +68,4 @@
69 "> 1%", 68 "> 1%",
70 "last 2 versions" 69 "last 2 versions"
71 ] 70 ]
72 -}
...\ No newline at end of file ...\ No newline at end of file
71 +}
......
This diff could not be displayed because it is too large.
1 -var en = {
2 - "common": {
3 - "risk": "risk",
4 - "exit": "exit",
5 - "index":"index"
6 - }
7 -
8 -}
9 -export default en
1 -var zh = {
2 - "common": {
3 - "risk": "风险",
4 - "exit": "退出",
5 - "index":"首页"
6 - }
7 -
8 -}
9 -export default zh
1 <template> 1 <template>
2 - <div :class="className" :style="{ 2 + <div style="padding:10px;" v-loading="loading">
3 - height: height, width: width, paddingRight: padding 3 + <canvas :class="className" :style="{
4 - }" v-loading="loading" /> 4 + height: height, width: width
5 + }"></canvas>
6 + </div>
5 </template> 7 </template>
6 8
7 <script> 9 <script>
10 +import Chart from '../../assets/languages/chart.js'
8 11
9 export default { 12 export default {
10 name: '', 13 name: '',
...@@ -19,7 +22,7 @@ export default { ...@@ -19,7 +22,7 @@ export default {
19 }, 22 },
20 height: { 23 height: {
21 type: String, 24 type: String,
22 - default: '350px' 25 + default: "350px"
23 }, 26 },
24 chartData: { 27 chartData: {
25 type: Object, 28 type: Object,
...@@ -45,108 +48,195 @@ export default { ...@@ -45,108 +48,195 @@ export default {
45 chartData: { 48 chartData: {
46 deep: true, 49 deep: true,
47 handler(val) { 50 handler(val) {
48 - this.setOptions(val) 51 + this.chartUpdata()
49 } 52 }
50 } 53 }
51 }, 54 },
52 methods: { 55 methods: {
53 initChart() { 56 initChart() {
54 - this.chart = this.$echarts.init(this.$el) 57 + let ctx = document.getElementsByClassName(this.className)
55 - this.setOptions(this.chartData) 58 + this.chart = new Chart(ctx, this.setOptions(this.chartData))
56 }, 59 },
57 - setOptions({ names, data1, data2, data3 } = {}) { 60 + setOptions({ names, data1, data2, data3 }) {
58 - this.chart.setOption({ 61 + // let setOption = ({
59 - tooltip: { 62 + // tooltip: {
60 - trigger: 'axis', 63 + // trigger: 'axis',
61 - axisPointer: { // 坐标轴指示器，坐标轴触发有效 64 + // axisPointer: { // 坐标轴指示器，坐标轴触发有效
62 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 65 + // type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
63 - } 66 + // }
64 - }, 67 + // },
65 - legend: { 68 + // legend: {
66 - show: true 69 + // show: true
67 - }, 70 + // },
68 - dataZoom: [ 71 + // dataZoom: [
69 - { 72 + // {
70 - type: 'inside', 73 + // type: 'inside',
71 - xAxisIndex: [0], 74 + // xAxisIndex: [0],
75 + // },
76 + // {
77 + // type: 'slider',
78 + // show: true,
79 + // start: 0,
80 + // end: 85,
81 + // handleSize: 8
82 + // },
83 + // ],
84 + // grid: {
85 + // top: '15%',
86 + // left: '2%',
87 + // right: '2%',
88 + // containLabel: true
89 + // },
90 + // xAxis: [{
91 + // type: 'category',
92 + // data: names,
93 + // axisTick: {
94 + // alignWithLabel: true
95 + // }
96 + // }],
97 + // yAxis: [{
98 + // type: 'value',
99 + // axisTick: {
100 + // show: false
101 + // }
102 + // }],
103 + // series: [{
104 + // name: '件数',
105 + // type: 'bar',
106 + // data: data1,
107 + // barWidth: '10%',
108 + // barGap: '0%',
109 + // label: {
110 + // show: true,
111 + // position: 'top',
112 + // fontSize: 14
113 + // },
114 + // animationDuration: 1000
115 + // },
116 + // {
117 + // name: '票数',
118 + // type: 'bar',
119 + // data: data2,
120 + // barWidth: '10%',
121 + // barGap: '0%',
122 + // label: {
123 + // show: true,
124 + // position: 'top',
125 + // fontSize: 14
126 + // },
127 + // animationDuration: 1000
128 + // },
129 + // {
130 + // name: '重量',
131 + // type: 'bar',
132 + // data: data3,
133 + // barWidth: '10%',
134 + // barGap: '0%',
135 + // label: {
136 + // show: true,
137 + // position: 'top',
138 + // fontSize: 14
139 + // },
140 + // animationDuration: 1000
141 + // }]
142 + // })
143 + let setOption = {
144 + type: 'bar',
145 + data: {
146 + labels: names,
147 + datasets: [{
148 + label: '件数',
149 + data: data1,
150 + backgroundColor: 'rgba(255, 99, 132, 1)',
151 + stack: 'group1'
72 }, 152 },
73 { 153 {
74 - type: 'slider', 154 + label: '票数',
75 - show: true, 155 + data: data2,
76 - start: 0, 156 + backgroundColor: 'rgba(153, 102, 255, 1)',
77 - end: 85, 157 + stack: 'group2'
78 - handleSize: 8
79 }, 158 },
80 - ], 159 + {
81 - grid: { 160 + label: '重量',
82 - top: '15%', 161 + data: data3,
83 - left: '2%', 162 + backgroundColor: 'rgba(255, 205, 86, 1)',
84 - right: '2%', 163 + stack: 'group3'
85 - containLabel: true 164 + }]
86 }, 165 },
87 - xAxis: [{ 166 + options: {
88 - type: 'category', 167 + events: ['click'],
89 - data: names, 168 + hover: {
90 - axisTick: { 169 + intersect: false,
91 - alignWithLabel: true 170 + animationDuration: 0
92 - } 171 + },
93 - }], 172 + animation: {
94 - yAxis: [{ 173 + duration: 0,
95 - type: 'value', 174 + onComplete: (val) => {
96 - axisTick: { 175 + let ctx = val.chart.ctx
97 - show: false 176 + ctx.textAlign = 'center';
98 - } 177 + ctx.textBaseline = 'bottom';
99 - }], 178 + ctx.font = '14px \"Helvetica Neue\", Helvetica, Arial, sans-serif'
100 - series: [{ 179 + console.log(ctx)
101 - name: '件数', 180 + val.chart.data.datasets.forEach((dataset, i) => {
102 - type: 'bar', 181 + if (val.chart.isDatasetVisible(i)) {
103 - data: data1, 182 + var meta = val.chart.getDatasetMeta(i);
104 - barWidth: '10%', 183 + meta.data.forEach(function (bar, index) {
105 - barGap: '0%', 184 + var data = dataset.data[index];
106 - label: { 185 + ctx.fillText(data, bar.x, bar.y - 5);
107 - show: true, 186 + });
108 - position: 'top', 187 + }
109 - fontSize: 14 188 + });
189 + }
190 + },
191 + legend: {
192 + display: true
110 }, 193 },
111 - animationDuration: 1000 194 + tooltips: {
195 + enabled: false,
196 + },
197 + scales: {
198 + yAxes: [{
199 + ticks: {
200 + beginAtZero: true
201 + }
202 + }]
203 + }
204 + }
205 + }
206 + return setOption
207 + },
208 + chartUpdata() {
209 + this.chart.data = {
210 + labels: this.chartData.names,
211 + datasets: [{
212 + label: '件数',
213 + data: this.chartData.data1,
214 + backgroundColor: 'rgba(255, 99, 132, 1)',
215 + stack: 'group1'
112 }, 216 },
113 { 217 {
114 - name: '票数', 218 + label: '票数',
115 - type: 'bar', 219 + data: this.chartData.data2,
116 - data: data2, 220 + backgroundColor: 'rgba(153, 102, 255, 1)',
117 - barWidth: '10%', 221 + stack: 'group2'
118 - barGap: '0%',
119 - label: {
120 - show: true,
121 - position: 'top',
122 - fontSize: 14
123 - },
124 - animationDuration: 1000
125 }, 222 },
126 { 223 {
127 - name: '重量', 224 + label: '重量',
128 - type: 'bar', 225 + data: this.chartData.data3,
129 - data: data3, 226 + backgroundColor: 'rgba(255, 205, 86, 1)',
130 - barWidth: '10%', 227 + stack: 'group3'
131 - barGap: '0%',
132 - label: {
133 - show: true,
134 - position: 'top',
135 - fontSize: 14
136 - },
137 - animationDuration: 1000
138 }] 228 }]
139 - }) 229 + }
230 + this.chart.update()
140 } 231 }
141 }, 232 },
142 beforeDestroy() { 233 beforeDestroy() {
143 if (!this.chart) { 234 if (!this.chart) {
144 return 235 return
145 } 236 }
146 - this.chart.dispose() 237 + this.chart.destroy()
147 this.chart = null 238 this.chart = null
148 - }, 239 + }
149 -
150 } 240 }
151 </script> 241 </script>
152 242
......
...@@ -11,10 +11,6 @@ import App from './App' ...@@ -11,10 +11,6 @@ import App from './App'
11 import store from './store' 11 import store from './store'
12 import router from './router' 12 import router from './router'
13 import permission from './directive/permission' 13 import permission from './directive/permission'
14 -import * as echarts from 'echarts/core'
15 -import { BarChart } from 'echarts/charts'
16 -import { CanvasRenderer } from 'echarts/renderers'
17 -import { LegendComponent, TooltipComponent, TitleComponent, GridComponent, DataZoomComponent } from 'echarts/components'
18 14
19 import './assets/icons' // icon 15 import './assets/icons' // icon
20 import './permission' // permission control 16 import './permission' // permission control
...@@ -32,7 +28,6 @@ import dictLabels from "@/assets/languages/dictLabels.js" ...@@ -32,7 +28,6 @@ import dictLabels from "@/assets/languages/dictLabels.js"
32 import settings from './settings.js' 28 import settings from './settings.js'
33 29
34 // 全局方法挂载 30 // 全局方法挂载
35 -Vue.prototype.$echarts = echarts
36 Vue.prototype.parseTime = parseTime 31 Vue.prototype.parseTime = parseTime
37 Vue.prototype.resetForm = resetForm 32 Vue.prototype.resetForm = resetForm
38 Vue.prototype.addDateRange = addDateRange 33 Vue.prototype.addDateRange = addDateRange
...@@ -102,7 +97,6 @@ Vue.use(Element, { ...@@ -102,7 +97,6 @@ Vue.use(Element, {
102 //size: Cookies.get('size') || 'medium' // set element-ui default size 97 //size: Cookies.get('size') || 'medium' // set element-ui default size
103 // size: localStorage.getItem('size') || 'medium' // set element-ui default size 98 // size: localStorage.getItem('size') || 'medium' // set element-ui default size
104 }) 99 })
105 -echarts.use([CanvasRenderer, LegendComponent, TitleComponent, GridComponent, BarChart, TooltipComponent, DataZoomComponent])
106 100
107 Vue.config.productionTip = false 101 Vue.config.productionTip = false
108 102
...@@ -110,6 +104,5 @@ new Vue({ ...@@ -110,6 +104,5 @@ new Vue({
110 el: '#app', 104 el: '#app',
111 router, 105 router,
112 store, 106 store,
113 - echarts,
114 render: h => h(App) 107 render: h => h(App)
115 }) 108 })
......
...@@ -65,8 +65,11 @@ ...@@ -65,8 +65,11 @@
65 </el-radio-group> 65 </el-radio-group>
66 </el-form-item> 66 </el-form-item>
67 </el-form> 67 </el-form>
68 - <Chart v-for="(item, index) in barChartData" :chartData="item" height="350px" style="margin-bottom:10px" 68 + <div v-for="(item, index) in barChartData" :key="index">
69 - :key="index" :loading="loading" /> 69 + <Chart :className="'chart' + index.toString()" :chartData="item" height="350px"
70 + style="margin-bottom:10px" :loading="loading" />
71 + </div>
72 +
70 </div> 73 </div>
71 </div> 74 </div>
72 </template> 75 </template>
......