Vue+Echart柱狀圖實現(xiàn)疫情數(shù)據(jù)統(tǒng)計
更新時間：2021年12月30日 11:22:13 作者：蛋蛋要努力變強
這篇文章主要介紹了在Vue nuxt項目中，如何使用Echart(百度圖表)柱狀圖來實現(xiàn)疫情數(shù)據(jù)統(tǒng)計，感興趣的小伙伴可以跟隨小編一起學習一下
四步走四步走，要是直接跳到最后的話，記得有些依賴和環(huán)境配置一下哦。
1.首先在項目中安裝echarts
1.安裝echarts依賴包
npm install echarts --save
2.在plugins目錄下創(chuàng)建echarts.js文件并在里面引入echarts依賴包
import Vue from 'vue' import echarts from 'echarts'//這個需要注意一下有可能會報錯，可以用下面方法 Vue.prototype.$echarts = echarts
用以上通用的方法，可能會出現(xiàn)以下報錯，“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
是因為Echarts 5.x 不再支持上面的引入方式，詳情可以查看Echarts官網(wǎng)
總而言之就是改為以下：
import Vue from 'vue' import * as echarts from 'echarts' //區(qū)別在這里 Vue.prototype.$echarts = echarts
3.在nuxt.config.js配置文件中引入我們剛剛創(chuàng)建的echart.js
plugins: ['~plugins/echarts'] //我只寫了要加這個，不代表這里只有這個 //還可以用'@/plugins/echarts'形式，都差不多的
2.在echarts引入柱形圖模板
（這里是一步步寫下來的，要是不想看可以直接跳到最后有最終代碼哦）
在項目中的代碼表示：
<template>
<div id="echarts">
<div id="myChart"></div>
</div>
</template>
<script type="text/javascript">
export default {
name: "Echarts",
data() {
return {};
},
methods: {
echartsInit() { //定義一個創(chuàng)建圖表的方法
let myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.setOption({
title: {
text: "echarts的柱狀圖來實現(xiàn)疫情統(tǒng)計",
textAlign: "auto",
left: 'center'
},
tooltip: {},
// 省份（橫坐標）
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//data: this.areaName, //這是最后的數(shù)據(jù)表示開始測試可以先不用這個
type: "category",
axisLabel: {
rotate: -45, // 旋轉30度，不然橫坐標顯示不完全
show: true, //這行代碼控制著坐標軸x軸的文字是否顯示
},
},
yAxis: {},
// 確診數(shù)量
series: [
{
name: "總確診數(shù)量",
type: "bar",
//data: this.areaConfirm,//這是最后的數(shù)據(jù)表示開始測試可以先不用這個
data: [120, 200, 150, 80, 70, 110, 130],
},
],
});
},
}
//mounted在模板渲染成html后調(diào)用，通常是初始化頁面完成后
//再對html的dom節(jié)點進行一些需要的操作
mounted() {
this.echartsInit();
},
}
</script>
<style scoped>
#myChart {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
3.通過API引入數(shù)據(jù)
我用的騰訊提供的接口地址：https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5點擊查看
我們可以看到一大堆數(shù)據(jù)，那么我們要對數(shù)據(jù)進行清理和拆分才能獲取我們所需要的數(shù)據(jù)
1.首先我們要解決跨域問題
npm install axios @nuxtjs/axios @nuxtjs/proxy
2.安裝完成后在 nuxt.config.js 文件里面添加以下配置：
module.exports = {
//我顯示了要增加的部分，不是全部哦
modules: ["@nuxtjs/axios"],
axios: {
proxy: true
},
proxy: {
'/api/': {
target: 'https://view.inews.qq.com',//這個網(wǎng)站是開源的可以請求到數(shù)據(jù)的
pathRewrite: {
'^/api/': '/',
changeOrigin: true
}
}
},
}
3.對接口數(shù)據(jù)進行處理
getData() {
this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
//console.log(JSON.parse(data.data.replace('\\"', "'")));
this.area = JSON.parse(
data.data.replace('\\"', "'")
).areaTree[0].children;
// 地區(qū)名
this.areaName = this.area.map((o) => {
return o.name;
});
// 總確診人數(shù)
this.areaConfirm = this.area.map((o) => {
return o.total.confirm;
});
console.log(this.areaConfirm);
// 目前確診人數(shù) hh 好像最后我沒用，如果有需要可以參考一下
this.areaNowConfirm = this.area.map((o) => {
return o.total.nowConfirm;
});
this.echartsInit();
});
},
?處理完的數(shù)據(jù)可以清晰的看出： 要什么取什么就行了
4.整合代碼
嚯嚯，終于完了，貼上我的代碼
<template>
<div id="echarts">
<div id="myChart"></div>
</div>
</template>
<script type="text/javascript">
export default {
name: "Echarts",
data() {
return {
area: [],
areaName: [],
areaConfirm: [],
areaNowConfirm: [],
};
},
methods: {
getData() {
this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
console.log(JSON.parse(data.data.replace('\\"', "'")));
this.area = JSON.parse(
data.data.replace('\\"', "'")
).areaTree[0].children;
// 地區(qū)名
this.areaName = this.area.map((o) => {
return o.name;
});
// 總確診人數(shù)
this.areaConfirm = this.area.map((o) => {
return o.total.confirm;
});
console.log(this.areaConfirm);
// 目前確診人數(shù)
this.areaNowConfirm = this.area.map((o) => {
return o.total.nowConfirm;
});
this.echartsInit();
});
},
echartsInit() {
let myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.setOption({
title: {
text: "echarts的柱狀圖來實現(xiàn)疫情統(tǒng)計",
textAlign: "auto",
left: 'center'
},
tooltip: {},
// 省份
xAxis: {
data: this.areaName,
type: "category",
axisLabel: {
rotate: -45, // 旋轉30度
show: true, //這行代碼控制著坐標軸x軸的文字是否顯示
},
},
yAxis: {},
// 確診數(shù)量
series: [
{
name: "總確診數(shù)量",
type: "bar",
data: this.areaConfirm,
},
],
});
},
},
mounted() {
this.getData();
this.echartsInit();
},
};
</script>
<style scoped>
#myChart {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
到此這篇關于Vue+Echart柱狀圖實現(xiàn)疫情數(shù)據(jù)統(tǒng)計的文章就介紹到這了,更多相關Vue Echart柱狀圖 數(shù)據(jù)統(tǒng)計內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決
這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
系統(tǒng)頂部展示一個橫向滾動的消息通知,就是消息內(nèi)容從右往左一直滾動,這篇文章主要介紹了vue頂部消息橫向滾動通知,需要的朋友可以參考下2024-02-02
數(shù)獨是源自18世紀瑞士的一種數(shù)學游戲，是一種運用紙、筆進行演算的邏輯游戲。下面這篇文章主要給大家介紹了關于利用vue開發(fā)一個所謂的數(shù)獨的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-12-12
vue結合g6實現(xiàn)樹級結構(compactBox?緊湊樹)
本文主要介紹了vue結合g6實現(xiàn)樹級結構，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了詳解vue3中組件的非兼容變更，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
Element-UI組件實現(xiàn)面包屑導航欄的示例代碼
面包屑導航欄是一種用戶界面組件,用于展示用戶在網(wǎng)站或應用中的路徑,它包括了從主頁到當前頁面的鏈接序列,有助于用戶快速了解和導航至上級頁面,本文就來介紹一下Element-UI組件實現(xiàn)面包屑導航欄的示例代碼,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了詳解vue-loader在項目中是如何配置的，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue實現(xiàn)圖書管理，分享了圖書管理demo用的知識點，以及遇到問題的總結，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。2020-03-03
這篇文章主要為大家介紹了Vue3之列表動畫和狀態(tài)動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04