一、先介紹下什麼是數據可視化

數據可視化，是關於數據視覺表現形式的科學技術研究。其中，這種數據的視覺表現形式被定義為，一種以某種概要形式抽提出來的信息，包括相應信息單位的各種屬性和變數。

二、Vue（Vue-cli）

官網：https://cn.vuejs.org/

[Vue官網]：Vue是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
在這裡解釋下什麼叫做漸進式：就是指用Vue的時候不需要開發者全部學會，而是學一部分就可以用一部分，就可以簡單概括為漸進式的前端框架。
Vue-cli則就是Vue的一個腳手架，Vue和Vue-cli的關係可以理解為SSM和Spring Boot的關係，就是將項目工程化，省略了大量原有的配置，增加了程序運行的一個主介面（函數），並且增加了包管理工具的支持（如npm），而且可以很方便的整合三方的插件進行項目的擴充。

三、ECharts和HighCharts關係和區別

HighCharts：
https://www.highcharts.com.cn/demo/highcharts
ECharts官網：
https://echarts.apache.org/zh/index.html

3.1 關係

它們都是前端數據可視化的優秀框架。
HighCharts界面美觀，由於使用JavaScript編寫，所以不需要像Flash和Java那樣需要插件才可以運行，而且運行速度快。另外HighCharts還有很好的兼容性，能夠完美支持當前大多數瀏覽器。
ECharts是一款基於JavaScript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。ECharts最初由百度團隊開源，並於2018年初捐贈給Apache基金會，成為ASF孵化級項目。

3.2 區別

ECharts完全開源，可免費商用，HighCharts對個人和學校使用免費，商業需要授權

四、Vue整合ECharts和HighCharts步驟

4.1 搭建Vue-cli項目

簡單說下大致步驟，如果有想知道細節的讀者請留言：

①需要npm環境
②npm安裝Vue-cli
③Vue-cli2.x使用命令vue init webpack項目名,Vue-cli3.x可以使用vue ui命令打開客戶端進行創建
④使用任意IDE打開
⑤安裝和配置vue-router

4.2 整合ECharts

4.2.1 安裝

命令：npm install echarts –save

D:desktopVue Testtest01testone>npm install echarts --save

注意：必須是在項目目錄下

4.2.2 配置

4.2.3 使用

<template>
  <div>
  <h1>c1</h1>
<button type="button" class="layui-btn">c1</button>
<h1>整合ECharts</h1>
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
  export default {
name: "c1",
  mounted() {
  this.getChar();
},
  methods: {
    getChar() {
      // 基於準備好的dom，初始化echarts實例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定圖表的配置項和數據
      var option = {
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };
      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option);
    }
  }
}
  </script>
<style scoped>
  </style>

注意：

<script>
  export default {
name: "c1",
  mounted() { //調用
  //mounted在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
  this.getChar();
},
  methods: { //方法
    getChar() { 
      ......
    }
    }
  }
</script>

4.2.4 效果

4.3 整合HighCharts

4.3.1 安裝

npm install highcharts --save
# 需要依賴jQuery
npm i jquery -s

4.3.2 Vue中引用

<template>
  <div>
  <div class="highcharts-container" id="map"></div>
</div>
</template>
<script>
    import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
  name: "flows",
  data() {
    return {
      chart: null
    }
  },
  mounted() { 
    this.initChart();
  },
  methods: {
    initChart() {
      var options = {
        title: {
          text: '我是標題'//標題
        },
        xAxis: {
          categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] //橫坐標
        },
        yAxis: {
          title: {
            text: '1'//側面的標題
          },
          lineWidth: 2,//線的寬度
          lineColor: '#F33',//線顏色
        },
        series: [{
          name: '滑鼠懸浮的標題', //滑鼠懸浮的標題
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],//數據
          color: '#F33' //點的顏色
        }]
      };
      this.chart = new Highcharts.Chart('map', options); //初始化執行
    }
  },
  created() {
  }
}
</script>
<style scoped>
  .highcharts-container {
    width: 800px;
    height: 400px;
  }
</style>