基於vue + echarts 數據可視化大屏展示

一、老規矩先npm安裝echarts

npm install echarts --save

二、引入使用

1.全局引入main.js中配置（不推薦使用）

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //掛載在原型，組件內使用直接this.$echarts調用

2.組件內按需引入（推薦使用）
這種方式很簡單，在需要引入圖表的組件引入,例如如下引入柱狀圖。具體使用幹什麼樣子的組件需要引入什麼可以參考引入示例

//引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱狀圖組件
require("echarts/lib/chart/bar");

三、項目中應用

1.直接上效果圖果斷乾脆

2.目錄結構
每一塊圖表都是一個組件的形式呈現，方便對echarts的修改

first.vue組件代碼示例如下，其他組件可以比葫蘆畫瓢

<template>
  <div class="visual-chart1" id="myChart1"></div>
</template>

<script>
export default {
  name: "first",
  props: {
    lineData: {
      type: Object
    }
  },
  data() {
    return {
      faultByHourTime:null
    };
  },
  mounted() {
    this.chartsView();
  },
  methods: {
    chartsView() {
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B"
            }
          }
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 13,
          data: ["學校管理員", "教師", "學員"],
          right: "10px",
          top: "0px",
          textStyle: {
            fontSize: 12,
            color: "#fff"
          }
        },
        grid: {
          left: "8%",
          top: "10%",
          bottom: "10%",
          right: "10%"
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: this.lineData.date
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              },
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#57617B"
              }
            }
          }
        ],
        series: [
          {
            name: "學校管理員",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(7,46,101,0.2)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0,166,246,0.4)"
                  }
                ]),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "#3A44FB"
              }
            },
            data: this.lineData.sta
          },
          {
            name: "教師",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(7,44,90,0.2)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0,212,199,0.4)"
                  }
                ]),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "#00d4c7"
              }
            },
            data: this.lineData.ta
          },
          {
            name: "學員",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(7,44,90,0.2)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0,146,246,0.4)"
                  }
                ]),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "#0092f6"
              }
            },
            data: this.lineData.sa
          }
        ]
      };

      myChart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          myChart.resize();
        };
      }, 200);

      // 動態顯示tootip
      var faultByHourIndex = 0; //播放所在下標
      this.faultByHourTime = setInterval(function() {
        //使得tootip每隔三秒自動顯示
        myChart.dispatchAction({
          type: "showTip", // 根據 tooltip 的配置項顯示提示框。
          seriesIndex: 0,
          dataIndex: faultByHourIndex
        });
        faultByHourIndex++;
        // faultRateOption.series[0].data.length 是已報名縱座標數據的長度
        if (faultByHourIndex > option.series[0].data.length) {
          faultByHourIndex = 0;
        }
        if (faultByHourIndex > option.series[1].data.length) {
          faultByHourIndex = 0;
        }
        if (faultByHourIndex > option.series[2].data.length) {
          faultByHourIndex = 0;
        }
      }, 3000);
    }
  },
  beforeDestroy() {
    clearInterval(this.faultByHourTime);
    this.faultByHourTime = null;
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.visual-chart1 {
  width: 100%;
  height: 100%;
}
</style>

以上內容有什麼不妥之處歡迎下方留言/私信交流，js+jq+echarts版本可以查看鏈接 點擊進入