|
|
@@ -1,231 +1,233 @@
|
|
|
<template>
|
|
|
- <div id="ThreeStackedBarAndLine" ref="ThreeStackedBarAndLine"></div>
|
|
|
+ <div id="ThreeStackedBarAndLine" ref="ThreeStackedBarAndLine"></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
|
|
|
export default {
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- //方法集合
|
|
|
- methods: {
|
|
|
- init_echart(obj) {
|
|
|
- const _this = this;
|
|
|
- _this.chart = echarts.init(this.$refs.ThreeStackedBarAndLine);
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ init_echart(obj) {
|
|
|
+ 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'
|
|
|
- // },
|
|
|
- // },
|
|
|
- tooltip: {
|
|
|
- backgroundColor: 'RGBA(20, 106, 178, 0.4)',
|
|
|
- trigger: "axis",
|
|
|
- textStyle: {
|
|
|
- fontSize: 14,
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '30%',
|
|
|
- left: '6%',
|
|
|
- right: '6%',
|
|
|
- bottom: '5%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- color: ['#186bb8', '#4ee1ac', '#efc943'],
|
|
|
+ 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'
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: "RGBA(20, 106, 178, 0.4)",
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "30%",
|
|
|
+ left: "6%",
|
|
|
+ right: "6%",
|
|
|
+ bottom: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ color: ["#186bb8", "#4ee1ac", "#efc943"],
|
|
|
|
|
|
- legend: {
|
|
|
- data: obj.legend_data,
|
|
|
- top: '1%',
|
|
|
- // textStyle: {
|
|
|
- // color: "#666666"
|
|
|
- // },
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#fff',
|
|
|
- padding: [0, 0, 0, 0],
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- verticalAlign: 'middle',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- itemWidth: 15,
|
|
|
- itemHeight: 10,
|
|
|
+ legend: {
|
|
|
+ data: obj.legend_data,
|
|
|
+ top: "1%",
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#666666"
|
|
|
+ // },
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#fff",
|
|
|
+ padding: [0, 0, 0, 0],
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ verticalAlign: "middle",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
|
|
|
- itemGap: 10
|
|
|
- },
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- data: obj.x_data,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- fontSize: 12,
|
|
|
- color: '#fff',
|
|
|
- align: 'center',
|
|
|
- verticalAlign: 'top',
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
+ itemGap: 10,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: obj.x_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: obj.yAxis?obj.yAxis[0].name:'项目个数/个',
|
|
|
- nameTextStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 12,
|
|
|
- padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
|
|
|
- },
|
|
|
- minInterval:obj.yAxis?undefined: 1, // 设置y轴的最小间隔为1
|
|
|
- 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)'
|
|
|
- }
|
|
|
- },
|
|
|
- }, {
|
|
|
- name: obj.yAxis?obj.yAxis[1].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: [],
|
|
|
- }
|
|
|
- if(!obj.result)
|
|
|
- obj.result = [[],[],[],[] ];
|
|
|
- if(!obj.legend_data)
|
|
|
- obj.legend_data = ['','','','' ];
|
|
|
- if(!obj.legendmap)
|
|
|
- obj.legendmap = [
|
|
|
- { type: "line", data: obj.line_data },
|
|
|
- { type: "bar", data: obj.result[0] },
|
|
|
- { type: "bar", data: obj.result[1] },
|
|
|
- { type: "bar", data: obj.result[2] },
|
|
|
- ];
|
|
|
- obj.legendmap.forEach( (mapele,i) => {
|
|
|
- if (mapele.type=='line') {
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: "rgba(239, 247, 253, .7)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: obj.yAxis ? obj.yAxis[0].name : "项目个数/个",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 12,
|
|
|
+ padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
|
|
|
+ },
|
|
|
+ minInterval: obj.yAxis ? undefined : 1, // 设置y轴的最小间隔为1
|
|
|
+ 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)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: obj.yAxis ? obj.yAxis[1].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: [],
|
|
|
+ };
|
|
|
+ if (!obj.result) obj.result = [[], [], [], []];
|
|
|
+ if (!obj.legend_data) obj.legend_data = ["", "", "", ""];
|
|
|
+ if (!obj.legendmap)
|
|
|
+ obj.legendmap = [
|
|
|
+ { type: "line", data: obj.line_data },
|
|
|
+ { type: "bar", data: obj.result[0] },
|
|
|
+ { type: "bar", data: obj.result[1] },
|
|
|
+ { type: "bar", data: obj.result[2] },
|
|
|
+ ];
|
|
|
+ obj.legendmap.forEach((mapele, i) => {
|
|
|
+ if (mapele.type == "line") {
|
|
|
option.series.push({
|
|
|
name: obj.legend_data[i],
|
|
|
- type: 'line',
|
|
|
+ type: "line",
|
|
|
smooth: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: mapele.color||'#FFCC64' // 折线的颜色
|
|
|
- }
|
|
|
+ color: mapele.color || "#FFCC64", // 折线的颜色
|
|
|
+ },
|
|
|
},
|
|
|
- yAxisIndex: 1, // 指定使用第二个Y轴
|
|
|
- data: mapele.data||obj.result[i],
|
|
|
+ yAxisIndex: mapele.yAxisIndex != undefined ? mapele.yAxisIndex : 1, // 指定使用第二个Y轴
|
|
|
+ data: mapele.data || obj.result[i],
|
|
|
});
|
|
|
- }else{
|
|
|
- option.series.push({
|
|
|
- name: obj.legend_data[i],
|
|
|
- type: 'bar',
|
|
|
- stack: '渠道'+i,//stack相同上下显示
|
|
|
- barWidth: 14,
|
|
|
- data: mapele.data||obj.result[i],
|
|
|
- });
|
|
|
- }
|
|
|
-});
|
|
|
- this.chart.setOption(option);
|
|
|
- // this.chart.on("legendselectchanged", function (params) {
|
|
|
- // let iseyes = params.selected[params.name];
|
|
|
- // _this.$emit("echartClick", params.name, { iseyes });
|
|
|
- // });
|
|
|
+ } else {
|
|
|
+ option.series.push({
|
|
|
+ name: obj.legend_data[i],
|
|
|
+ type: "bar",
|
|
|
+ stack: "渠道" + i, //stack相同上下显示
|
|
|
+ barWidth: 14,
|
|
|
+ data: mapele.data || obj.result[i],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.chart.setOption(option);
|
|
|
+ // this.chart.on("legendselectchanged", function (params) {
|
|
|
+ // let iseyes = params.selected[params.name];
|
|
|
+ // _this.$emit("echartClick", params.name, { iseyes });
|
|
|
+ // });
|
|
|
this.chart.on("click", function (params) {
|
|
|
- _this.$emit("echartClick", params.name, { color: params.color,sIndex:params.seriesIndex });
|
|
|
+ _this.$emit("echartClick", params.name, {
|
|
|
+ color: params.color,
|
|
|
+ sIndex: params.seriesIndex,
|
|
|
+ });
|
|
|
});
|
|
|
-
|
|
|
- },
|
|
|
- setOptions(obj) {
|
|
|
- this.init_echart(obj);
|
|
|
- }
|
|
|
},
|
|
|
- beforeCreate() { }, //生命周期 - 创建之前
|
|
|
- created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- beforeMount() { }, //生命周期 - 挂载之前
|
|
|
- mounted() {
|
|
|
- const that = this;
|
|
|
- this.$nextTick((res) => {
|
|
|
- // let obj = {
|
|
|
- // legend_data: ['临时用地面积', '正常使用', '剩余1个月', '已到期'],
|
|
|
- // x_data: ['崖州区', '天涯区', '吉阳区', '海棠区'],
|
|
|
- // line_data: [110, 90, 120, 70, 60],
|
|
|
- // result: [[12, 12, 12, 12, 1, 2], [24, 12, 12, 0, 1, 2], [12, 0, 0, 24, 21]]
|
|
|
- // }
|
|
|
- // this.setOptions(obj);
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
- }, //生命周期 - 挂在完成
|
|
|
- beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
- updated() { }, //生命周期 - 更新之后
|
|
|
- beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
- destroy() { },//生命周期 - 销毁完成
|
|
|
- activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
- deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+ setOptions(obj) {
|
|
|
+ this.init_echart(obj);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ created() {}, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ this.$nextTick((res) => {
|
|
|
+ // let obj = {
|
|
|
+ // legend_data: ['临时用地面积', '正常使用', '剩余1个月', '已到期'],
|
|
|
+ // x_data: ['崖州区', '天涯区', '吉阳区', '海棠区'],
|
|
|
+ // line_data: [110, 90, 120, 70, 60],
|
|
|
+ // result: [[12, 12, 12, 12, 1, 2], [24, 12, 12, 0, 1, 2], [12, 0, 0, 24, 21]]
|
|
|
+ // }
|
|
|
+ // this.setOptions(obj);
|
|
|
+ });
|
|
|
+ }, //生命周期 - 挂在完成
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroy() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
+ deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
#ThreeStackedBarAndLine {
|
|
|
- left: 0rem;
|
|
|
- top: 0.1rem;
|
|
|
- width: 23vw;
|
|
|
- height: 12rem;
|
|
|
+ left: 0rem;
|
|
|
+ top: 0.1rem;
|
|
|
+ width: 23vw;
|
|
|
+ height: 12rem;
|
|
|
}
|
|
|
</style>
|
