修改Echarts源码实现柱状图的炫彩闪烁效果

本次工作需要使用Echarts设计大屏展示，考虑到风险告警功能要对超过阈值的数据标记高亮，同时加强提醒，需要对柱状图的高亮做出一些修改。

查阅资料，有博主已经做出了我想实现的效果，如下图所示，附上原博客地址。

但是该博主的代码还有一部分没有写出来，直接使用是有点问题的。经历一个小时的百度，终于发现问题所在。

对Echarts源码进行修改时，不仅需要修改src下的js文件，还需要修改lib下的文件（灵感来源于Echarts源码修改这篇博客

最终实现的效果如下：

超过50的数值标红闪烁进行告警

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源码实现柱状图的炫彩闪烁效果相关推荐

ECharts 源码解读二
2021SC@SDUSC 源码结构和打包源码使用webpack打包,查看文件webpack.config.js可知,将echarts源码编译成三个版本,分别为常用版本,精简版本,完整版本,分别对应w ...
【Android 逆向】整体加固脱壳 ( 脱壳点简介 | 修改系统源码进行脱壳 )
文章目录一.脱壳点简介二.修改系统源码进行脱壳一.脱壳点简介在上一篇博客 [Android 逆向]整体加固脱壳 ( DEX 优化流程分析 | DexPrepare.cpp 中 rewriteD ...
uboot修改linux源码中参数,将自定义参数从uboot传入kernel的并读取的方法【转】
希望朋友们多多指点,好的技术或心得一起分享: uboot向kernel传参机制以及kernel如何解析cmdline参数大家可以参考其他前辈的博文,这方面的讲解十分详尽. 在这里我总结以下自己在ubo ...
openwrt patch文件怎么用_openwrt 打补丁方式修改内核源码
写在前面: openwrt中内核代码是存放在dl文件夹下的压缩包中的,编译代码时会将源码解压缩出来并打上已存在的内核补丁,然后才进行编译,所以直接在编译目录中修改代码或者直接修改压缩包中的代码都是不合 ...
echarts源码打包_Echarts源码阅读指南
前言由于echarts是基于zrender进行实现的,所以要解读echarts源码,首先要对zrender有大致的了解,在这篇文章中,我将对zrender的整体结构进行大致的解读. 介绍 zrend ...
修改marathon源码后，如何编译，部署到集群中？
首先,marathon源码是由scala语言编写,由sbt进行项目构建的:与spark不同,spark是由maven进行项目构建: 方案一:使用intellij idea导入marathon源码[目前 ...
修改gh-ost源码实现两表在线高速复制
修改gh-ost源码实现两表在线高速复制一.问题起源笔者所在的公司的需要对核心业务表tb_doc 进行表分区,目前该表的记录数为190,522,155. 由于该表没有分区,新增分区需要创建影子表, ...
WINCC的SQL应用，无需修改任何源码
WINCC的SQL应用,无需修改任何源码配方报表,vbs应用,配方应用学习利器,可供有需要学习的朋友学习, 源码公开, 配合SQLSERVER使用 ID:69188643995731856
修改Chromium源码实现HEVC/H.265 4K视频播放
本文作者:蔡斯杰,字节跳动互娱前端业务负责人公司内容生产端最近(2019/10)在推广 HEVC/H.265 的使用,这种视频编码格式对比H.264更加先进且节省带宽,虽然先进但是因为专利费的问题, ...

修改Echarts源码实现柱状图的炫彩闪烁效果

修改Echarts源码实现柱状图的炫彩闪烁效果相关推荐

最新文章

热门文章