Products
GG网络技术分享 2025-03-18 16:14 1
ECharts是由百度基于html5 Canvas打造的数据可视化图表，使用 JavaScript 实现的开源可视化库。提供了直观，生动，可交互，可高度个性化定制的数据可视化图表，赋予了用户对数据进行挖掘、整合的能力。ECharts支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题、详情、气泡、图例、值域、数据区域、时间轴、工具箱等可交互组件，丰富了图表的展现形式并增强了用户体验。
在Vue中使用ECharts可以直接通过npm来安装echarts及依赖包，添加--save或者-S参数将其添加到package.json配置文件中。当前最新版为echarts4.9.0，3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的。如果遇到无法下载或者下载很慢的话建议使用国内的淘宝镜像，不懂的可以参考文章：【Vue实战059：NPM配置国内镜像源及使用 】。
安装ECharts之后我们就可以在main.js中引入该组件了，并通过vue.prototype来注册全局组件，这样就可以在整个项目中使用ECharts了。
新建一个Echarts.vue组件，在组件中定义一个div来承载Echarts图表。通过ref、id或class任一属性定义一个标签来挂载echarts元素，通过echarts的setOption属性我们可以为该图表来赋值。setOption可以定义标题、详情、气泡、图例、值域、数据区域、时间轴等等信息，具体内容可以根据你要显示的图表来决定。最后在mounted生命周期函数中实例化该echarts对象，就可以将echarts挂载到页面中了。
全局引入ECharts非常的方便，但是该方式会加载ECharts所有图表和组件，build时也会将所有的echarts图表打包导致体积过大直接影响运行效率。如果我们用到的图表不多完全没必要全局引入，可以在需求的组件中按需引入ECharts。比如我们上面显示的柱状图，我们完全可以直接引入echarts中的bar组件来实现。
通过上面的元素创建并配置，成功将ECharts挂载到了div元素中。我们在前端就可以看到如下的显示效果，显示的图表类型在option中通过series中的type指定为bar（柱状图）。
在ECharts中有很多的参数选项，很容易搞混淆。最简单的方式就是进入ECharts官网，在官网中找到你想要的ECharts模板。在模板的左侧就会提供该示例的option参数设置，我们可以对照右图中的显示效果修改好之后直接复制到我们的项目中来。
ECharts几乎涵盖各行业图表，基本上可以满足开发中的各种需求。随着大数据的到来，可视化图表备受青睐！学会ECharts还是很有必要的哦，以上内容是小编给大家分享的【Vue实战090：Vue使用ECharts图表详解】。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
为了方便学习，下面附上本文用到的源码：
> npm install echarts --save
**********省略*************
+ echarts@4.9.0
added 2 packages in 19.44s
---------------------------------------------------------------
//main.js文件
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts //注册echarts组件
<template>
<div class="home">
<div ref="echarts" :style="{width: '400px', height: '400px'}" ></div>
</div>
</template>
<script>
export default {
name: 'echarts',
methods: {
drawLine () {
let dom = this.$refs.echarts
this.$echarts.init(dom).setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
},
mounted () {
this.drawLine()
}
}
-------------------------------------------------------------------
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')在 VUE 项目中，为了使 echart 在窗口变化时能够自适应，要用到 window.resize = function(){ .......};
但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ，在里面再次使用 会覆盖掉原来的，所以在里面图表使用时可以用
| window.addEventListener(\'resize\',this.resizeFu,false); |
resixeFu 就是图表变化时的方法
| resizeFu(){ let div = document.getElementById(\'changeData\'); if(div && this.changeData.DataTime.length>0){ this.chartsDiv.changeData.resize(); } } |
但里面有一个问题就是：每次进来当前页面都会执行 window.addEventListener
解决方法是在路由勾子函数中把它给去掉，方法是
| beforeRouteLeave(to, from, next) { //页面走掉把事件给清除掉 window.removeEventListener(\"resize\", this.resizeFu,false); next() }, |
补充知识：vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize
开发中用到了echart图表，需要图表自适应大小resize,一开始使用的方法是：
| window.onresize = function () { this.myChart.resize(); }; |
但是又遇到一个问题，点击侧边栏的展开收起的时候，图表的大小没有自适应（因为窗口的大小没有变化）
这里参考vue+element+admin的框架写的自适应
一、index.vue的文件
引入chart图表``
这里是数据
| chartData: { title: { text: \'3-1(2)\', textStyle: { color: \'#979797\', fontSize: 14 } }, tooltip: { trigger: \'axis\' }, legend: { icon: \'rect\', itemWidth: 4, // 图例标记的图形宽度 itemHeight: 11, textStyle: { lineHeight: 65, fontSize: 14 }, data: [\'邮件营销\', \'联盟广告\', \'视频广告\', \'直接访问\', \'搜索引擎\'] }, grid: { left: \'3%\', right: \'4%\', bottom: \'3%\', containLabel: true }, xAxis: { type: \'category\', boundaryGap: false, data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\'] }, yAxis: { type: \'value\' }, series: [ { name: \'邮件营销\', type: \'line\', stack: \'总量\', data: [0, 132, 101, 134, 90, 230, 210] }, { name: \'联盟广告\', type: \'line\', stack: \'总量\', data: [220, 12, 191, 234, 20, 330, 10] }, { name: \'视频广告\', type: \'line\', stack: \'总量\', data: [15, 232, 201, 154, 190, 330, 110] }, { name: \'直接访问\', type: \'line\', stack: \'总量\', data: [320, 420, 301, 334, 60, 330, 320] }, { name: \'搜索引擎\', type: \'line\', stack: \'总量\', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] } |
二、chart.vue
| <template> <div :class=\"className\" :style=\"{height:height,width:width}\" /> </template> <script> import echarts from \'echarts\' import resize from \'./mixins/resize\' export default { mixins: [resize], props: { className: { type: String, default: \'chart\' }, width: { type: String, default: \'100%\' }, height: { type: String, default: \'300px\' }, autoResize: { type: Boolean, default: true }, chartData: { type: Object, required: true } }, data() { return { chart: null } }, watch: { chartData: { deep: true, handler(val) { this.setOptions(val) } } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, \'macarons\') this.setOptions(this.chartData) }, setOptions(chartData) { this.chart.setOption(chartData) } } } </script> |
三、resize.js
| import { debounce } from \'./debounce\' export default { data() { return { $_sidebarElm: null } }, mounted() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, beforeDestroy() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, // to fixed bug when cached by keep-alive // https://github.com/PanJiaChen/vue-element-admin/issues/2116 activated() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, deactivated() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, methods: { // use $_ for mixins properties // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential $_resizeHandler() { return debounce(() => { if (this.chart) { this.chart.resize() } }, 100)() }, $_initResizeEvent() { window.addEventListener(\'resize\', this.$_resizeHandler) }, $_destroyResizeEvent() { window.removeEventListener(\'resize\', this.$_resizeHandler) }, $_sidebarResizeHandler(e) { if (e.propertyName === \'width\') { this.$_resizeHandler() } }, $_initSidebarResizeEvent() { this.$_sidebarElm = document.getElementsByClassName(\'sidebar-container\')[0] this.$_sidebarElm && this.$_sidebarElm.addEventListener(\'transitionend\', this.$_sidebarResizeHandler) }, $_destroySidebarResizeEvent() { this.$_sidebarElm && this.$_sidebarElm.removeEventListener(\'transitionend\', this.$_sidebarResizeHandler) } } } |
四、debounce.js
| /** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */ export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } } return function(...args) { context = this timestamp = +new Date() const callNow = immediate && !timeout // 如果延时不存在，重新设定延时 if (!timeout) timeout = setTimeout(later, wait) if (callNow) { result = func.apply(context, args) context = args = null } return result } } |
以上这篇VUE 单页面使用 echart 窗口变化时的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
Demand feedback
