经常会见到小伙伴做出来的柱形图带有动态,闪烁的效果,小编本着好学好问(工作要求)的精神,终于找到了方法。下面就跟小编一起来看如何用echarts实现柱形图的闪烁效果吧。
1.echarts安装
npm install echarts
2.在node_modules中找到echarts依赖包
3.打开src->chart->bar->BarView.js
function updateStyle( el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal, isPolar ) { var color = data.getItemVisual(dataIndex, 'color'); var opacity = data.getItemVisual(dataIndex, 'opacity'); var stroke = data.getVisual('borderColor'); var itemStyleModel = itemModel.getModel('itemStyle'); //声明一个变量 var twinkle = itemModel.getModel('emphasis.itemStyle.twinkle'); var hoverStyle = itemModel.getModel('emphasis.itemStyle').getBarItemStyle(); if (!isPolar) { el.setShape('r', itemStyleModel.get('barBorderRadius') || 0); } el.useStyle(zrUtil.defaults( { stroke: isZeroOnPolar(layout) ? 'none' : stroke, fill: isZeroOnPolar(layout) ? 'none' : color, opacity: opacity }, itemStyleModel.getBarItemStyle() )); var cursorStyle = itemModel.getShallow('cursor'); cursorStyle && el.attr('cursor', cursorStyle); var labelPositionOutside = isHorizontal ? (layout.height > 0 ? 'bottom' : 'top') : (layout.width > 0 ? 'left' : 'right'); if (!isPolar) { setLabel( el.style, hoverStyle, itemModel, color, seriesModel, dataIndex, labelPositionOutside ); } if (isZeroOnPolar(layout)) { hoverStyle.fill = hoverStyle.stroke = 'none'; } //使用动画animate函数,用js传参控制柱状图特效 if(twinkle){ el.animate('style', true) when(500, { borderWidth:10, borderColor:"red", barBorderRadius:5, lineWidth:7.5, opacity:0.4 }) .when(1500, { lineWidth:0, borderColor:"red", barBorderRadius:5, opacity:0.25 }) .start(); } graphic.setHoverStyle(el, hoverStyle); }
4.打开lib->chart->bar->BarView.js,做跟上面一样的修改
5.components/echarts/bar.vue文件:
<template> <div style="height:500px" ref="echart" id="bar">柱状图</div> </template> <script> export default { name: "bar", data() { return { option: null }; }, methods: { draw() { let myChart = this.$echarts.init(document.getElementById("bar")); this.option = { title: { text: "成交量", left: 10 }, xAxis: { type: "category", data: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "151", "16", "17", "18", "19", "20" ] }, yAxis: { type: "value", min: 0, max: 100, splitNumber: 2 }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: "bar", itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: "rgba(159,230,184,0.7)" }, { offset: 0.5, color: "rgb(141,193,169)" }, { offset: 1, color: "rgb(115,163,115)" } ]), barBorderRadius: 5 }, label: { show: true, position: "top", textStyle: { color: "black", fontSize: 16 } }, emphasis: { itemStyle: { //颜色渐变函数LinearGradient,4和参数分别表示四个位置依次为左、下、右、上 color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: "rgba(221,107,102,0.7)" }, { offset: 0.8, color: "rgb(238,64,61)" }, { offset: 1, color: "rgb(186,39,38)" } ]), barBorderRadius: 5, borderColor: new this.$echarts.graphic.LinearGradient( 0, 0, 1, 1, [ { offset: 0, color: "rgba(221,107,102,0.7)" }, { offset: 0.8, color: "rgb(238,64,61)" }, { offset: 1, color: "rgb(186,39,38)" } ] ), borderWidth: 3, lineWidth: 2, twinkle: { //闪烁 enabled: true, //启用 period: 2000 //动画时间 } }, label: { show: true } } } ] }; let _self = this; setInterval(function() { _self.option.series[0].data = _self.$options.methods.getArrRandomly(20); console.log(_self.option.series[0].data); _self.option.series[0].data.forEach((item, curidx) => { //取消之前的高亮 myChart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: curidx }); if (item > 50) { myChart.dispatchAction({ type: "highlight", dataIndex: curidx }); } }); myChart.setOption(_self.option, true); }, 2000); window.addEventListener("resize", function() { myChart.resize(); }); }, getArrRandomly(len) { let arr = []; for (let i = len - 1; i >= 0; i--) { let itemIndex = Math.floor(Math.random() * 100); arr[i] = itemIndex; } return arr; } }, mounted() { this.draw(); } }; </script> <style scoped></style>来看一下最后的效果:
怎么样,是不是效果很酷炫,动态效果的柱形图更能吸引人的眼球,大家一起用echarts实际操作一下吧!
数据分析咨询请扫描二维码
CDA数据分析师在中国航信高科技产业园进行了面向测试度量的数据分析培训课程,培训人数近2 ...
2024-05-01CDA数据分析师走进深圳迈瑞生物医疗电子股份有限公司,在迈瑞总部展开了为期两天的培训,本次课程参训人员线上及线下近百人, ...
2024-05-01CDA数据分析师在合肥市对合肥阳光新能源科技有限公司开展了为期8天的企业内训。 合肥阳光新能源科技 ...
2024-05-01CDA数据分析师走进海尔大学,进行了《数据治理与数据中台建设的道与术》专题培训,培训现场爆满,近百人参加了此次培训。 ...
2024-05-01在中国银行苏州分行培训中心开始数据分析师培训,此次培训课程共10天内容,包括Excel、MySQL、概率论与数理统计、SPSS等内容, ...
2024-05-01从实际的业务需求出发,结合行业的典型应用特点,围绕实际的商业问题,探讨数据挖掘、机器学习模型在金融领域的应用,包括获客、信用评分、细分画像、交叉销售、反欺诈、违规识别、时序预测、运筹优化、流程挖掘九个方面,形成 ...
2024-05-01本次培训课程为线上+线下的模式,由于学员编程能力不一、部分学员没有编程基础,故提供统计学、python基 ...
2024-05-01华夏银行信用卡中心-机器学习培训 1、课程亮点 取材于业界一流企业和顶级咨询公司的行业实践;已经被证明是人人 ...
2024-05-01主 题:数据中台建设及数据分析应用主题分享 1. 数据中台市场洞察 2. 主流数据中台产品比较 3. 某企业数据中 ...
2024-05-01围绕“数据驱动”战略,全力打造我行 300 人数字化人才梯队,着力培养数字化管理人才、大数据专业团队 ...
2024-05-01在当今数据驱动的商业环境中,数据分析成为了企业决策的重要依据。通过对大量数据的收集、处理和分析,企业能够更好地理解市场 ...
2024-04-29在人工智能(AI)的世界里,提示词(Prompt)是一种强大的工具,它能够引导AI按照用户的需求产生特定的输出。本文将深入探讨AI ...
2024-04-29CDA立足未来职场,拓展前沿视野——对外经贸大学保险学院举办“三全育人大讲堂”分享行业最新动态。 ...
2024-04-294月2日,CDA数据分析师创始发起人兼协会理事长赵坚毅博士受邀在浙江万里学院举办了一场以“数字化能力在职场中的作用” ...
2024-04-29随机森林(Random Forests)现在机器学习中比较火的一个算法,是一种基于Bagging的集成学习方法,能够很好地处理分类和回归的问 ...
2022-12-23方差分析是数据分析中常用的一种统计分析方法,接下来让我们简单了解一下方差分析的基本思想和原理吧。 方差分析(Analysis ...
2022-12-23来源:关于数据分析与可视化 关于streamlit-aggrid 数据排序 表格样式的调整 数据 ...
2022-08-03作者:麦叔 定义 「把上面晦涩的概念汇成一句话就是:」 ❝ 回调函数就是一个被作为参 ...
2022-08-03现今,高学历人群日益增多,物以稀为贵的高学历光环淡去。无论本科生还是研究生,甚至博士生,求职竞争力都大不如前,就业压力越来越大。
2022-06-01某家企业10个人面试,有9个本科生……如何脱颖而出,除得体的举止和良好的沟通力外,证书成重要筹码,这也是很多人考证的关键所在。
2022-04-14