You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
3.8 KiB
168 lines
3.8 KiB
<template>
|
|
<div :class="className" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
// require('echarts/theme/macarons') // echarts theme
|
|
import resize from "./mixins/resize";
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: "chart",
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: "100%",
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: "100%",
|
|
},
|
|
chartData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
};
|
|
},
|
|
watch: {
|
|
chartData: {
|
|
deep: true,
|
|
handler(val) {
|
|
this.setOptions(val);
|
|
},
|
|
},
|
|
height: {
|
|
deep: true,
|
|
handler(val) {
|
|
console.log(val);
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.initChart();
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return;
|
|
}
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.chart = echarts.init(this.$el, "macarons");
|
|
this.setOptions(this.chartData);
|
|
},
|
|
setOptions({
|
|
title,
|
|
xAxis,
|
|
series,
|
|
legend,
|
|
unit,
|
|
rotate,
|
|
time,
|
|
serviceData,
|
|
serviceData2,
|
|
} = {}) {
|
|
this.chart.setOption({
|
|
title: [
|
|
{
|
|
text: this.chartData.pledgeRatePercent+"%",
|
|
subtext: "质押率 " + this.chartData.bankPledgeRate + "%",
|
|
textStyle:{
|
|
fontSize:10,
|
|
color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc"
|
|
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 10,
|
|
color: '#bbbaba'
|
|
},
|
|
textAlign:"center",
|
|
x: '30%',
|
|
y: '35%',
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter:function (parms){
|
|
var str=
|
|
parms.marker+""+parms.data.name+"</br>"+
|
|
"价值："+ parms.data.value+"</br>"+
|
|
"占比："+ parms.percent+"%";
|
|
return str ;
|
|
}
|
|
},
|
|
legend: {
|
|
type:"plain",
|
|
icon:'rect',
|
|
y: 'center',
|
|
x:"right",
|
|
orient: 'vertical',
|
|
left:'60%',
|
|
align:'left',
|
|
top:'0',
|
|
itemGap:10,
|
|
padding:[20,0,20,10],
|
|
textStyle: {
|
|
color:'#fff',
|
|
fontSize:14,
|
|
padding:[0,5]
|
|
},
|
|
height:'auto',
|
|
itemWidth:15,
|
|
itemHeight:15
|
|
},
|
|
series: [
|
|
{
|
|
name:'标签',
|
|
type:'pie',
|
|
center: ['31%', '45%'],
|
|
radius: ['50%', '70%'],
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
}
|
|
},
|
|
|
|
labelLine: {
|
|
normal: {
|
|
length:5,
|
|
length2:3,
|
|
smooth:true,
|
|
}
|
|
},
|
|
data: this.chartData.data
|
|
// [
|
|
// {value:335, legendname:'种类01',name:"账户余额",itemStyle:{color:"#5087ec"}},
|
|
// {value:310, legendname:'种类02',name:"应收账款",itemStyle:{color:"#68bbc4"}},
|
|
// {value:234, legendname:'种类03',name:"物质库存价值",itemStyle:{color:"#58a55c"}},
|
|
// {value:154, legendname:'种类04',name:"在途货物价值",itemStyle:{color:"#f2bd42"}},
|
|
// {value:335, legendname:'种类05',name:"预付款",itemStyle:{color:"#ee752f"}},
|
|
|
|
// ]
|
|
}
|
|
]
|
|
});
|
|
this.chart.on("click", function (param) {
|
|
this.callParents(param);
|
|
});
|
|
},
|
|
// 调用父组件
|
|
callParents(name) {
|
|
this.$emit("pieChartFunction", name);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|