Vue+Echart柱狀圖實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計(jì)
四步走四步走,要是直接跳到最后的話,記得有些依賴和環(huán)境配置一下哦。
1.首先在項(xiàng)目中安裝echarts
1.安裝echarts依賴包
npm install echarts --save
2.在plugins目錄下創(chuàng)建echarts.js文件并在里面引入echarts依賴包
import Vue from 'vue' import echarts from 'echarts'//這個(gè)需要注意一下有可能會報(bào)錯(cuò),可以用下面方法 Vue.prototype.$echarts = echarts
用以上通用的方法,可能會出現(xiàn)以下報(bào)錯(cuò),“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
是因?yàn)镋charts 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'] //我只寫了要加這個(gè),不代表這里只有這個(gè) //還可以用'@/plugins/echarts'形式,都差不多的
2.在echarts引入柱形圖模板
(這里是一步步寫下來的,要是不想看可以直接跳到最后有最終代碼哦)
在項(xiàng)目中的代碼表示:
<template> <div id="echarts"> <div id="myChart"></div> </div> </template> <script type="text/javascript"> export default { name: "Echarts", data() { return {}; }, methods: { echartsInit() { //定義一個(gè)創(chuàng)建圖表的方法 let myChart = this.$echarts.init(document.getElementById("myChart")); myChart.setOption({ title: { text: "echarts的柱狀圖來實(shí)現(xiàn)疫情統(tǒng)計(jì)", textAlign: "auto", left: 'center' }, tooltip: {}, // 省份(橫坐標(biāo)) xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //data: this.areaName, //這是最后的數(shù)據(jù)表示開始測試可以先不用這個(gè) type: "category", axisLabel: { rotate: -45, // 旋轉(zhuǎn)30度,不然橫坐標(biāo)顯示不完全 show: true, //這行代碼控制著坐標(biāo)軸x軸的文字是否顯示 }, }, yAxis: {}, // 確診數(shù)量 series: [ { name: "總確診數(shù)量", type: "bar", //data: this.areaConfirm,//這是最后的數(shù)據(jù)表示開始測試可以先不用這個(gè) data: [120, 200, 150, 80, 70, 110, 130], }, ], }); }, } //mounted在模板渲染成html后調(diào)用,通常是初始化頁面完成后 //再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作 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點(diǎn)擊查看
我們可以看到一大堆數(shù)據(jù),那么我們要對數(shù)據(jù)進(jìn)行清理和拆分才能獲取我們所需要的數(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',//這個(gè)網(wǎng)站是開源的可以請求到數(shù)據(jù)的 pathRewrite: { '^/api/': '/', changeOrigin: true } } }, }
3.對接口數(shù)據(jù)進(jìn)行處理
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的柱狀圖來實(shí)現(xiàn)疫情統(tǒng)計(jì)",
textAlign: "auto",
left: 'center'
},
tooltip: {},
// 省份
xAxis: {
data: this.areaName,
type: "category",
axisLabel: {
rotate: -45, // 旋轉(zhuǎn)30度
show: true, //這行代碼控制著坐標(biāo)軸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>
到此這篇關(guān)于Vue+Echart柱狀圖實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計(jì)的文章就介紹到這了,更多相關(guān)Vue Echart柱狀圖 數(shù)據(jù)統(tǒng)計(jì)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目中ESLint配置超全指南(VScode)
ESLint是一個(gè)代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESLint配置(VScode)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04vue項(xiàng)目或網(wǎng)頁上實(shí)現(xiàn)文字轉(zhuǎn)換成語音播放功能
這篇文章主要介紹了在vue項(xiàng)目或網(wǎng)頁上實(shí)現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下2020-06-06Django+Vue.js搭建前后端分離項(xiàng)目的示例
本篇文章主要介紹了Django+Vue.js搭建前后端分離項(xiàng)目的示例,具有一定參考價(jià)值,有興趣的可以了解一下2017-08-08Vue如何實(shí)現(xiàn)分頁功能代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue如何實(shí)現(xiàn)分頁功能的相關(guān)資料,Vue分頁功能的實(shí)現(xiàn)需要前端和后端共同配合完成,文中通過代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09vue-calendar-component日歷組件報(bào)錯(cuò)Clock is not defi
這篇文章主要為大家介紹了vue-calendar-component日歷組件報(bào)錯(cuò)Clock is not defined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11vue + el-tree 實(shí)現(xiàn)插入節(jié)點(diǎn)自定義名稱數(shù)據(jù)的代碼
這篇文章主要介紹了vue + el-tree 實(shí)現(xiàn)插入節(jié)點(diǎn)自定義名稱數(shù)據(jù)的代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12