<template>
<div class="echart01" ref="echart-dom02">
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
status: {
type: String
},
data: {
type: Object
}
},
data() {
return {
myChart: null,
option: {
tooltip: {
show: false,
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
opacity: 0,
},
},
formatter: function (prams) {
return prams[0].name + prams[0].data ;
},
},
legend: {
data: ["支持方向资产数量统计"],
top: '0%'
},
grid: {
left: "1%",
right: "0%",
bottom: "2%",
top: "15%",
height: "85%",
containLabel: true,
},
xAxis: [
{
type: 'category',
splitLine: {
lineStyle: {
color: "#f1f4f9",
type: "dashed",
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#c1c1c2'
}
},
axisLabel: {
show: true,
borderType: 'dashed',
textStyle: {
color: "#333",
},
interval: 0,
rotate: 30
},
},
{
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: "#f1f4f9",
type: "dashed",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: '#c1c1c2'
}
},
axisLabel: {
show: false,
},
}
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#e0e6f1",
type: "dashed",
},
},
},
],
series: [
{
xAxisIndex: 1,
name: "支持方向资产数量统计",
type: "bar",
barWidth: "8%",
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#2a314b",
fontSize: 12,
},
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#00ff9c1a',
},
{
offset: 1,
color: '#1EC4C7',
},
]),
},
data: [],
},
{
type: "pictorialBar",
barWidth: '8',
barHeight: 2,
symbol:
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAKCAYAAAAJtCiTAAAAAXNSR0IArs4c6QAAAchJREFUSEvtVstKw0AUPTePJrhz7dKNS/9AQVQSaje1KKi4VfwYEcSViP6WYF3VZesDtDXGK3cmk0ebaOOu0Gwmua8zc3KHeyjY2uPNpT5iJhAzQEie9MUY1MrM8PwGGg0HzBLDqV/edFbRLpbRKEIURaAMIFfX1MgwGQzf9+C6gpNVzuMpHOUyfsZo+ImvKM6do7D9iQ+p7S94cB0H38ywCegPHdDZXpsvN3qIvyxY5VyUFvsdrtxLNCVAkq4JqfmQcPI/HEGzidF99UEnnV0+X+vhowYxGexkZ+hjlNvrHrPYfQY1XyVvyzD/h6ObzyGg++qBTjttvlh/qkVMzX84M+GaGMbjmwc6bjb5OuzjPaKpr9LMnLTmRoUY1wLuBw7oIAj5dud5TkwyRhQxfRt0GIR805wToyZu2jE26CgI+a41J6ZAjHTM/nbIV8FLyVWqmjh/XVyTN75WT6vfJtlfaEV/+ZTKYqr2pu0MgmMxHgY2aGW1xcuLMb6TGSdOCSIj3pT24ERIkRJbmQbMCaxUg4lNhGKySnSlrEiSTLxWa/oczGDSolOtqS+LEbvEqQyjeYyN9F5lH+N0me5IcZTy0bEWgGFM+AExPMSy0h9Y8AAAAABJRU5ErkJggg==",
symbolSize: [8, 2],
symbolOffset: [0, -5],
itemStyle: {
normal: {
color: "rgba(234, 171, 113, 1)"
}
},
data: [],
z: 12
},
],
},
maxValue: [],
}
},
watch: {
status: {
immediate: true,
handler: function(val) {
let data = {}
if(val == '1') {
data = {
xdata: this.data.count.xdata,
ydata: this.data.count.ydata
}
}else {
data = {
xdata: this.data.amount.xdata,
ydata: this.data.amount.ydata
}
}
this.option.xAxis[0].data = data.xdata
this.option.series[0].data = data.ydata
if(val == '1') {
this.option.series[0].label.normal.formatter = (prams)=> {
return prams.value + '个'
}
this.option.series[0].itemStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#00ff9c1a', }, { offset: 1, color: '#1EC4C7', }, ])
this.option.yAxis[0].name='单位：个'
this.option.series[1].symbol = 'image://data:image/webp;base64,UklGRiYCAABXRUJQVlA4WAoAAAAgAAAAFwAABwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggOAAAAPACAJ0BKhgACAA+bSqRRaQioZgEAEAGxKALUWgACdcAAP5vH+rsTz1fl/9uz/9dn/67P+eFUcAA'
}else {
this.option.series[0].label.normal.formatter = (prams)=> {
return prams.value + '万元'
}
this.option.series[0].itemStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#FFEDDC', }, { offset: 1, color: '#FFD857', }, ])
this.option.yAxis[0].name='单位：万元'
this.option.series[1].symbol = 'image://data:image/webp;base64,UklGRioCAABXRUJQVlA4WAoAAAAgAAAAFwAABwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggPAAAABADAJ0BKhgACAA+bSqRRaQioZgEAEAGxKAHYA/AABCKAAD+8Az///3nz9vN+3m/59v//jduNL+ew64AAA=='
}
this.option.series[1].data = this.getSymbolData(data.ydata)
if(this.myChart) {
this.myChart.setOption(this.option, {notMerge: true});
this.$forceUpdate()
}else {
this.$nextTick(()=> {
this.init()
})
}
}
}
},
methods: {
getSymbolData(datas){
let arr = [];
for (var i = 0; i < datas.length; i++) {
arr.push({
value: datas[i],
symbolPosition: "end"
});
}
return arr;
},
init() {
var chartDom = this.$refs['echart-dom02']
this.myChart = echarts.init(chartDom);
this.option && this.myChart.setOption(this.option);
}
}
}
</script>
<style scoped lang="scss">
.echart01 {
height: 100%;
width: 100%;
}
</style>
