动态echarts及tree型图

一、         动态折线图

 

该部分是基于echarts开发的，主要有两部分组成，折线图和柱状图，其中末端的垂直细线和小圆球为柱状图部分，小球是柱状图的markPoint设置的，柱状图的data数据是与折线图data数据数组长度相同的数组，数组最后一项与折线图数组的最后一项等值，其余项均为0，具体配置如下：

 

 

动态设置的实现：在数组末端插入数据，同时去除数组的第一项，echarts更新，从而实现动态效果

二、         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   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   700px;
164  height: 180px;
165 }
166 </style>

关系图源码如下：

 

<template>
 <div>
 <div id="echart4" ref="echart4" style=" 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("
"); */
                  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)",
                       "3",
                    height: "14",
                     align: "center"
                  }
                }
              }
            },
            // 线的样式
            lineStyle: {
              color: "#0098ff",
              curveness: "0.8",
            "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 {
   700px;
  height: 300px;
} */
</style>