Vue 整合 HighCharts 和 ECharts 实现数据可视化

2022-10-16
北京
本文字数：2916 字
阅读完需：约 1 分钟

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

[百度百科]：数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多。

二、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/highchartsECharts 官网：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:\desktop\Vue Test\test01\testone>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>

复制代码

4.3.3 效果：

4.3.4 注意事项

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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/049c0584f5cad00a2fba91cc3】。文章转载请联系作者。

Barry Yan

关注

做兴趣使然的Hero 2021-01-14 加入

Just do it.

发布

暂无评论

创作场景

Vue 整合 HighCharts 和 ECharts 实现数据可视化

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

二、Vue（Vue-cli）

三、ECharts 和 HighCharts 关系和区别

3.1 关系

3.2 区别

四、Vue 整合 ECharts 和 HighCharts 步骤

4.1 搭建 Vue-cli 项目

4.2 整合 ECharts

4.2.1 安装

4.2.2 配置

4.2.3 使用

4.2.4 效果

4.3 整合 HighCharts

4.3.1 安装

4.3.2 Vue 中引用

4.3.3 效果：

4.3.4 注意事项

Barry Yan

评论