想成为可视化高手？这篇合集就够了

前言

在生活中"可视化"对我们来说其实并不陌生，网站上各大图表频频而出，给我们的视觉也带来很直观的感受。下面我们就"可视化"而言，讨论一下，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>

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