一、先介绍下什么是数据可视化

数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。

二、vue（vue-cli）

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

[vue官网]：vue是一套用99作文网于构建用户界面的渐进式框架。与其它大型框架不同的是，vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue 也完全能够为复杂的单页应用提供驱动。
在这里解释下什么叫做渐进式：就是指用vue的时候不需要开发者全部学会，而是学一部分就可以用一部分，就可以简单概括为渐进式的前端框架。
vue-cli则就是vue的一个脚手架，vue和vue-cli的关系可以理解为ssm和spring boot的关系，就是将项目工程化，省略了大量原有的配置，增加了程序运行的一个主接口（函数），并且增加了包管理工具的支持（如npm），而且可以很方便的整合三方的插件进行项目的扩充。

三、echarts和highcharts关系和区别

highcharts：
https://www.highcharts.com.cn/demo/highch吴石案arts
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: {},        ries: [{          name: '销量',          type: 'bar',          data: [5, 20, 36, 10, 10, 20]        }]      };      // 使用刚指定的配置项和数据显示图表。      mychart.toption(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# 需要依赖jquerynpm i jquery -s

4.3.2 vue中引用

<template>  <div>  <div class="highcharts-container" id="map"></div>&l烘培班t;/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',//线颜色        },        ries: [{          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>

4.3.3 效果：

4.3.4 注意事项

初始化时方法只能放在生命周期的
mounted() {
},
尽量不要放在
created(){
}
中