前言
在生活中"可视化"对我们来说其实并不陌生，网站上各大图表频频而出，给我们的视觉也带来很直观的感受。下面我们就"可视化"而言，讨论一下，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
代码语言：javascript复制$ npm i echarts -S引入echarts
代码语言：javascript复制import Echarts from "echarts";
//设置全局变量
Vue.prototype.$echarts = Echarts;使用echarts(我们这里以bar图为例)
代码语言：javascript复制<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>注意
代码语言：javascript复制[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中的事件绑定我们直接上代码：
代码语言：javascript复制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
代码语言：javascript复制 import util from "@/directives/echartsHelper.js";
Vue.directive('echartsResize',util.echartResize)当然也可以注册局部指令,组件会接受一个directives的选项:
代码语言：javascript复制import util from "@/directives/echartsHelper.js";
directives: {
echartsResize: util.echartResize
}开箱即用
小编给大家推荐vue-echarts
https://github.com/ecomfe/vue-echarts
vue-highcharts
安装
代码语言：javascript复制$ npm i highcharts-vue -S引入项目
代码语言：javascript复制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
代码语言：javascript复制<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>
