|
|
@@ -0,0 +1,172 @@
|
|
|
+<template>
|
|
|
+ <div id="ThreeStackedBarAndLine" ref="ThreeStackedBarAndLine"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ init_echart(legendData, xdata, result) {
|
|
|
+ const _this = this;
|
|
|
+ _this.chart = echarts.init(this.$refs.ThreeStackedBarAndLine);
|
|
|
+
|
|
|
+ let y1Data = [110, 90, 120, 70, 60]
|
|
|
+ let option = {
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
|
|
|
+ backgroundColor: '#3A4667', // 背景
|
|
|
+ borderColor: '#3A4667',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ color: ['#efc943', '#4ee1ac', '#186bb8'],
|
|
|
+ legend: {
|
|
|
+ top: '1',
|
|
|
+ data: ['意向', '进行中', '已完成'],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12, // 字体大小
|
|
|
+ color: '#B3CFFF' // 字体颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ data: ['崖州区', '育才区', '天涯区', '吉阳区', '海棠区'],
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#fff',
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: 'top',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: 'rgba(239, 247, 253, .7)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [{
|
|
|
+ name: '',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 12,
|
|
|
+ padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '项目数量',
|
|
|
+
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#FFCC64' // 折线的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: y1Data,
|
|
|
+ }, {
|
|
|
+ name: '意向',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '渠道1',
|
|
|
+ barWidth: 14,
|
|
|
+
|
|
|
+ data: [12, 12, 12, 12, 1, 2],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '进行中',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '渠道1',
|
|
|
+ barWidth: 14,
|
|
|
+
|
|
|
+ data: [24, 12, 12, 0, 1, 2],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已完成',
|
|
|
+ barWidth: 14,
|
|
|
+
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 8,
|
|
|
+ stack: '渠道1',
|
|
|
+ data: [12, 0, 0, 24, 21],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
+ this.chart.setOption(option);
|
|
|
+
|
|
|
+ },
|
|
|
+ setOptions(legendData, xdata, result) {
|
|
|
+ this.init_echart(legendData, xdata, result);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ this.$nextTick((res) => {
|
|
|
+ this.init_echart();
|
|
|
+
|
|
|
+ })
|
|
|
+ }, //生命周期 - 挂在完成
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
+ destroy() { },//生命周期 - 销毁完成
|
|
|
+ activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
+ deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+#ThreeStackedBarAndLine {
|
|
|
+ left: 0rem;
|
|
|
+ top: 0.1rem;
|
|
|
+ width: 22rem;
|
|
|
+ height: 12rem;
|
|
|
+}
|
|
|
+</style>
|
