vue+Echars移动端可视化页面

页面展示:

在这里插入图片描述

一、引入echars

1.终端下载echarts

npm install echarts --save

2.在main.js中引入

import echarts from "echarts"
Vue.prototype.$echarts = echarts;

二、引入成功,根据下方代码实现即可

目录结构,在view下新建如下图所示目录:
在这里插入图片描述

三,实现代码:

JianKong.vue代码如下

<template>
  <div class="wrapper">
      <span style="color:#fff;float:left;" @click="$router.back(-1)"><i
          class="iconfont icon-jiantou"
          style="margin-top: 10px;margin-left:10px;"
        ></i></span>
    <header>
        
      <div class="header_title">骨骼监控</div>
    </header>
    <main class="main" style="width: 100%">
      <!-- 故障监控 -->
      <div class="main_left">
        <div class="left-top-img-box box-img">
          <img src="@/assets/images/角标1@2x.png" />
        </div>
        <div class="left-bottom-img-box box-img">
          <img src="@/assets/images/三角3@2x.png" />
        </div>
        <div class="right-top-img-box box-img">
          <img src="@/assets/images/三角2@2x.png" />
        </div>
        <div class="right-bottom-img-box box-img">
          <img src="@/assets/images/角标2@2x.png" />
        </div>
        <div class="main_right_top_content">
          <h2 class="timeselect">
            <div class="content-title-box" style="padding-left: 0px">
              故障监测统计
            </div>
          </h2>
          <div class="ld-all">
            <div class="ld-left">
              <div class="left-one">
                <div class="item">
                  <span>总检查数</span>
                  <div class="imgBox">
                    <div class="num numBG1">1</div>
                    <div class="num numBG1">0</div>
                    <div class="num numBG1">9</div>
                    <div class="num numBG1">4</div>
                  </div>
                </div>
                <div class="item">
                  <span>总故障数</span>
                  <div class="imgBox">
                    <div class="num numBG2">0</div>
                    <div class="num numBG2">0</div>
                    <div class="num numBG2">5</div>
                    <div class="num numBG2">3</div>
                  </div>
                </div>
                <div class="item">
                  <span>总成功数</span>
                  <div class="imgBox">
                    <div class="num numBG3">1</div>
                    <div class="num numBG3">0</div>
                    <div class="num numBG3">4</div>
                    <div class="num numBG3">1</div>
                  </div>
                </div>
              </div>
              <div class="left-two">
                <compare
                  :daobao="daobao"
                  :around="around"
                  v-if="daobao !== null"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 骨骼状态使用率 -->
      <div class="main_center">
        <div class="left-top-img-box box-img">
          <img src="@/assets/images/角标1@2x.png" />
        </div>
        <div class="left-bottom-img-box box-img">
          <img src="@/assets/images/三角3@2x.png" />
        </div>
        <div class="right-top-img-box box-img">
          <img src="@/assets/images/三角2@2x.png" />
        </div>
        <div class="right-bottom-img-box box-img">
          <img src="@/assets/images/角标2@2x.png" />
        </div>
        <div class="center-one">
            <h2 class="timeselect">
            <div class="content-title-box" style="padding-left: 0px">
              骨骼状态使用率
            </div>
          </h2>
          <server :arr="arr" :yData="yData"></server>
        </div>
      </div>
      <!-- 动力监控 -->
      <div class="main_bottom">
           <div class="left-top-img-box box-img">
          <img src="@/assets/images/角标1@2x.png" />
        </div>
        <div class="left-bottom-img-box box-img">
          <img src="@/assets/images/三角3@2x.png" />
        </div>
        <div class="right-top-img-box box-img">
          <img src="@/assets/images/三角2@2x.png" />
        </div>
        <div class="right-bottom-img-box box-img">
          <img src="@/assets/images/角标2@2x.png" />
        </div>
        <div class="bottom-one">
             <h2 class="timeselect">
            <div class="content-title-box" style="padding-left: 0px">
              动力监控
            </div>
            </h2>
             <div class="sjk">
              <div class="sjk-first">
                <div class="sjk-speed">
                  <div class="connect_number"><connect /></div>
                  <div class="speed">
                    <div
                      class="server_content_right—top speed"
                      style="width: 100%;display: flex;flex-direction: column;">
                      <div class="speed_item">
                        <div class="speed_msg">
                          <div class="item">
                            <span>上肢外骨骼</span>
                            <div class="imgBox">
                              <div class="num">2</div>
                              <div class="num">6</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="speed_item">
                        <div class="speed_msg"><div class="item">
                            <span>下肢外骨骼</span>
                            <div class="imgBox">
                              <div class="num">1</div>
                              <div class="num">1</div>
                              <div class="num">2</div>
                            </div>
                          </div></div>
                      </div>
                    </div>
                  </div>
                  <div class="speed">
                    <div
                      class="server_content_right—top speed"
                      style="width: 100%;display: flex;flex-direction: column;">
                      <div class="speed_item">
                        <div class="speed_msg">
                          <div class="item">
                            <span>腰部外骨骼</span>
                            <div class="imgBox">
                              <div class="num">3</div>
                              <div class="num">0</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="speed_item">
                        <div class="speed_msg"><div class="item">
                            <span>软体外骨骼</span>
                            <div class="imgBox">
                              <div class="num">3</div>
                              <div class="num">2</div>
                            </div>
                          </div></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

        </div>
      </div>
    </main>
  </div>
</template>

<script>
import compare from "./compare/index.vue";
import server from "./server/index.vue";
import connect from "./Connect/index.vue";
export default {
  components: {
    compare,
    server,
    connect,
  },
  data() {
    return {
      daobao: 93,
      around: "23",
      arr: [10,55,44,90,74,63,82], //cpu纵轴数据
      yData: ['8:00','9:00','10:00','11:00','12:00','13:00','14:00'], //cpu横轴数据
    };
  },
  created() {
    let date = new Date();
    console.log("时间" + date);
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 46px;
  background: url("../../assets/images/titleheader.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;  
  justify-content: center;

  .header_title {
    height: 64px;
    font-size: 16px;
    margin-top: -15px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #ffffff;
    line-height: 64px;
    letter-spacing: 1px;
    background: linear-gradient(360deg, #46b1ff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.main {
  flex: 1;
  width: 100%;
  height: 100%;
  width: calc(100vw - 64px);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(
    270deg,
    rgba(26, 199, 255, 0) 0%,
    rgba(26, 199, 255, 0.06) 51%,
    rgba(26, 199, 255, 0) 100%
  );
}
.main_left {
  position: relative;
  width: 100%;
  height: 320px;
}
.main_center {
  position: relative;
  width: 100%;
  height: 220px;
}
.main_bottom{
    position: relative;
  width: 100%;
  height: 220px;
}
.center-one{
    height: 90%;
    width: 100%;
    margin: 0 auto;
}
.bottom-one{
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
.sjk-speed {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  .connect_number {
    display: block;
    width: 45%;
    height: 100%;
  }
  .speed {
    width: 30%;
    height: 100%;
  }
}
.server_content_right—top {
  width: 100%;
  height: 100%;
  // margin-top: -24px;
  // padding-top: 24px;
}
.speed_item {
  flex: 1;
  background: url("../../assets/images/msg_con.png") no-repeat;
  background-size: 84%;
  background-position: center 20%;

  .speed_title {
    text-align: center;
    margin: 10px auto 0;
    color: rgb(70, 197, 165);
    font-size: 12px;
  }

  .speed_msg {
    color: wheat;
    margin: 0 auto;
    margin-top: 17px;
    text-align: center;
    font-size: 14px;
    position: relative;
      display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: 700;
          color: #1ac7ff;
          letter-spacing:2px;
          span{
            line-height: 30px;
          }
          .imgBox {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 5px;
            .num {
              width: 35%;
              height: 100%;
              line-height: 100%;
              text-align: center;
              background-repeat: no-repeat;
              background-size: 100%;
              font-size: 0.13542rem;
              font-family: MTC;
              color: #f0f1e7;
            }
    
          }
        }
  }

  .speed_unit {
    font-size: 10px;
    position: absolute;
    top: 3px;
    color: white;
  }
}
.sjk {
  width: 100%;
  height: 195px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  .sjk-first {
    height: 100%;
    width: 100%;
  }
  .speed {
    border-left: 0.1px solid #2471a242;
  }
}
.ld-left {
  width: 100%;
  height: 100%;
  flex: 1;
  background: url("../../assets/images/pieChart@2x.png") no-repeat;

  background-position-x: center;
  background-position-y: 200px;
  background-size: 150px 68px;
  .left-one {
    height: 30%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: 700;
      color: #1ac7ff;
      letter-spacing: 2px;
      .imgBox {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 5px;
        .num {
          width: 35%;
          margin-left: 2px;
          height: 100%;
          line-height: 100%;
          text-align: center;
          background-repeat: no-repeat;
          background-size: 100%;
          font-size: 0.13542rem;
          font-family: MTC;
          color: #e4c51a;
          padding: 5px;
        }
        .numBG1 {
          background: url("../../assets/images/数字bg3@2x.png") no-repeat 46%
            47%;
        }
        .numBG2 {
          background: url("../../assets/images/数字bg5@2x.png") no-repeat 46%
            47%;
        }
        .numBG3 {
          background: url("../../assets/images/数字bg6@2x.png") no-repeat 46%
            47%;
        }
      }
    }
  }
}
.content-title-box {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 247, 254, 1);
  line-height: 21px;
  letter-spacing: 1px;
  margin-top: 4px;
  margin-left: 28px;
  position: relative;

  &::after {
    display: block;
    content: "";
    width: 4px;
    height: 16px;
    background: #00f7fe;
    border-radius: 2px;
    position: absolute;
    left: -15px;
    top: 2.5px;
  }
}
.timeselect {
  width: 100%;
  height: 24px;
  margin: 0px;
  line-height: 24px;
  color: #1ac7ff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  div {
    width: 41%;
    display: block;
  }
}
.main_right_top_content {
  width: 100%;
  height: 100%;
  padding-top: 1px;
}
.left-top-img-box {
  position: absolute;
  left: -14px;
  top: -14px;
  margin: 0;
  padding: 0;
  width: 35px;
  height: 35px;
}
.ld-all {
  width: 100%;
  height: 85%;
  display: flex;
  flex-direction: column;
}
.left-two {
  height: 72%;
  width: 100%;
}
.box-img img {
  width: 100%;
  height: 100%;
}

.left-bottom-img-box {
  position: absolute;
  left: -14px;
  bottom: -14px;
  margin: 0;
  padding: 0;
  width: 35px;
  height: 35px;
}

.right-top-img-box {
  position: absolute;
  top: -14px;
  right: -14px;
  margin: 0;
  padding: 0;
  width: 35px;
  height: 35px;
}

.right-bottom-img-box {
  position: absolute;
  right: -14px;
  bottom: -14px;
  margin: 0;
  padding: 0;
  width: 35px;
  height: 35px;
}
</style>

compare=>index.vue代码如下

<template>
  <div class="server">
    <div id="compare" ref="compare" style="height: 100%;width:100%" ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  props:['daobao','around'],
  data() {
    return {
      daobaot:null,
      quebao:null,
      text:null,
    };
  },
  
  computed: {},
  watch: {
    daobao:{
      handler(newVal,oldVal){
        
        this.daobaot = newVal
        this.quebao = 100 - parseInt(newVal)
        this.initData();
        // console.log(this.daobao,hhh,"asdas")
      },
      immediate: true
      
    },
    around:{
      handler(newVal,oldVal){
        this.initData();
      },
      immediate: true
    }
  },
  methods: {
    initData: function () {
      var chartDom = this.$refs.compare;
      const myChart = echarts.init(chartDom, "", {
        width: document.getElementById("compare").offsetWidth,
      });
      var img =
        "data:image/png;base64,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";
      var trafficWay = [
        {
          name: "正常数",
          value: this.daobao,
        },
        {
          name: "维修数",
          value: this.quebao,
        },
      ];
      var data = [];
      var color = ["#00ffff", "#f3ff34"];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [45, 49],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      params.name + "\n" + "\n" + "百分比:" + percent + "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 20,
                length2: 10,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      let that = this
     let option = {
        color: color,
        title: {
          text: "世界时\n\n"+that.around+":00",
          top: "40%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 68,
                height: 68,
              },
              left: "center",
              top: "center",
            //   position: [100, 100],
            },
          ],
        },
     
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["正常数", "维修数"],
          right: 0,
          bottom: 0,
          align: "right",
          textStyle: {
              fontSize:12,
            color: "#fff",
          },
          itemHeight:10,
          itemGap: 10,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };

      myChart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.initData();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='scss' scoped>

.server {
  width: 100%;
  height: 100%;
}
</style>

connect=》index.vue代码如下:

<template>
  <div class="server">
    <div id="connect" ref="connect" style="height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    initData: function () {
      var chartDom = this.$refs.connect;
      const resizeDiv = document.getElementById("connect");
      console.log("hahah" + document.getElementById("connect").offsetWidth);
      const myChart = echarts.init(chartDom, "", {
        width: document.getElementById("connect").offsetWidth,
      });
      const dataArr = 50;
const dataX = 100;
const height1 = { value: 80 };

let option = {
    // backgroundColor: 'red',
    //   grid: {
    //     //   top: "40%",
    //       left: "3%",
    //       right: "13%",
    //       bottom: "1%",
    //     },
    /** 标题*/
    title: [
        {
            text: '{val|' + dataArr + '}\n{name|' + '动力占有率' + '}',
            bottom: '1%',  
            left: 'center',
            textStyle: {
                rich: {
                    val: {
                        fontSize: 24,
                        color: '#E5E5E5',
                        padding: [10, 0],
                    },
                    name: {
                        fontSize: 15,
                        color: '#E5E5E5',
                    },
                    unit: {
                        fontSize: 14,
                        color: '#DCCC5F',
                    },
                },
            },
            triggerEvent: true,
        },
    ],

    /** 关闭必图例*/
    legend: {
        show: false,
    },
    series: [
        {
            name: '最外部进度条',
            type: 'gauge',
            radius: '94%',
            splitNumber: 10,
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            1,
                            {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#032347', // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#0B8BAA', // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#03FCF3', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        ],
                    ],
                    width: 12,
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 40,
                lineStyle: {
                    color: '#031f45',
                    width: 3,
                },
            },
            itemStyle: {
                show: false,
            },
            detail: {
                show: false,
            },
            title: {
                // 标题
                show: false,
            },
            data: [
                {
                    name: 'title',
                    value: dataArr,
                },
            ],
            pointer: {
                show: false,
            },
            animationDuration: 4000,
        },
        {
            name: '外二红线',
            type: 'gauge',
            radius: '78.5%',
            axisLine: {
                lineStyle: {
                    color: [
                        [dataArr / dataX, '#031f45'],
                        [1, '#B74443'],
                    ],
                    width: 4,
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                show: false,
            },
            title: {
                // 标题
                show: false,
            },
            data: [
                {
                    name: 'title',
                    value: dataArr,
                },
            ],
            pointer: {
                show: false,
            },
            animationDuration: 4000,
        },
        {
            name: '刻度尺',
            type: 'gauge',
            radius: '67%',
            splitNumber: 10, // 刻度数量
            min: 0, // 最小刻度
            max: dataX, // 最大刻度
            // 仪表盘轴线相关配置
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            1,
                            {
                                type: 'radial',
                                x: 0.5,
                                y: 0.6,
                                r: 0.6,
                                colorStops: [
                                    {
                                        offset: 0.85,
                                        color: '#031F46', // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.93,
                                        color: '#086989', // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#12D7EF', // 100% 处的颜色
                                    },
                                ],
                            },
                        ],
                    ],
                    width: 500,
                },
            },
            /** 分隔线样式*/
            splitLine: {
                show: true,
                length: 10,
                lineStyle: {
                    width: 3,
                    color: '#12E5FE', // 用颜色渐变函数不起作用
                },
            },
            /** 刻度线*/
            axisTick: {
                show: true,
                splitNumber: 10,
                lineStyle: {
                    color: '#12E5FE', // 用颜色渐变函数不起作用
                    width: 1,
                },
                length: 5,
            },
            /** 刻度标签*/
            axisLabel: {
                distance: 2,
                color: '#CEF3FE',
            },
            detail: {
                show: false,
            },
            animationDuration: 4000,
        },
        {
            name: '渐变进度',
            type: 'gauge',
            radius: '56%',
            splitNumber: 10,
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            dataArr / dataX,
                            {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(60,207,223,0)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.9,
                                        color: 'rgba(60,207,223,0.5)', // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(60,207,223,0.9)', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        ],
                    ],
                    width: 30,
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                show: false,
            },
            title: {
                // 标题
                show: false,
            },
            data: [
                {
                    name: 'title',
                    value: dataArr,
                },
            ],
            pointer: {
                show: false,
            },
            animationDuration: 4000,
        },
        {
            name: '内层带指针',
            type: 'gauge',
            radius: '34%',
            splitNumber: 10, // 刻度数量
            min: 0, // 最小刻度
            max: dataX, // 最大刻度
            // 仪表盘轴线相关配置
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            1,
                            {
                                type: 'radial',
                                x: 0.5,
                                y: 0.59,
                                r: 0.6,
                                colorStops: [
                                    {
                                        offset: 0.72,
                                        color: '#032046',
                                    },
                                    {
                                        offset: 0.94,
                                        color: '#086989',
                                    },
                                    {
                                        offset: 0.98,
                                        color: '#0FAFCB',
                                    },
                                    {
                                        offset: 1,
                                        color: '#0EA4C1',
                                    },
                                ],
                            },
                        ],
                    ],
                    width: 1000,
                },
            },
            /** 分隔线样式*/
            splitLine: {
                show: false,
            },
            /** 刻度线*/
            axisTick: {
                show: false,
            },
            /** 刻度标签*/
            axisLabel: {
                show: false,
            },
            /** 仪表盘指针*/
            pointer: {
                show: true,
                length: '95%',
                width: 3, // 指针粗细
            },
            /** 仪表盘指针样式*/
            itemStyle: {
                color: '#12E5FF',
            },
            data: [
                {
                    value: dataArr,
                },
            ],
            detail: {
                show: false,
            },
        },
    ],
    graphic: {
        elements: [
            {
                type: 'line',
                z: 4,
                style: {
                    fill: '#075173',
                    stroke: '#075173',
                    lineWidth: 2,
                    shadowBlur: 15,
                    shadowOffsetX: 0,
                    shadowOffsetY: -4,
                    shadowColor: '#13E6FF',
                },
                shape: {
                    x1: height1.value * 0.57,
                    y1: 0,
                    x2: 0,
                    y2: 0,
                },
                left: 'center',
                bottom: '2%',
                silent: true,
            },
            {
                type: 'line',
                z: 4,
                style: {
                    fill: '#075173',
                    stroke: '#075173',
                    lineWidth: 2,
                    shadowBlur: 15,
                    shadowOffsetX: 0,
                    shadowOffsetY: -4,
                    shadowColor: '#13E6FF',
                },
                shape: {
                    x1: height1.value * 0.43,
                    y1: 0,
                    x2: 0,
                    y2: 0,
                },
                left: 'center',
                bottom: '14.5%',
                silent: true,
            },
        ],
    },
};

      myChart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.initData();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.server {
  width: 100%;
  height: 100%;
}
</style>

server=>index.vue代码如下:

<template>
  <div class="server">
    <div id="servermsg" ref="chart" style="height:100%">

    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    components: {},
     props:["arr","yData"],
    data() {
      return {
        cpuuse: [],
      };
    },
    computed: {},
     watch: {
     arr:{
            handler(newVal,oldVal){
                // console.log("arr",newVal);
                this.arr = newVal
                this.getModel();
            },
            immediate:true
        },
     yData:{
            handler(newVal,oldVal){
                // console.log("yData",newVal);
                this.yData = newVal;
                this.getModel();
            },
            immediate:true
        }
  },
    methods: {
        async getModel(){
      // console.log("接收的数据",this.yData[0],this.arr[0]);
      this.initData(this.yData,this.arr);
    },
      initData: function (xAxisData,seriesData) {
        var chartDom = this.$refs.chart;
        const resizeDiv = document.getElementById('servermsg');
        // console.log("hahah"+document.getElementById('servermsg').offsetWidth);
        const myChart = echarts.init(chartDom, '', { width: document.getElementById('servermsg').offsetWidth });
        let option = {
          grid: {
            left: '13%',
            top: '5%',
            bottom: '11%',
            right: '4%',
          },
          tooltip: {
            trigger: 'axis',
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#fff",
            },
            borderWidth: 0,
          },
          yAxis: {
            show: true,
            min: 0,
            max: 100,
            type: 'value',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.7)',
              fontSize: 12,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(28, 158, 222, 1)',
                type: 'solid'
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: 'rgba(28, 158, 222, 1)',
              }
            },
            axisLabel: {
              formatter: '{value}%',
              color: 'rgba(28, 158, 222, 1)',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: 'rgba(0, 206, 209, 0.3)',
                width: 0.5,
              }
            }
          },
          xAxis: {
            show: true,
            type: 'category',
            boundaryGap: false,
            nameTextStyle: {
              fontSize: 12
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(28, 158, 222, 1)',
              }
            },
            data: xAxisData,
          },
          series: [{
            name: '使用率',
            type: "line",
            smooth: true,
            symbolSize: 5,
            symbol: 'circle', //数据交叉点样式 (实心点)
            data: seriesData,
            itemStyle: {
              normal: {
                width: 5,
                color: 'rgb(0, 255, 255)',
              }
            },
            lineStyle: {
              normal: {
                color: 'rgb(0, 255, 255)',
                width: 0.5,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: 'rgba(0, 255, 255,0.2)'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(0, 255, 255,0.1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0, 255, 255,0)'
                    }
                  ],
                  false
                ),
              }
            },
          }, ],
        }
        
        myChart.setOption(option);
    
    },
  },
    created() {},
    mounted() {
      this.getModel();
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
  }

</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .server {
    width: 100%;
    height: 100%;
  }

</style>

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip 基于echarts封装的H5移动端、门户网站股票行情图表合集(分时图、K线图、MACD等技术指标附图).zip
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值