動態echarts及tree型圖

1、         動態折線圖

 

 

該部分是基於echarts開發的，主要有兩部分組成，折線圖和柱狀圖，其中末端的垂直細線和小圓球爲柱狀圖部分，小球是柱狀圖的markPoint設置的，柱狀圖的data數據是與折線圖data數據數組長度相同的數組，數組最後一項與折線圖數組的最後一項等值，其他項均爲0，具體配置以下：

 

 

 

動態設置的實現：在數組末端插入數據，同時去除數組的第一項，echarts更新，從而實現動態效果

2、         echarts關係圖

 

   

該部分是基於echarts（tree型圖）開發的，其data數據格式有限制（詳情見文件：關係圖數據格式.text），數據中的name字段包含label標籤的全部數據信息，報警及非報警狀態時label中字體及背景顏色，是echarts中的富文本結合正則實現的，具體配置以下：

 

 

 

動態echarts源碼

  1 <template>
  2  <div>
  3  <div id="echart1" ref="echart1"></div>
  4  <div>{{show}}</div>
  5  </div>
  6 </template>
  7 <script>
  8 export default {
  9  name: "echart1",
 10  data() {
 11  return {
 12  aadata: [],
 13  bbdata: [],
 14  ccdata: [],
 15  zydata: [],
 16  show: []
 17  };
 18  },
 19  mounted() {
 20  var that = this;
 21  var aa = Math.random();
 22  var cc = [];
 23  for (var i = 0; i < 100; i++) {
 24  that.aadata.push(aa);
 25  that.bbdata.push(i);
 26  cc.push(0);
 27  }
 28  cc.splice(cc.length - 1, 1, that.aadata[that.aadata.length - 1]);
 29  that.ccdata = cc;
 30  that.api();
 31  setInterval(function() {
 32  that.api();
 33  }, 100);
 34  },
 35  /* watch: {
 36  aadata() {
 37  this.drawLine();
 38  }
 39  }, */
 40  methods: {
 41  api() {
 42  var that = this;
 43  var obj = { CodeID: ["1"] };
 44  that.$axios
 45  .post(
 46  url,
 47  JSON.stringify(obj),
 48  { headers: { "Content-Type": "application/json;" } }
 49  )
 50  .then(res => {
 51  var that = this;
 52  that.show = res.data.Item;
 53  var b = res.data.Item[0];
 54  that.aadata.shift();
 55  that.bbdata.shift();
 56  that.aadata.push(b);
 57  that.bbdata.push(b);
 58  that.ccdata.splice(that.zydata.length - 1, 1, b);
 59  that.drawLine();
 60  })
 61  .catch(error => {
 62  console.log(error);
 63  });
 64  },
 65  drawLine() {
 66  var that = this;
 67  var myChart = this.$echarts.init(this.$refs.echart1);
 68  myChart.setOption({
 69  backgroundColor:"rgba(0,5,21,0.9)",
 70  grid:{
 71  height:"150",
 72  top:"10",
 73  bottom:"10",
 74  right:"20",
 75  left:"20"
 76  },
 77  xAxis: {
 78  type: "category",
 79  boundaryGap: false,
 80  data: that.bbdata,
 81  axisTick:{
 82  show:false
 83  },
 84  axisLabel:{
 85  show:false
 86  },
 87  axisLine: {
 88  lineStyle: {
 89  color: '#3a3e4d', 
 90  width: 1
 91  }
 92  }
 93  },
 94  yAxis: {
 95  type: "value",
 96  show:false
 97  },
 98  series: [
 99  {
100  data: that.aadata,
101  type: "line",
102  animation: false,
103  smooth: true,
104  symbol: "none",
105  lineStyle: {
106  color: {
107  type: "linear",
108  colorStops: [
109  {
110  offset: 0,
111  color: "#00e4fc" // 0% 處的顏色
112  },
113  {
114  offset: 0.66,
115  color: "#00e4fc" // 66% 處的顏色
116  },
117  {
118  offset: 1,
119  color: "#fff" // 100% 處的顏色
120  }
121  ],
122  opacity: 0.4,
123  globalCoord: false // 缺省爲 false
124  }
125  }
126  },
127  {
128  name: "最高氣溫",
129  barWidth: 2,
130  type: "bar",
131  data: that.ccdata,
132  animation: false,
133  itemStyle:{
134  normal:{
135  color:'#fff'
136  } 
137  },
138  markPoint: {
139  animation: false,
140  symbol: 'circle',
141  data: [{ type: "max" }],
142  symbolSize:10,
143  itemStyle: {
144  normal: {
145  color:"#020b1c",
146  borderColor:"#fff",
147  borderWidth:"2",
148  label: {
149  show: false,
150  }
151  }
152  }
153  }
154  }
155  ]
156  });
157  }
158  }
159 };
160 </script>
161 <style scoped>
162 #echart1 {
163  width: 700px;
164  height: 180px;
165 }
166 </style>

 

關係圖源碼以下：

 

<template>
 <div>
 <div id="echart4" ref="echart4" style="width: 1200px;height:300px;"></div>
 </div>
</template>
<script>
export default {
 name: "echart4",
 data() {
 return {
 chartData: [
 {
 name: "鹽田水廠11111",
 children: [
 {
 name: "東海道2221",
 children: [
 {
 name: "永安北泵房330"
 }
 ]
 },
 {
 name: "鹽田高級中學2221"
 },
 {
 name: "鹽田1號泵站2221"
 },
 {
 name: "南方明珠花園2221",
 children: [
 {
 name: "金海雅居331",
 children: [
 {
 name: "梅沙西泵站441",
 children: [
 {
 name: "觀景酒店550"
 }
 ]
 }
 /* {
 name: "第三級441"
 } */
 ]
 },
 {
 name: "大梅沙共同溝440",
 children: [
 {
 name: "梅沙街道辦441"
 }
 ]
 }
 ]
 },
 {
 name: "鹽田四村2221"
 },
 {
 name: "鹽田港人民醫院2221"
 },
 {
 name: "北山道2221"
 /* children: [
 {
 name: "第三級331"
 },
 {
 name: "第三級331"
 }
 ] */
 }
 ]
 }
 ]
 };
 },
 mounted() {
 this.initChart();
 },

  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.echart4);
      this.chart.setOption({
          backgroundColor:"#000515",
        series: [
          {
            type: "tree",
            name: "tree2",
            data: this.chartData,
            top: "10%",
            bottom: "10%",
            right: "25%",
            height: "230",
            left: "7%",
            symbolSize: 8,
            /*  symbol: "circle", */
            // 展開發的層級數
            initialTreeDepth: 10,
            itemStyle: {
              color: "#515b67",
              borderColor: "#0098ff"
            },
            label: {
              normal: {
                position: "bottom",
                verticalAlign: "left",
                align: "center",
                fontSize: 9,
                distance: -10,
                /*  padding: [10, 0, 5, 0], */
                padding: [10, 0, 0, 0],
                formatter: function(dat) {
                  console.log(dat.name);
                  var num = dat.name.replace(/[^0-9]/gi, "");
                  num = num.substring(0, num.length - 1);
                  var reg = /[\u4e00-\u9fa5]/g;
                  var names = dat.name.match(reg);
                  var hz = names.join("") + ":";
                  var aa = dat.name.charAt(dat.name.length - 1);
                  var arr = [];
                  if (aa < 1) {
                    arr = ["{ignornormal|" + hz + "}", "{normal|" + num + "}"];
                  } else {
                    arr = ["{ignornormal|" + hz + "}", "{abnormal|" + num + "}"];
                  }
                  /* return arr.join("\n"); */
                  return arr;
                },




                rich: {
                  ignornormal: {
                    color: "#d0d9e8",
                    fontSize: 12,
                    padding: [0, 5, 0, 0]
                  },
                  normal: {
                    color: "#d0d9e8",
                    align: "center"
                  },
                  abnormal: {
                    color: "yellow",
                    backgroundColor: "rgba(245,48,8,0.5)",
                      width: "3",
                    height: "14",
                     align: "center"
                  }
                }
              }
            },
            // 線的樣式
            lineStyle: {
              color: "#0098ff",
              curveness: "0.8",
            width:"1"
            },
            leaves: {
              label: {
                normal: {
                  // 葉子節點字的樣式
                  /*  position: 'left',
                          verticalAlign: 'top',
                          align: 'left', */
                  position: "right",
                  verticalAlign: "middle",
                  align: "left",
                  fontSize: 12,
                  distance: 10,
                  padding: [0, 5, 0, 0]
                }
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      });
    },
    hidePopoverPanel() {
      this.popoverPanelShow = false;
    }
  }
};
</script>
<style scoped>
/* #echart4 {
  width: 700px;
  height: 300px;
} */
</style>