Vue引入highCharts实现数据可视化

本文实例为大家分享了Vue引入highCharts实现数据可视化的具体代码，供大家参考，具体内容如下

效果图

文档Api地址

安装

npm install highcharts-vue

在main.js进行全局配置

import HighchartsVue from 'highcharts-vue'
Vue.use(HighchartsVue)
<highcharts :options="chartOptions"></highcharts>
<script>
export default {
  data() {
    return {
      chartOptions: {}
    };
  },
  mounted(){
  this.getChart()
  }
  methods:{
    getChart() {
      var template = {
        title: {
          //去掉标题
          text: ""
        },
        xAxis: {
          //自定义x轴
          categories:["05-21", "05-22", "05-23", "05-24", "05-25", "05-26", "05-27"]
        },
        yAxis: {
          //去掉y轴的value
          title: { text: "" }
        },
        credits: {
          //去掉水印
          enabled: false
        },
        plotOptions: {
          line: {
            //设置颜色，显示点
            color: "#0e6145",
            dataLabels: {
              enabled: true
            }
          }
        },
        series: [
          {
            name: "活跃度",
            data: [0, 0, 0, 0, 0, 1, 9]
          }
        ]
      };
      this.chartOptions = template;
    }
  }
 },
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue2 添加数据可视化支持的方法步骤

    安装 npm install clay-core --save 首先,通过npm安装数据可视化库clay.js,具体的api你可以查阅文档: https://yelloxing.github.io/clay-core/doc/#/quickstart/environment 这是一个非嵌入的库. 初始化 新建文件src/clay.js/index.js import render from 'clay-core'; import Sizzle from 'sizzle'; let clay =

  • 基于vue+echarts数据可视化大屏展示的实现

    基于vue+echarts数据可视化大屏展示的实现

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • Vue使用Echarts实现数据可视化的方法详解

    Vue使用Echarts实现数据可视化的方法详解

    目录 一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Echarts 2.3 使用模板 2.4实例 2.4.1柱状图(折线图变换) 2.4.2极坐标柱状图标签 总结 一,Echarts 一个基于 JavaScript 的开源可视化图表库 Echarts官网 https://echarts.apache.org/zh/index.html 1.1 获取ECharts (1)从 npm 获取(项

  • 基于vue+echarts 数据可视化大屏展示的方法示例

    基于vue+echarts 数据可视化大屏展示的方法示例

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    背景 我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待.......  不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的

  • 详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    数据可视化 将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等 技术栈 vue2.x vuex 存储公共变量,如色值等 vue-router 路由 element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker echarts 一款丰富的图表库 webpack.ES6.Babel.Stylus... 项目截图 开发 组件化 本项目完全采用组件化的思想进行开发.使用vue-router作为路由,每个页面

  • Vue引入highCharts实现数据可视化

    Vue引入highCharts实现数据可视化

    本文实例为大家分享了Vue引入highCharts实现数据可视化的具体代码,供大家参考,具体内容如下 效果图 文档Api地址 安装 npm install highcharts-vue 在main.js进行全局配置 import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue) <highcharts :options="chartOptions"></highcharts> <scrip

  • 使用 Django Highcharts 实现数据可视化过程解析

    使用 Django Highcharts 实现数据可视化过程解析

    概述 最近在一家公司实习,入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化.大概挑选了下,排除了Flask和Echarts.最终选择使用Django和它的插件django-echarts来实现.文末有项目的完整代码,不想看的可以直接去下载,拆箱可用. 本篇博客主要用于记录整体的实现步骤,以及在实现过程中遇到的各个问题. 开发环境 本次搭建使用 Python 2.7.14,django 1.11.8,highcharts 4.0.1 直接命令行输入以下语句,即可

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • 在vue项目中引入highcharts图表的方法

    在vue项目中引入highcharts图表的方法

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="chart" id="myChart" > <div class="emcs_charts" :id="id" ></div&

  • Vue.js+HighCharts实现动态请求展示时序数据

    Vue.js+HighCharts实现动态请求展示时序数据

    本文实例为大家分享了Vue.js+HighCharts实现动态请求展示时序数据的具体代码,供大家参考,具体内容如下 <template>   <el-container>     <el-header>       <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="ha

  • Highcharts＋NodeJS搭建数据可视化平台示例

    前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne

  • 解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

    前几天在工作的过程中,在数据渲染的时候,发生了swiper那一部分的轮播图不在滚动,手动滑动也没有效果.一直感觉数据开始渲染,是不是数据渲染的时候,并没有生成swiper的节点呢.后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去, 放在初始化事件中去: 结果并没有达到自己的理想状况,后来放在数据获取之后哪里在进行轮播事件的发生, swiper终于可以滑动了.其实这也不能算是一个什么大的问题点,只是单纯的想记录一下.以后在遇到相似的问题,更多的应该是从数据实现的先后来出发.这次就当做

随机推荐