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 176 additions and 109 deletions
......@@ -38,7 +38,6 @@
"dependencies": {
"axios": "0.21.1",
"core-js": "3.8.3",
"echarts": "^5.4.0",
"element-ui": "2.15.3",
"vue": "2.6.14",
"vue-router": "3.5.2",
......
This diff could not be displayed because it is too large.
var en = {
"common": {
"risk": "risk",
"exit": "exit",
"index":"index"
}
}
export default en
var zh = {
"common": {
"risk": "风险",
"exit": "退出",
"index":"首页"
}
}
export default zh
<template>
<div :class="className" :style="{
height: height, width: width, paddingRight: padding
}" v-loading="loading" />
<div style="padding:10px;" v-loading="loading">
<canvas :class="className" :style="{
height: height, width: width
}"></canvas>
</div>
</template>
<script>
import Chart from '../../assets/languages/chart.js'
export default {
name: '',
......@@ -19,7 +22,7 @@ export default {
},
height: {
type: String,
default: '350px'
default: "350px"
},
chartData: {
type: Object,
......@@ -45,108 +48,195 @@ export default {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
this.chartUpdata()
}
}
},
methods: {
initChart() {
this.chart = this.$echarts.init(this.$el)
this.setOptions(this.chartData)
},
setOptions({ names, data1, data2, data3 } = {}) {
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
let ctx = document.getElementsByClassName(this.className)
this.chart = new Chart(ctx, this.setOptions(this.chartData))
},
setOptions({ names, data1, data2, data3 }) {
// let setOption = ({
// tooltip: {
// trigger: 'axis',
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
// }
// },
// legend: {
// show: true
// },
// dataZoom: [
// {
// type: 'inside',
// xAxisIndex: [0],
// },
// {
// type: 'slider',
// show: true,
// start: 0,
// end: 85,
// handleSize: 8
// },
// ],
// grid: {
// top: '15%',
// left: '2%',
// right: '2%',
// containLabel: true
// },
// xAxis: [{
// type: 'category',
// data: names,
// axisTick: {
// alignWithLabel: true
// }
// }],
// yAxis: [{
// type: 'value',
// axisTick: {
// show: false
// }
// }],
// series: [{
// name: '件数',
// type: 'bar',
// data: data1,
// barWidth: '10%',
// barGap: '0%',
// label: {
// show: true,
// position: 'top',
// fontSize: 14
// },
// animationDuration: 1000
// },
// {
// name: '票数',
// type: 'bar',
// data: data2,
// barWidth: '10%',
// barGap: '0%',
// label: {
// show: true,
// position: 'top',
// fontSize: 14
// },
// animationDuration: 1000
// },
// {
// name: '重量',
// type: 'bar',
// data: data3,
// barWidth: '10%',
// barGap: '0%',
// label: {
// show: true,
// position: 'top',
// fontSize: 14
// },
// animationDuration: 1000
// }]
// })
let setOption = {
type: 'bar',
data: {
labels: names,
datasets: [{
label: '件数',
data: data1,
backgroundColor: 'rgba(255, 99, 132, 1)',
stack: 'group1'
},
{
label: '票数',
data: data2,
backgroundColor: 'rgba(153, 102, 255, 1)',
stack: 'group2'
},
{
label: '重量',
data: data3,
backgroundColor: 'rgba(255, 205, 86, 1)',
stack: 'group3'
}]
},
options: {
events: ['click'],
hover: {
intersect: false,
animationDuration: 0
},
animation: {
duration: 0,
onComplete: (val) => {
let ctx = val.chart.ctx
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.font = '14px \"Helvetica Neue\", Helvetica, Arial, sans-serif'
console.log(ctx)
val.chart.data.datasets.forEach((dataset, i) => {
if (val.chart.isDatasetVisible(i)) {
var meta = val.chart.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar.x, bar.y - 5);
});
}
});
}
},
legend: {
show: true
display: true
},
dataZoom: [
{
type: 'inside',
xAxisIndex: [0],
tooltips: {
enabled: false,
},
{
type: 'slider',
show: true,
start: 0,
end: 85,
handleSize: 8
},
],
grid: {
top: '15%',
left: '2%',
right: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
data: names,
axisTick: {
alignWithLabel: true
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: '件数',
type: 'bar',
data: data1,
barWidth: '10%',
barGap: '0%',
label: {
show: true,
position: 'top',
fontSize: 14
}
return setOption
},
animationDuration: 1000
chartUpdata() {
this.chart.data = {
labels: this.chartData.names,
datasets: [{
label: '件数',
data: this.chartData.data1,
backgroundColor: 'rgba(255, 99, 132, 1)',
stack: 'group1'
},
{
name: '票数',
type: 'bar',
data: data2,
barWidth: '10%',
barGap: '0%',
label: {
show: true,
position: 'top',
fontSize: 14
},
animationDuration: 1000
label: '票数',
data: this.chartData.data2,
backgroundColor: 'rgba(153, 102, 255, 1)',
stack: 'group2'
},
{
name: '重量',
type: 'bar',
data: data3,
barWidth: '10%',
barGap: '0%',
label: {
show: true,
position: 'top',
fontSize: 14
},
animationDuration: 1000
label: '重量',
data: this.chartData.data3,
backgroundColor: 'rgba(255, 205, 86, 1)',
stack: 'group3'
}]
})
}
this.chart.update()
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart.destroy()
this.chart = null
},
}
}
</script>
......
......@@ -11,10 +11,6 @@ import App from './App'
import store from './store'
import router from './router'
import permission from './directive/permission'
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LegendComponent, TooltipComponent, TitleComponent, GridComponent, DataZoomComponent } from 'echarts/components'
import './assets/icons' // icon
import './permission' // permission control
......@@ -32,7 +28,6 @@ import dictLabels from "@/assets/languages/dictLabels.js"
import settings from './settings.js'
// 全局方法挂载
Vue.prototype.$echarts = echarts
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
......@@ -102,7 +97,6 @@ Vue.use(Element, {
//size: Cookies.get('size') || 'medium' // set element-ui default size
// size: localStorage.getItem('size') || 'medium' // set element-ui default size
})
echarts.use([CanvasRenderer, LegendComponent, TitleComponent, GridComponent, BarChart, TooltipComponent, DataZoomComponent])
Vue.config.productionTip = false
......@@ -110,6 +104,5 @@ new Vue({
el: '#app',
router,
store,
echarts,
render: h => h(App)
})
......
......@@ -65,8 +65,11 @@
</el-radio-group>
</el-form-item>
</el-form>
<Chart v-for="(item, index) in barChartData" :chartData="item" height="350px" style="margin-bottom:10px"
:key="index" :loading="loading" />
<div v-for="(item, index) in barChartData" :key="index">
<Chart :className="'chart' + index.toString()" :chartData="item" height="350px"
style="margin-bottom:10px" :loading="loading" />
</div>
</div>
</div>
</template>
......