Copyright © 2015-2021,
www.cda.cn
All Rights Reserved. CDA数据分析师(北京国富如荷网络科技有限公司) 版权所有
京ICP备11001960号-9
京公网安备 11010802034615号
经营许可证编号:京B2-20210330

联系电话:13321103290 (微信同号)
2020-08-11
经常会见到小伙伴做出来的柱形图带有动态,闪烁的效果,小编本着好学好问(工作要求)的精神,终于找到了方法。下面就跟小编一起来看如何用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实际操作一下吧!
完 谢谢观看
上一篇: sparkSQL是什么,如何理解? 下一篇: 不懂如何绘制堆积折线图?别慌,用教 ...