|
|
@@ -0,0 +1,308 @@
|
|
|
+<template>
|
|
|
+ <div :class="className" :style="{height:height,width:width}" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import chartMixin from '@/mixins/ChartMixin';
|
|
|
+ export default {
|
|
|
+ mixins: [chartMixin],
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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({date,gjzs,} = {}) {
|
|
|
+ var maxValue = Math.max(...gjzs);
|
|
|
+ this.chart.setOption({
|
|
|
+ color: ["#3398DB"],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10',
|
|
|
+ right: '10',
|
|
|
+ bottom: '10',
|
|
|
+ top: '20',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: date,
|
|
|
+ axisLabel: {
|
|
|
+ color: "#FFFFFF",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#8CBAEE"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ max: maxValue * 1.2, // 留出一些空间
|
|
|
+ axisLabel: {
|
|
|
+ color: "#8CBAEE"
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#8CBAEE"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#0B0842"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top", // 展示在柱子的上方
|
|
|
+ color: "#333",
|
|
|
+ },
|
|
|
+ // 立方体柱状
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // 背景柱（统一高度）
|
|
|
+ name: '背景',
|
|
|
+ type: 'custom',
|
|
|
+ barWidth: 40,
|
|
|
+ barGap: '-100%', // 使背景柱与数据柱重叠
|
|
|
+ renderItem: (params, api) => {
|
|
|
+ const basicsCoord = api.coord([api.value(0), api.value(1)]);
|
|
|
+ const topBasicsYAxis = basicsCoord[1];
|
|
|
+ const basicsXAxis = basicsCoord[0];
|
|
|
+ const bottomYAxis = api.coord([api.value(0), 0])[1];
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [
|
|
|
+ // 左侧
|
|
|
+ {
|
|
|
+ type: "polygon",
|
|
|
+ shape: {
|
|
|
+ points: [
|
|
|
+ [basicsXAxis - 10, topBasicsYAxis - 4],
|
|
|
+ [basicsXAxis - 10, bottomYAxis],
|
|
|
+ [basicsXAxis, bottomYAxis],
|
|
|
+ [basicsXAxis, topBasicsYAxis]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#1F98CC'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.1,
|
|
|
+ color: '#013262'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.9,
|
|
|
+ color: '#013262'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#1F98CC'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 右侧
|
|
|
+ {
|
|
|
+ type: "polygon",
|
|
|
+ shape: {
|
|
|
+ points: [
|
|
|
+ [basicsXAxis, topBasicsYAxis],
|
|
|
+ [basicsXAxis, bottomYAxis],
|
|
|
+ [basicsXAxis + 10, bottomYAxis],
|
|
|
+ [basicsXAxis + 10, topBasicsYAxis - 4]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#1F98CC'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.1,
|
|
|
+ color: '#013262'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.9,
|
|
|
+ color: '#013262'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#1F98CC'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 顶部
|
|
|
+ {
|
|
|
+ type: "polygon",
|
|
|
+ shape: {
|
|
|
+ points: [
|
|
|
+ [basicsXAxis, topBasicsYAxis],
|
|
|
+ [basicsXAxis - 10, topBasicsYAxis - 4],
|
|
|
+ [basicsXAxis, topBasicsYAxis - 6],
|
|
|
+ [basicsXAxis + 10, topBasicsYAxis - 4]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},{offset: 0.5,color: '#1F98CC'},{offset: 1,color: '#1F98CC'}
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ data: date.map(() => maxValue * 1.1), // 背景柱统一高度
|
|
|
+ animation: false
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ type: "custom",
|
|
|
+ data: gjzs,
|
|
|
+ renderItem: (params, api) => {
|
|
|
+ const basicsCoord = api.coord([api.value(0), api.value(1)]);
|
|
|
+ const topBasicsYAxis = basicsCoord[1];
|
|
|
+ const basicsXAxis = basicsCoord[0];
|
|
|
+ const bottomYAxis = api.coord([api.value(0), 0])[1];
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [
|
|
|
+ // 左侧
|
|
|
+ {
|
|
|
+ type: "polygon",
|
|
|
+ shape: {
|
|
|
+ points: [
|
|
|
+ [basicsXAxis - 10, topBasicsYAxis - 4],
|
|
|
+ [basicsXAxis - 10, bottomYAxis],
|
|
|
+ [basicsXAxis, bottomYAxis],
|
|
|
+ [basicsXAxis, topBasicsYAxis]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 1,1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#BDE2FC'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.1,
|
|
|
+ color: '#006FBD'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0883CD'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 右侧
|
|
|
+ {
|
|
|
+ type: "polygon",
|
|
|
+ shape: {
|
|
|
+ points: [
|
|
|
+ [basicsXAxis, topBasicsYAxis],
|
|
|
+ [basicsXAxis, bottomYAxis],
|
|
|
+ [basicsXAxis + 10, bottomYAxis],
|
|
|
+ [basicsXAxis + 10, topBasicsYAxis - 4]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#59B5F5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.1,
|
|
|
+ color: '#59B5F5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0B61A3'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 顶部
|
|
|
+ {
|
|
|
+ type: "polygon",
|
|
|
+ shape: {
|
|
|
+ points: [
|
|
|
+ [basicsXAxis, topBasicsYAxis],
|
|
|
+ [basicsXAxis - 10, topBasicsYAxis - 4],
|
|
|
+ [basicsXAxis, topBasicsYAxis - 6],
|
|
|
+ [basicsXAxis + 10, topBasicsYAxis - 4]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},
|
|
|
+ {offset: 1,color: '#1F98CC'}
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }]
|
|
|
+
|
|
|
+ }, true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
+</style>
|
zouling
