一、先介绍下什么是数据可视化
数据可视化是关于数据视觉表现形式的科学技术研究。 这里,这种数据的视觉表现形式被定义为以某种概要形式提取的信息,包括对应的信息单元的各种属性和变量。
二、Vue(Vue-cli)
。官网: https://cn.vuejs.org/
vue官网: vue是用于构建用户界面的渐进式框架。 与其他大型框架不同,Vue被设计为可以从下到上分层应用。 Vue的核心库只关注视图层,不仅易于使用,还易于与第三方库和现有项目集成。 另一方面,如果与现代化的工具链和各种支撑类库结合使用,Vue也可以完全适应复杂的单页面APP。 在这里说明什么是渐进式的。 它意味着开发人员在使用Vue时不需要全部学习,只需要学习一部分就可以使用一部分的渐进式前端框架。 Vue-cli是Vue的立足之地,Vue和Vue-cli的关系可以理解为SSM和Spring Boot的关系。 也就是说,将项目工程化,省略许多传统的结构,增加程序执行的主接口(函数),增加软件包管理工具的支持(例如npm ),而且方便地集成三者的插件进行提取
三、ECharts和HighCharts关系和区别
Highcharts:https://WWW.Highcharts.com.cn/demo/Highchartsecharts官方网站: https://e charts.Apache.org/zh/inncharts
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-cliVue-cli2.x命令使用vue init webpack项目名,Vue-cli3.x是可以通过vue ui命令打开客户端并在任意IDE中打开的Vue-cli3.x
4.2 整合ECharts
4.2.1 安装
命令: NPM安装图表- -保存d : 桌面 vue测试 te st01testonenpminstallecharts--保存注意:必须在项目目录下
4.2.2 配置
。
4.2.3 使用
模板div
h1c1/h1
buttontype=' button ' class=' la yui-BTN ' C1/button
h1集成电子图表h1
divid='主'样式=' width :600 px; height:400px;' /div
/div
/模板
脚本
导出默认值{
name: 'c1 ',
已安装()
this.getChar (;
(、
方法:
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 -s4.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>4.3.3 效果:
4.3.4 注意事项
初始化时方法只能放在生命周期的mounted() { },尽量不要放在created(){}中