diff --git a/src/components/charts/bar-stack/index.html b/src/components/charts/bar-stack/index.html new file mode 100644 index 0000000..d60fced --- /dev/null +++ b/src/components/charts/bar-stack/index.html @@ -0,0 +1 @@ +
diff --git a/src/components/charts/bar-stack/index.js b/src/components/charts/bar-stack/index.js new file mode 100644 index 0000000..9d062d5 --- /dev/null +++ b/src/components/charts/bar-stack/index.js @@ -0,0 +1,269 @@ +import * as echarts from 'echarts'; +import elementResizeDetectorMaker from 'element-resize-detector'; +export default { + props: { + id: { + type: String, + default: 'bar' + }, + data: { + type: Array, + default: function () { + return [ + { + name: '1月', + value: '10' + }, + { + name: '2月', + value: '19' + } + ]; + } + }, + unit: { + type: String, + default: '单位:万元' + }, + interval: { + type: Number, + default: null + }, + rotate: { + type: Number, + default: 0 + }, + serverName: { + type: String, + default: '面积' + }, + color: { + type: Array, + default: function () { + return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)'] + } + }, + barBorderRadius: { + type: Array, + default: function () { + return [0, 0, 0, 0] + } + } + }, + data () { + return { + chart: null + }; + }, + watch: { + data: { + handler: function (val) { + this.$nextTick(function () { + setTimeout(() => { + this.initChart(); + }, 2000) + }); + }, + immediate: true, + deep: true + } + }, + create () { + + }, + mounted () { + // setTimeout(()=>{ + // this.initChart(); + // },2000) + }, + computed: { + }, + methods: { + // 设置监听器 页面尺寸变化重新绘制图表 + initResizeCallBack () { + const erd = elementResizeDetectorMaker(); + erd.listenTo(document.getElementById(this.id), () => { + this.$nextTick(() => { + if (document.getElementById(this.id).offsetWidth > 500){ + this.rotate = 60; + }else{ + this.rotate = 0; + } + this.chart.resize(); + this.chart.setOption({ + // 新的配置项,例如: + xAxis: { + axisLabel: { + rotate: this.rotate + }, + } + }); + }); + }); + }, + initChart () { + this.chart = echarts.init(document.getElementById(this.id)); + this.chartSetOption(); + }, + chartSetOption () { + let xAxisData = []; + let data = []; + let bgData = []; + this.data.forEach(item => { + xAxisData.push(item.name) + data.push(item.value) + bgData.push(100) + }); + + const option = { + color: ["#2195fe","#04e26f","#f7cc3a","#f77e3f"], + tooltip: { + trigger: "axis", + axisPointer: { + type: "line", + lineStyle: { + opacity: 0, + }, + } + }, + legend: { + data: ["村集体", "农民", "公司", "其它"], + top: '3%', + right: '5%', + textStyle: { + color: 'rgba(210, 238, 255, 1)', + }, + }, + grid: { + left: "5%", + right: "5%", + bottom: "5%", + top: "15%", + containLabel: true, + z: 22, + }, + xAxis: [ + { + splitArea: { + show: false, + areaStyle: { + color: ['RGBA(13, 31, 64, 1)'] + } + }, + splitLine: { + show: false, + lineStyle: { + color: ['rgba(18, 40, 83, 1)'], + width: 100 + } + }, + type: "category", + gridIndex: 0, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//xAxisData + axisTick: { + alignWithLabel: true, + }, + axisLine: { + lineStyle: { + color: "#0c3b71", + }, + }, + axisLabel: { + show: true, + rotate: this.rotate, + color: 'rgba(185, 211, 235, 1)' + }, + }, + ], + yAxis: [ + { + type: "value", + name: this.unit, + nameTextStyle: { + color: 'rgba(185, 211, 235, 1)' + }, + axisLabel: { + formatter: "{value}", + textStyle: { + color: "rgba(185, 211, 235, 1)", + }, + }, + axisLine: { + lineStyle: { + color: "#27b4c2", + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: "#11366e", + }, + }, + }, + { + type: "value", + gridIndex: 0, + max: 100, + splitNumber: 12, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + } + }, + ], + series: [ + { + name: '村集体', + barWidth: 20, + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series' + }, + data: [320, 332, 301, 334, 390, 330, 320] + }, + { + name: '农民', + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series' + }, + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: '公司', + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series' + }, + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: '其它', + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series' + }, + data: [150, 232, 201, 154, 190, 330, 410] + }, + ] + }; + this.chart.setOption(option); + this.initResizeCallBack(); + } + } +}; diff --git a/src/components/charts/bar-stack/index.scss b/src/components/charts/bar-stack/index.scss new file mode 100644 index 0000000..b89d9dc --- /dev/null +++ b/src/components/charts/bar-stack/index.scss @@ -0,0 +1,6 @@ +.chart { + overflow: visible; + width: 100%; + height: 100%; + z-index: 2; +} \ No newline at end of file diff --git a/src/components/charts/bar-stack/index.vue b/src/components/charts/bar-stack/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/charts/bar-stack/index.vue @@ -0,0 +1,3 @@ +