VUE中如何渲染Echarts動畫柱狀圖
更新時間：2023年03月27日 14:37:29 作者：前端互助會
這篇文章主要介紹了VUE中如何渲染Echarts動畫柱狀圖問題，具有很好的參考價值，希望對大家有所幫助。
柱狀圖
效果圖
安裝Echarts依賴
要在vue中使用Echarts 需要先安裝依賴
npm install echarts --save
這是我的Echarts版本
"echarts": "^4.0.4"
第一步：在template減免 容器dom
<template>
<div class="min-body">
<div style="width:80vw;height: 80vh" id="EchartsAnimate" ref="docement"></div>
</div>
</template>第二步：初始化 Echarts
注意：此處有一方法，是用于適配 Echarts 字體適配大屏的
chartsRelativeSize(percent, derection) {
var windowW = this.$refs.docement.offsetWidth;
var windowH = this.$refs.docement.offsetHeight
var r = 0;
if ('h' === derection) {
r = percent * windowH / 100;
} else {
r = percent * windowW / 100;
}
return r;
},使用：
第三步：請求數(shù)據(jù) 加載柱狀圖動畫
原理：設(shè)置定時器，刪除Echarts 柱狀圖的第一個數(shù)據(jù)的同屬壓入數(shù)組的最后一個
for(var i=0;i<this.echartsData.list.length && i<5;i++){
option.xAxis[0].data.push( that.echartsData.list[i].mc);
option.series[0].data.push( that.echartsData.list[i].sysl);
option.series[1].data.push( that.echartsData.list[i].dysl);
}
myCharts.setOption(option);
if(window.hbfxInterval){
clearInterval(window.hbfxInterval);
}
window.hbfxIndex = 0;
window.hbfxInterval = setInterval(function () {
option.xAxis[0].data.shift();
option.xAxis[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].mc);
option.series[0].data.shift();
option.series[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].sysl);
option.series[1].data.shift();
option.series[1].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].dysl);
myCharts.setOption(option);
window.hbfxIndex ++;
},2000)完整頁面代碼：
<template>
<div class="min-body">
<div style="width:80vw;height: 80vh" id="EchartsAnimate" ref="docement"></div>
</div>
</template>
<script>
export default {
name: "EchasrtsAnimate",
data:function () {
return {
echartsData:{"size":21,"list":[{"dysl":"70","mc":"刑事警情","dm":"01","sysl":"89"},{"dysl":"75","mc":"行政（治安）警情","dm":"02","sysl":"107"},{"dysl":"4","mc":"交通類警情","dm":"03","sysl":"21"},{"dysl":"7","mc":"火災(zāi)事故","dm":"04","sysl":"9"},{"dysl":"43","mc":"群眾求助","dm":"05","sysl":"71"},{"dysl":"5","mc":"舉報投訴","dm":"06","sysl":"10"},{"dysl":"20","mc":"糾紛","dm":"08","sysl":"44"},{"dysl":"1","mc":"災(zāi)害事故","dm":"09","sysl":"1"},{"dysl":"56","mc":"其他行政違法","dm":"10","sysl":"71"},{"dysl":"56","mc":"經(jīng)濟案件類警情","dm":"11","sysl":"65"},{"dysl":"9429","mc":"違法犯罪警情","dm":"20","sysl":"12320"},{"dysl":"25597","mc":"交通警情","dm":"21","sysl":"29575"},{"dysl":"272","mc":"火災(zāi)事故","dm":"22","sysl":"369"},{"dysl":"6040","mc":"群眾求助","dm":"23","sysl":"7307"},{"dysl":"4203","mc":"舉報投訴","dm":"24","sysl":"4983"},{"dysl":"27","mc":"群體事件","dm":"25","sysl":"44"},{"dysl":"9679","mc":"糾紛","dm":"26","sysl":"12396"},{"dysl":"44","mc":"災(zāi)害事故","dm":"27","sysl":"70"},{"dysl":"109","mc":"揚言","dm":"28","sysl":"146"},{"dysl":"17","mc":"警情備案","dm":"30","sysl":"23"},{"dysl":"75","mc":"其他警情","dm":"90","sysl":"69"}]}
}
},
mounted(){
this.loadEchartsAnimate()
},
methods:{
chartsRelativeSize(percent, derection) {
var windowW = this.$refs.docement.offsetWidth;
var windowH = this.$refs.docement.offsetHeight
var r = 0;
if ('h' === derection) {
r = percent * windowH / 100;
} else {
r = percent * windowW / 100;
}
return r;
},
loadEchartsAnimate(){
var that = this
var echarts = require('echarts');
var myCharts = echarts.init(document.getElementById('EchartsAnimate'));
var option = {
color:['#407FFF','#00CCCD'],
tooltip : {
trigger: 'axis',
textStyle:{
color:'#ffffff',
fontSize: this.chartsRelativeSize(0.5, 'r')
},
formatter: function (params) {
var arr = [];
params.forEach(function (item) {
var N=item.seriesName;
var V = '';
if(item.value>100000000){//億
V += (item.value/100000000).toFixed(1) + '億';
}else if( item.value>10000){//萬
V += (item.value/10000).toFixed(1) + '萬';
}else{
V += item.value;
}
var a = {name:N,value:V};
arr.push(a);
});
var num = '';
arr.forEach(function (item) {
num += item.name+":"+item.value+"<br/>";
});
return params[0].name +"<br>"+ num;
}
},
grid: {
left: '25vw',
right: '25vw',
bottom: '9vh',
top:'30vh',
containLabel: true
},
/*dataZoom:[{
show: true,
height: 10,
bottom: 0,
startValue:0,
endValue:4,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '100%',
handleStyle:{color:"#ddd" },
textStyle:{color:"#666666"},
borderColor:"#eee"
}],*/
legend: {
orient: 'horizontal',
top:'0',
x: 'right',
itemWidth:15,
itemHeight:15,
textStyle:{
color:'#fff',
fontSize: this.chartsRelativeSize(0.5, 'r')
},
data:['上月','本月']
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#2E3950',//左邊線的顏色
width: '1'//坐標(biāo)線的寬度
}
},
axisLabel: {
textStyle: {
color: '#fff',//坐標(biāo)值得具體的顏色,
fontSize: this.chartsRelativeSize(0.5, 'r')
},
interval:0
},
axisTick:false,
data: [/*'崇川區(qū)','港閘區(qū)','通州區(qū)','如東縣','海安市','啟東市','海門市','如皋市'*/]
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
type: 'solid',
color: '#2E3950',//左邊線的顏色
width: '1'//坐標(biāo)線的寬度
}
},
axisLabel: {
textStyle: {
color: '#e6e6e6',//坐標(biāo)值得具體的顏色,
fontSize: this.chartsRelativeSize(0.5, 'r')
}
},
axisTick:false,
splitLine: { //坐標(biāo)軸在grid區(qū)域中的分隔線（網(wǎng)格中的橫線）
show: true,
lineStyle: {
color: ['#2E3950'],
width: 1,
type: 'solid',
}
},
splitArea: {//坐標(biāo)軸在grid區(qū)域中的分隔區(qū)域（間隔顯示網(wǎng)格區(qū)域）
interval: 1, //顯示間隔的規(guī)律
show: true,
areaStyle: {//分隔區(qū)域的樣式
color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
}
}
}
],
series : [
{
name:'上月',
type:'bar',
barGap:0,
barWidth:15,
data:[/*15,48,40,32,21,41,38,65*/]
},
{
name:'本月',
type:'bar',
barGap:0,
barWidth:15,
data:[/*43,12,56,67,12,45,41,15*/]
}
]
};
for(var i=0;i<this.echartsData.list.length && i<5;i++){
option.xAxis[0].data.push( that.echartsData.list[i].mc);
option.series[0].data.push( that.echartsData.list[i].sysl);
option.series[1].data.push( that.echartsData.list[i].dysl);
}
myCharts.setOption(option);
if(window.hbfxInterval){
clearInterval(window.hbfxInterval);
}
window.hbfxIndex = 0;
window.hbfxInterval = setInterval(function () {
option.xAxis[0].data.shift();
option.xAxis[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].mc);
option.series[0].data.shift();
option.series[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].sysl);
option.series[1].data.shift();
option.series[1].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].dysl);
myCharts.setOption(option);
window.hbfxIndex ++;
},2000)
}
}
}
</script>
<style scoped>
.min-body{
width: 100%;
height: 100%;
overflow: hidden;
background: #010827;
}
</style>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Vue之插槽(Slot)的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue前端項目發(fā)布的時候,打包可實現(xiàn)gzip格式的壓縮,下面這篇文章主要給大家介紹了關(guān)于Vite打包性能優(yōu)化之開啟Gzip壓縮的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue安裝依賴npm install時的報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
最近項目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細(xì)圖文教程,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了在Vue中實現(xiàn)回車鍵切換焦點的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
vue2實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼
這篇文章主要介紹了vue2實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼,需要的朋友可以參考下2018-08-08
解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動態(tài)更新問題
這篇文章主要介紹了解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動態(tài)更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決VUE項目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題2020-08-08
vue實現(xiàn)下拉框的多選功能(附后端處理參數(shù))
本文介紹了如何使用Vue實現(xiàn)下拉框的多選功能,實現(xiàn)了在選擇框中選擇多個選項的功能,文章詳細(xì)介紹了實現(xiàn)步驟和示例代碼,對于想要了解如何使用Vue實現(xiàn)下拉框多選功能的讀者具有一定的參考價值2023-08-08
vue-cli 自定義指令directive 添加驗證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗證滑塊示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10