From 57094ef66e4afb413c39ecd181e65938315c195c Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 03 十一月 2021 17:41:26 +0800
Subject: [PATCH] hyj change shhuang
---
src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue | 211 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 135 insertions(+), 76 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
index 3380c50..52b0d9f 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
@@ -1,32 +1,55 @@
<template>
<div class="irregular-dataset">
- <div ref="multiBar" style="width: 100%;height: 300px;"></div>
+ <div ref="multiBar" style="width: 100%; height: 300px"></div>
</div>
</template>
<script>
export default {
- data () {
+ data() {
return {
options: {},
- }
+ };
},
- mounted () {
+ mounted() {
this.options = this.mockData();
this.initMultiBar();
},
methods: {
- mockData () {
-
- var dimension = ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'];
- var yDatas = [[4, 23, 13, 0, 1, 1], [2, 16, 16, 0, 1, 1], [5, 20, 20, 0, 2, 1], [4, 19, 15, 0, 1, 2], [3, 16, 14, 1, 0, 4], [1, 17, 13, 0, 1, 1], [2, 9, 9, 0, 1, 2]];
- var categoryCount = 7;
+ mockData() {
+ var dimension = [
+ "鏈福绗�",
+ "鏈墜姣�",
+ "鏈懠鍞�",
+ "杩愯涓潯瑙�",
+ "鏈鏌�",
+ "鏈簲绛�",
+ ];
+ var yDatas = [
+ [14, 23, 13, 20, 21, 11],
+ [12, 16, 16, 20, 11, 21],
+ [15, 20, 20, 10, 12, 21],
+ [14, 19, 15, 20, 11, 22],
+ [13, 16, 14, 21, 10, 14],
+ [1, 17, 13, 0, 1, 1],
+ [2, 9, 9, 0, 1, 2],
+ [2, 9, 9, 0, 1, 2],
+ [4, 23, 13, 0, 1, 1],
+ [2, 16, 16, 0, 1, 1],
+ [5, 20, 20, 0, 2, 1],
+ [4, 19, 15, 0, 1, 2],
+ [3, 16, 14, 1, 0, 4],
+ [1, 17, 13, 0, 1, 1],
+ [2, 9, 9, 0, 1, 2],
+ [2, 9, 9, 0, 1, 2],
+ ];
+ var categoryCount = 16;
var xAxisData = [];
var customData = [];
var legendData = [];
var dataList = [];
- legendData.push('trend');
+ legendData.push("trend");
var encodeY = [];
for (var i = 0; i < dimension.length; i++) {
legendData.push(dimension[i]);
@@ -36,87 +59,123 @@
for (var i = 0; i < categoryCount; i++) {
//var val = yDatas[i];
- xAxisData.push('category' + i);
+ xAxisData.push("category" + i);
var customVal = [i];
customData.push(customVal);
for (var j = 0; j < dataList.length; j++) {
- var value = j === 0
- ? this.$echarts.number.round(yDatas[i][j], 2)
- : yDatas[i][j]
+ var value =
+ j === 0
+ ? this.$echarts.number.round(yDatas[i][j], 2)
+ : yDatas[i][j];
dataList[j].push(value);
customVal.push(value);
}
}
return {
- title: {
- text: '杩濊鎯呭喌缁熻',
- textStyle: {
- fontSize: 14
- }
- },
- color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+ color: [
+ "rgb(157, 190, 245)",
+ "rgb(98, 151, 242)",
+ "rgb(179, 240, 229)",
+ "rgb(254, 209, 146)",
+ "rgb(254, 209, 146)",
+ "rgb(237, 102, 62)",
+ ],
grid: {
top: 50,
left: 30,
right: 20,
},
tooltip: {
- trigger: 'axis'
+ trigger: "axis",
},
legend: {
data: legendData,
- left: 'right',
+ left: "right",
//color: ['aqua','#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
},
- dataZoom: [{
- type: 'slider',
- start: 50,
- end: 70
- }, {
- type: 'inside',
- start: 50,
- end: 70
- }],
+ dataZoom: [
+ {
+ type: "slider",
+ height: 10,
+ end: 30,
+ bottom: 0,
+ backgroundColor: "#F4F6F9 ",
+ showDetail: false,
+ showDataShadow: false,
+ },
+ ],
xAxis: {
//data: xAxisData
- data: ['02-22', '02-23', '02-24', '02-25', '02-26', '02-27','02-28']
- },
- yAxis: {},
- series: [{
- type: 'custom',
- name: 'trend',
- color: 'aqua',
- renderItem: this.renderItem,
- itemStyle: {
- borderWidth: 2
- },
- encode: {
- x: 0,
- y: encodeY
- },
- data: customData,
- z: 1
-
- }].concat(dataList.map(function (data, index) {
- return {
- type: 'bar',
- animation: false,
- name: legendData[index + 1],
- itemStyle: {
- opacity: 0.7
+ axisTick: false,
+ axisLine: {
+ lineStyle: {
+ color: "rbg(241, 241, 240)",
+ width: 1, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
},
- data: data
- };
- }))
-
- }
+ },
+
+ data: [
+ "02-22",
+ "02-23",
+ "02-24",
+ "02-25",
+ "02-26",
+ "02-27",
+ "02-28",
+ "03-01",
+ "03-02",
+ "03-03",
+ "03-04",
+ "03-05",
+ "03-06",
+ "03-07",
+ "03-08",
+ "03-09",
+ ],
+ },
+ yAxis: {
+ axisTick: false,
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+ series: [].concat(
+ dataList.map(function (data, index) {
+ return {
+ type: "bar",
+ animation: false,
+ barWidth: 8,
+ name: legendData[index + 1],
+ itemStyle: {
+ opacity: 0.7,
+ normal: {
+ //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius: [8, 8, 0, 0],
+ },
+ },
+ data: data,
+ };
+ })
+ ),
+ };
},
- renderItem (params, api) {
+ renderItem(params, api) {
var xValue = api.value(0);
var currentSeriesIndices = api.currentSeriesIndices();
var barLayout = api.barLayout({
- barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
+ barGap: "30%",
+ barCategoryGap: "20%",
+ count: currentSeriesIndices.length - 1,
});
var points = [];
@@ -130,29 +189,29 @@
}
}
var style = api.style({
- color: '#975fe4',
+ color: "#975fe4",
//stroke: api.visual('color'),
- stroke: 'aqua',
- fill: null
+ stroke: "aqua",
+ fill: null,
});
return {
- type: 'polyline',
+ type: "polyline",
shape: {
- points: points
+ points: points,
},
- style: style
+ style: style,
};
},
- initMultiBar () {
+ initMultiBar() {
this.$nextTick(() => {
- let dom = this.$echarts.init(this.$refs['multiBar']);
+ let dom = this.$echarts.init(this.$refs["multiBar"]);
dom.setOption(this.options);
- })
- }
- }
-}
+ });
+ },
+ },
+};
</script>
<style>
--
Gitblit v1.8.0