<!-- 近一年车场僵尸车辆趋势 -->
<template>
<div id="zombieCar-bar" class="container"/>
</template>
<script>
import * as echarts from 'echarts';
import { automaticCarousel } from './automaticCarousel'
import { getZombieCar } from '@/api/ywts/shms/tcy'
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y];
const c1 = [shape.x - 8, shape.y - 8];
const c2 = [xAxisPoint[0] - 8, xAxisPoint[1] - 8];
const c3 = [xAxisPoint[0], xAxisPoint[1]];
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
}
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 4];
const c4 = [shape.x + 13, shape.y - 4];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
}
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + 13, shape.y - 4];
const c3 = [shape.x + 5, shape.y - 12];
const c4 = [shape.x - 8, shape.y - 8];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
}
});
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
export default {
name: 'ZombieCar',
data() {
return {
isShow: true,
myChart: null,
height: '0',
width: '0',
extend: {
color: ['#CEDE0F'],
legend: {
show: false,
textStyle: {
color: '#cce9ff',
fontWeight: 'bold'
},
lineStyle: {
width: 10
},
data: ['僵尸车辆趋势'],
},
dataZoom: [
// 滑动条
{
xAxisIndex: 0, // 这里是从X轴的0刻度开始
show: false, // 是否显示滑动条，不影响使用
type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 开始位置。
endValue: 1, // 一次性展示几个。（如果startValue设定为0，那么页面展示数就是endValue+1，比如此例页面展示2个）
},
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#092647', // 修改背景颜色
borderColor: '#404a59', // 修改边框颜色
borderWidth: 1,
textStyle: {
color: '#ffffff', // 修改文本颜色
fontSize: 12
}
}
},
textStyle: {
align: 'left' // 左对齐 tooltip 内容
},
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#cce9ff'
}
},
axisLabel: {
color: '#cce9ff'
}
},
yAxis: [
{
name: '',
type: 'value',
axisLine: {
lineStyle: {
color: '#cce9ff'
}
},
axisLabel: {
color: '#cce9ff'
},
nameTextStyle: {
color: '#cce9ff',
fontSize: 14,
verticalAlign: 'middle',
},
splitLine: {
show: false,
lineStyle: {
color: ['#c8d0da'],
type: 'dashed',
},
},
axisTick: { show: false },
},
],
series: [
{
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
fontSize: 15,
fontWeight: 'bold',
color: '#fa7341',
offset: [0, -10]
}
},
tooltip: {
show: false
},
itemStyle: {
color: 'transparent'
},
},
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: '#fa7341'
}
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: '#f33b0d'
}
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: '#f89771'
}
}
]
};
},
}
]
},
chartData: {
columns: [],
rows: []
}
}
},
mounted() {
this.myChart = echarts.init(document.getElementById('zombieCar-bar'))
this.height = document.getElementById('zombieCar-bar').clientHeight - 40 + 'px'
this.width = document.getElementById('zombieCar-bar').clientWidth - 10 + 'px'
const that = this
window.addEventListener('resize', function() {
if(!document.getElementById('zombieCar-bar')) {
return
}
that.reload()
})
},
methods: {
async reload() {
this.isShow = false
await this.$nextTick()
this.height = document.getElementById('zombieCar-bar').clientHeight - 10 + 'px'
this.width = document.getElementById('zombieCar-bar').clientWidth - 10 + 'px'
this.isShow = true
automaticCarousel(this.extend, this.myChart, 3000, 7)
},
// 获取数据
fetchData(id) {
getZombieCar({id}).then(response => {
if (response.code === 200) {
const res = response.data.value.slice(0, 12)
this.extend.series[0].data = res.map(item => item.num)
this.extend.series[1].data = res.map(item => item.num)
this.extend.xAxis.data = res.map(item => item.month)
automaticCarousel(this.extend, this.myChart, 3000, 7)
this.myChart.setOption(this.extend, true)
}
})
// console.log('近1月车辆进出趋势折线图初始化');
// this.extend.series[0].data = [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34]
// this.extend.series[1].data = [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34]
// this.extend.xAxis.data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
// automaticCarousel(this.extend, this.myChart, 3000, 7)
// this.myChart.setOption(this.extend, true)
},
}
}
</script>
<style lang="scss" scoped>
.container{
position:relative;
width: 100%;
height:100%;
}
</style>
