直接上代码
/*
* @Autor: 一个帅小伙
* @Version: 1.0
* @Date: 2019-10-08 09:27:17
* @LastEditors: 一个帅小伙
* @LastEditTime: 2019-10-11 18:07:52
* @Description: 图表组件
*/
<template>
<div id="outputValueChart" class="subChart">
<Charts class="charts-detail" ref="Charts" :option="options"></Charts>
<div class="remarks x-border">
<p>计划产值</p>
<p>实际产值</p>
<p>实际成本</p>
</div>
<div class="explain">
<dl>
<dd>
<span class="number number1">105.17</span>
亿
</dd>
<dt>收入</dt>
</dl>
<dl>
<dd>
<span class="number number2">9.22</span> 亿
</dd>
<dt>经营性净现金流</dt>
</dl>
<dl>
<dd>
<span class="number number3">4.84</span> 亿
</dd>
<dt>利润总额</dt>
</dl>
</div>
<!-- <div
v-if="!this.subChartData.length"
class="flex align-center justify-center"
style="margin-top:200px;color: #fff;"
>暂无数据</div>-->
</div>
</template>
<script>
import Charts from "#/assets/js/Charts";
export default {
name: "outputValueChart",
components: {
Charts
},
props: {},
data() {
return {
$echart: null,
subChartData: [160, 102.13, 98.79],
options: {},
barStyle: {
width: 40,
shadowWidth: 80,
inclination: 20, //横截面的倾斜度
color: ["#59cb42", "#3cefff", "#FFE362"]
}
};
},
computed: {},
created() {},
mounted() {},
watch: {},
methods: {
initCharts(options) {
this.$echart = this.$refs["Charts"].getECharts();
let data = [
{
value: this.subChartData[0],
itemStyle: {
color: this.barStyle.color[0]
}
},
{
value: this.subChartData[1],
itemStyle: {
color: this.barStyle.color[1]
}
},
{
value: this.subChartData[2],
itemStyle: {
color: this.barStyle.color[2]
}
}
];
let symbolSize = [this.barStyle.width, this.barStyle.inclination];
this.options = {
grid: {
top: "35%",
left: "-9%",
bottom: "15%",
right: "0",
containLabel: true
},
xAxis: [
{
type: "category",
data: ["累计", "当月", "哪个"],
nameTextStyle: {
color: "#82b0ec"
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: "#6995aa"
},
onZero: true
},
axisLabel: {
show: false,
fontSize: 14,
color: "#fff"
},
splitLine: {
show: false,
lineStyle: {
type: "dotted",
color: "#1978D9"
}
}
}
],
yAxis: [
{
type: "value",
show: false,
axisLabel: {
textStyle: {
color: "#82b0ec"
}
},
splitLine: {
show: false,
lineStyle: {
color: "#0c2c5a"
}
},
axisLine: {
show: false
}
}
],
series: [
{
//柱子上边的横截面
name: "",
type: "pictorialBar",
symbolSize: symbolSize,
symbolOffset: [0, -10],
symbolPosition: "end",
z: 12,
label: {
normal: {
show: true,
position: "top",
formatter: "{c}亿"
}
},
data: data
},
{
//柱子下边的横截面
name: "",
type: "pictorialBar",
symbolSize: [this.barStyle.width, this.barStyle.inclination],
symbolOffset: [0, 10],
z: 12,
data: data
},
{
//下面的花瓣
name: "",
type: "pictorialBar",
symbolSize: [this.barStyle.shadowWidth, this.barStyle.inclination],
symbolOffset: [0, this.barStyle.inclination],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#14b1eb",
borderType: "dashed",
borderWidth: 0
}
},
data: this.subChartData
},
{
//柱体透明度
type: "bar",
itemStyle: {
normal: {
//color: '#14b1eb',
opacity: 0.85
}
},
//silent: true,
barWidth: this.barStyle.width,
//barGap: '-100%', // Make series be overlap
data: data
}
]
};
}
},
destroyed() {}
};
</script>
<style lang="scss">
#outputValueChart {
.x-border {
width: calc(100% - 0px);
margin: 2 0px;
padding-top: 2px;
border-top: 1px solid rgba(149, 165, 221, 0.6);
display: flex;
p {
flex: 1;
font-size: 10px;
text-align: center;
}
}
.explain {
display: flex;
margin-top: 10px;
dl {
flex: 1;
text-align: center;
dd {
font-size: 13px;
}
dt {
font-size: 11px;
}
}
span.number {
font-weight: bold;
font-size: 16px;
}
span.number1 {
color: rgba(106, 208, 254, 1);
}
span.number2 {
color: #ffe362;
}
span.number3 {
color: #76d0df;
}
}
}
</style>
