在Vue中使⽤echarts的实例代码（3种图）
前⾔
公司的项⽬中需要对数据做可视化处理，⾼级点的D3.js⽬前还没接触到，因此选⽤了⼤众化的Echarts, 在vue的⽣态系统中已经有实现好的vue-echarts，但是使⽤现成的就意味着必须使⽤它定制好的数据结构，我也没办法对他进⾏⼀些修改。我个⼈也偏向于原⽣JS编程，因此没有采⽤，⽽是⾃⼰在vue中实现了对数据的可视化处理，先来看看效果图
以下数据已做脱敏处理
这是⽬前⽤到的三种图。
可以看到，我在图表的外部添加了标题及说明，以及右侧的选择框组件，视图可以根据选择的不同，图表进⾏动态切换（echarts也是数据驱动），这就是个⼈定制化的好处
总体数据流向
所有的数据都是动态获取的，由前端向后台请求。当然请求数据肯定不会放在图表组件中，⽽是放在了外部。因为架构设计的不合理（MD前端就我⼀个⼈！），因此前期获取数据及存取数据的⽅式，和后期也较⼤的不同。
1. 存放在vuex中
这么⼤型的项⽬，vuex少不了。在前⾯的组件中，⼀次请求数据，然后将数据存储到了vuex中，echarts组件再从vuex中获取数据。这样的做法可能代码要稍微复杂点，但是数据
存储在vuex中是随时可见的，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加⼊缓存中，下次再请求可以先从缓存调⽤。
（然⽽这只是我前端的想法，后台已经实现了对请求数据的缓存）
2. 存放在组件中，再分派到echarts组件
再对数据进⾏还原的时候（我的收藏，最近浏览），因为不需要保存或者收藏数据，我就直接⽤⼀个⽗组件请求，然后再分发到echarts组件，这样没有经过vuex，代码想多要少些。
组件代码
<template>
<div class="r-echarts-line">
<div class="top">
<div class="title">
{{origin.title}}
</div>
<div class="select-list">
<Select v-model="pagePick">
<Option v-for="item in origin.page_select" :key="item" :value="item.val">{{item.name}}</Option>
</Select>
<Select v-model="typePick">
<Option v-for="item in typeList" :value="item.name" :key="item">{{item.name}}</Option>
</Select>
</div>
</div>
<div class="des">说明：符合于本次筛选条件的共有<span class='tips'>{{origin.desc}}</span>条<span >职位信息</span>。</div>
<div class="bottom" id="echart" ref="mychart">
</div>
setoption</div>
</template>
这是组件的html部分，可以看见top以及des是我⾃⼰添加的，bottom才是核⼼，也是整个echarts展⽰的部分，注意这⾥添加了ref，在script的代码中，我们将通过这个钩⼦，将DOM挂载到echarts中
<script>
// echarts相关
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/legend');
require('echarts/lib/component/markLine');
export default {
name: 'r-echarts-line',
data () {
return {
typePick: '数值',
typeList: [
{
name: '数值'
},
{
name: '百分⽐'
}
]
,
pagePick: 0,
// myChart实例
myChart: {},
percent: {
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}%'
}
}
},
numeric: {
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}'
}
}
}
}
},
props: {
index: {
required: true,
type: Number
},
data: {
required: true,
type: Object
}
},
mounted () {
this.setEchart();
},
updated () {
if (!Chart) {
this.setEchart();
}
this.chartChange();
},
computed: {
origin () {
return this.data;
},
opt() {
let that = this;
let obj = {
color: ['#606c94'],
tooltip: {
},
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}
}
},
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}'
},
emphasis: {
show: true
}
},
xAxis: {
type: 'value',
},
yAxis: {
data: pe][that.pagePick].key,
axisLabel: {
interval: 0,
rotate: -30
}
},
series: [{
name: igin.title,
type: 'bar',
data: pe][that.pagePick].val,
barMaxWidth: '30',
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
}
return obj;
},
type () {
if (pePick == '数值') {
return 'numeric';
} else if (pePick == '百分⽐') {
return 'percent';
} else {
return 'numeric';
}
}
},
methods: {
setEchart () {
let dom = this.$hart;
},
chartChange () {
if (pePick == '百分⽐') {
}
if (pePick == '数值') {
}
}
}
}
</script>
⾸先我引⼊了需要的echarts组件，这个部分通过npm i echarts -S添加。
接着data部分我设置了那些将会引起变化的参数。需要注意的是，我并没有将echarts的opt部分写⼊到data中，因为整个图表是基于数据驱动的，并且随时会发⽣变化，因此我将opt设置为计算属性computed，这样opt将会根据我的选择动态变化，echarts也将动态响应，mychart⽤于接收echarts⽣成的图表实例，再参数变换的时候将会起作⽤。
props部分是我接收到的参数，这个组件时基于前⾯我讲的第⼆种⽅式——⽗组件获取数据分发，data是⽗组件分发给echarts的数据源。
暂时忽略两个Vue⽣命周期钩⼦，后⾯讲
计算属性中设置了两个属性，origin和opt，注意这个origin很重要，通过它我将opt项与复杂的数据解耦，⽆论外⾯的数据怎么换，opt只关⼼origin的值，⽽这个opt在两种数据获取的⽅式中是不⼀样的，使⽤vuex的⽅式，origin将会直接从vuex中获取数据。这样⼀定程度上也实现了组件的复⽤。
opt就是该图表组件的设置项了，这个参数按照官⽹给的配置，⾃⼰搭配即可。
接下来是methods部分，setEchart将会完成对整个图表的初始化，通过this.$refs获取DOM实例，再由echars⽣成实例并绑定在data中的mychart选项。
chartChange是⽤来响应我⾃定义组件的变化的，针对选框的不同将会有不同的显⽰情况。在这⾥是百分⽐和数据的切换
接着是前⾯忽略的⽣命周期部分
mounted⾥使⽤setEchart⽅法，初始化图表组件，⼀定要在这⾥使⽤该⽅法，否则会不到DOM
updated周期⾥是响应参数变化的⽅法，⾸先检测该实例有没有⽣成（单页应⽤因为⽤户可能存在的误操作，很可能导致实例没有⽣成，这⾥检测是很有必要的），接着在vue中的数据发⽣改变时运⾏chartChange⽅法，注意，我的选择框是没有绑定事件的，只是通过v-model改变了参数，然后opt动态响应了参数的变化。当opt的参数变化的时
候，updated中的⽅法就会执⾏，echarts也会动态响应。这个就是使⽤基于数据驱动vue最精巧的地⽅，避免了通过事件调⽤echartChange⽅法。也是vue中使⽤echarts核⼼的⼀环
另外还有⼀个就是获取地图参数的，并不⽤在官⽹⾥下载，提供的npm包⾥就有，按需引⽤就好了（使⽤官⽹的js版本会报错没到echarts）
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/map/js/china.js';
style部分就没什么好聊的了，只需要记住⼀点，必须显式指定加载echarts 的DOM的宽度和⾼度
⽗组件对echarts组件的调⽤
调⽤组件的⽅法按照常规组件调⽤就好了，只是因为echarts加载数据绘制需要耗费不少时间，我们可能需要通过keep-alive保存组件在内存中，避免切出去的时候被释放了。另外可能⼀个页⾯需要展⽰多个echarts类型组件，这⾥考虑使⽤component动态组件
<template>
<div class="focus-echarts-wrap">
<keep-alive>
<component :is="currentView" :index="focusType"></component>
</keep-alive>
</div>
</template>
其他问题
在⽣成柱状图和饼状图的时候，加载时间并不算太慢。只是在加载地图类型的时候，尤其是我在⽣成中国地图的时候，达到了10s+的延迟，并且阻塞的是主线程，这段时间⽤户是⽆法操作的，相当于卡顿的情况。
该数据是在32bit的QQ浏览器上测得的，同事⽤的64bit的⾕歌浏览器会好⼀点。
初步判断是echarts的问题。当然也因为是在dev模式下，可能和我打开了vuex和事件的监测有关。具体的延迟时间我会在线上版本测试，希望情况会好转吧。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。