专栏首页小丑的小屋想成为可视化高手?这篇合集就够了 | Vue

想成为可视化高手?这篇合集就够了 | Vue

前言

在生活中"可视化"对我们来说其实并不陌生,网站上各大图表频频而出,给我们的视觉也带来很直观的感受。下面我们就"可视化"而言,讨论一下,echarts和highcharts在vue里怎么灵活使用,如何解决出现的问题和难点。

准备工作

echarts和highcharts的区别:

echarts就相当于我们平时用的wps,而highcharts就相当于我们使用的office,前者是百度的api,后者是国外的api。

echarts官网像是一本使用说明书:

https://echarts.apache.org/examples/zh/index.html

highcharts官网就像是一个博客:

https://www.highcharts.com.cn/demo/highcharts

echarts

安装echarts

$ npm i echarts -S

引入echarts

import Echarts from "echarts";
//设置全局变量
Vue.prototype.$echarts = Echarts;

使用echarts(我们这里以bar图为例)

<template>
    <div ref="myChart" style="width:200px;height:200px"></div>
</template>
<script>
     export default{
        data(){
           return {
              barChart: {
                    xAxisData:["第一列","第二列","第三列"],
                    yAxisData: [5, 20, 36]
           }
        },
        mounted:{
            this.drwaCharts();
        },
        methods:{
           drawCharts(){
                // 基于准备好的dom,初始化echarts实例
                this.myChart = this.$echarts.init(this.$refs.myChart);
                 // 绘制图表
                this.myChart.setOption({
                  color: [
                    "#7cb5ec",
                    "#434348",
                    "#90ed7d",
                    "#f7a35c",
                    "#8085e9",
                    "#f15c80",
                    "#e4d354",
                    "#2b908f",
                    "#f45b5b",
                    "#91e8e1"
                  ],
                  title: { text: "标题", left: "center" },
                  tooltip: {},
                  xAxis: {
                    type: "category",
                    data: this.barChart.xAxisData,
                    axisLabel: {
                      rotate: 45
                    }
                  },
                  yAxis: {
                    type: "value",
                    name: "数量"
                  },
                  series: [
                    {
                      type: "bar",
                      barCategoryGap: "50%",
                      data: this.barChart.yAxisData
                    }
                  ]
                });
           }
        }
     }
</script>

注意

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

我们在开发过程中我们在运行Vue项目的时候出现了上述错误,出现该错误的原因是Echatrs的图形容器还没生成就对其进行了初始化造成。为了解决这个问题小编给大家提供了一下几种方法,供参考。

解决方法

1、如果在项目中我们使用document.getElementById()获取dom的话,我们可以使用ref和$refs来代替。

2、如果我们在项目中Echatrs的图形容器还没生成就对其进行了初始化造成,我们可以使用this.$nextTick(()=>{})把代码放到该函数里即可。

这个时候可能有人会问,如果要让echarts自适应窗口呢,下面小编整理了一种方法,使用到了vue中的自定义指定directives和原生js中的事件绑定我们直接上代码:

import echarts from "echarts";

let HANDLER = "Vue_eCharts_Resize_Handle";

function unbind(el, bindings, vnode) {
  window.removeEventListener("resize", el[HANDLER]);
  delete el[HANDLER];
}
/**
 * 自定义echart自适应伸缩屏幕
 */
export default {
  echartResize: {
    bind(el, bindings, vnode) {
      unbind(el);
      el[HANDLER] = function() {
        let chart = echarts.getInstanceByDom(el);
        if (!chart) {
          return;
        }
        chart.resize();
      };
      window.addEventListener("resize", el[HANDLER]);
    },
    unbind: unbind
  }
};

如何使用vue里的自定义指令呢

自定义指令

我们可以注册一个全局指令v-echarts-resize

 import util from "@/directives/echartsHelper.js";
 Vue.directive('echartsResize',util.echartResize)

当然也可以注册局部指令,组件会接受一个directives的选项:

import util from "@/directives/echartsHelper.js";
directives: {
  echartsResize: util.echartResize
}

开箱即用

小编给大家推荐vue-echarts

https://github.com/ecomfe/vue-echarts

vue-highcharts

安装

$ npm i highcharts-vue -S

引入项目

import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import NoDataToDisplay from "highcharts/modules/no-data-to-display.js";
import treemap from "highcharts/modules/treemap";
import heatmap from "highcharts/modules/heatmap";
heatmap(Highcharts);  //热力图组件
treemap(Highcharts);  //矩形树图组件
NoDataToDisplay(Highcharts);  //没数据组件

使用vue-highcharts

<template>
   <highcharts :options="chartOptions" class="bg-purple">
</template>
<script>
    export default{
       data(){
           return {
             chartOptions:{
                lang: {
                     noData: "暂无数据"
                },
                 title: {
                   text: "标题",
                   align: "left",
                   verticalAlign: "top",
                   style: {
                     fontSize: 14,
                     lineHeight: 20,
                     fontWeight: 700
                  }
                },
                 credits: {
                   enabled: false
                },
                 tooltip: {
                   headerFormat: "",
                   pointFormat: "{point.name}: <br />个数:<b>{point.y}</b><br />版本:<b>{point.version}</b>"
                },
                 colors: [
                                    "#7cb5ec",
                  "#434348",
                  "#90ed7d",
                  "#f7a35c",
                  "#8085e9",
                  "#f15c80",
                  "#e4d354",
                  "#2b908f",
                  "#f45b5b",
                  "#91e8e1"
                ],
                plotOptions: {
                  pie: {
                    dataLabels: {
                      useHTML: true,
                      enabled: true,
                      distance: -40,
                      style: {
                        fontWeight: "normal",
                        textOutline: "none",
                        color: "#fff"
                      }
                    },
                    startAngle: -90, // 圆环的开始角度
                    endAngle: 90, // 圆环的结束角度
                    center: ["50%", "100%"],
                    size: "130%"
                  }
                },
                series: [
                  //如果没有数据,这个变成[]数组即可
                  {
                    type: "pie",
                    name: "标题",
                    innerSize: "50%",
                    data: [
                      { name: "aaa", y: 1, version: ["1"] },
                      { name: "bbb", y: 2, version: ["2"] }
                    ]
                  }
                ]
              }
         }
      }
    }
</script>

本文分享自微信公众号 - 小丑的小屋(clownjack2020),作者:萌新小丑

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 摸鱼的新发现,滚动条无限滚动

    上班摸鱼,下班摸鱼,一直摸一直爽。在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所...

    小丑同学
  • 让小黑窗口听你指挥

    对于开发人员来说,代码会不会写不重要,逼格必须的上的去。首先电脑的配置要高配,键盘要机械的,鼠标要无声的,一眼看上去就是高端开发工程师。那么对于穷苦的劳动人民没...

    小丑同学
  • "1024"看过来会跳舞的香蕉

    矩形中的一个是黄色,形成了香蕉的主体,另一个矩形是与背景相同的颜色,并产生了香蕉的曲率。

    小丑同学
  • 在Vue中使用Echarts

    前端可视化是一个前端最基本的技能,要想做的好看,还是得借助一下百度家的echarts,那要怎么在Vue中使用echarts?这个官网没有给出实例,实例基本都是在...

    王小婷
  • react学习系列6 react-router 实现异步按需加载模块

    按需加载模块的目的是实现代码分隔,用户打开首页时不用下载全部的代码,打开特定的页面加载特定的代码。提高用户体验。

    mafeifan
  • 解决svn迁移过程中出现:SVN Error: is not the same repository as的问题

      由于公司业务的需要,新购买了一批机器,那么面临着的就是svn等一系列东西进行迁移的问题,在svn迁移以后,本地的svn代码在切换时出现了SVN Error:...

    阿豪聊干货
  • 5.2.3 十字链表

    十字链表是有向图的一种链式存储结构。在十字链表中,对应于有向图中的每条弧有一个结点,对应于每个顶点也有一个结点,这些结点的结构如下:

    week
  • 函数与极限(二)

    李小白是一只喵
  • 打造专属自己的html5拼图小游戏

    利用canvas切出小块图片 我们知道现在的拼图游戏都是由九张小图片依次排列组成的,就是类似九宫格那样。那么以前的做法就是我们利用Photoshop这样的工具把...

    李海彬
  • IJCAI 2018 | 让CNN跑得更快,腾讯优图提出全局和动态过滤器剪枝

    作者:Shaohui Lin、Rongrong Ji、Feiyue Huang 等

    机器之心

扫码关注云+社区

领取腾讯云代金券