|
|
@ -12,7 +12,7 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
props: { |
|
|
|
props: { |
|
|
|
chartData: { |
|
|
|
type: Object, |
|
|
|
required: true, |
|
|
@ -25,18 +25,19 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
// console.log(this.chartData) |
|
|
|
this.getEchartLeft1(); |
|
|
|
this.getEchartLeft1(); |
|
|
|
}, 500); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getEchartLeft1() { |
|
|
|
// 实例化对象 |
|
|
|
// eslint-disable-next-line no-undef |
|
|
|
let myChart = echarts.init(document.getElementById('chart_left1')); |
|
|
|
let charts = { // 按顺序排列从大到小 |
|
|
|
cityList: ['临时车', '月卡车', '免费车', '绿牌车'], |
|
|
|
cityData: [this.chartData.temporaryCarNum, this.chartData.yueZuCheNum, this.chartData.freeCarNum, this.chartData.greenCarNum] |
|
|
|
cityData: [this.chartData.temporaryCarNum || 0, this.chartData.yueZuCheNum || 0, this.chartData.freeCarNum || 0, this.chartData.greenCarNum || 0] |
|
|
|
} |
|
|
|
|
|
|
|
let top10CityList = charts.cityList; |
|
|
@ -56,6 +57,7 @@ export default { |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
show: true, |
|
|
|
// eslint-disable-next-line no-undef |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ |
|
|
|
offset: 0, |
|
|
|
color: color[x] + ', 0.3)' |
|
|
@ -75,7 +77,7 @@ export default { |
|
|
|
} |
|
|
|
//这个方法很重要,是处理小圆圈的数据和位置的 |
|
|
|
let arr = []; |
|
|
|
for (var i = 0; i < lineY.length; i++) { |
|
|
|
for (var i = 0; i < lineY.length; i++) { |
|
|
|
arr.push({ |
|
|
|
value: lineY[i].value, |
|
|
|
symbolPosition: "end", |
|
|
@ -158,27 +160,27 @@ export default { |
|
|
|
|
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '', |
|
|
|
type: 'bar', |
|
|
|
zlevel: 2, |
|
|
|
barWidth: '7px', |
|
|
|
data: lineY, |
|
|
|
showBackground: true, |
|
|
|
animationDuration: 1500, |
|
|
|
name: '', |
|
|
|
type: 'bar', |
|
|
|
zlevel: 2, |
|
|
|
barWidth: '7px', |
|
|
|
data: lineY, |
|
|
|
showBackground: true, |
|
|
|
animationDuration: 1500, |
|
|
|
label: { |
|
|
|
position:'top', |
|
|
|
show: true, |
|
|
|
formatter: function (params) { |
|
|
|
// console.log(params) |
|
|
|
// return params.data.realValue; |
|
|
|
var percent = Number((params.value / 100) * 100).toFixed(2) + '%'; |
|
|
|
return percent; |
|
|
|
}, |
|
|
|
color: '#fff', |
|
|
|
fontSize: 12, |
|
|
|
position: 'top', |
|
|
|
show: true, |
|
|
|
formatter: function (params) { |
|
|
|
// console.log(params) |
|
|
|
// return params.data.realValue; |
|
|
|
var percent = Number((params.value / 100) * 100).toFixed(2) + '%'; |
|
|
|
return percent; |
|
|
|
}, |
|
|
|
color: '#fff', |
|
|
|
fontSize: 12, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "XXX", |
|
|
|
type: "pictorialBar", |
|
|
|
symbol: |
|
|
|