Vue?Echarts實現(xiàn)帶滾動效果的柱形圖
更新時間：2022年04月02日 18:08:35 作者：今天代碼敲了嗎
這篇文章主要為大家詳細介紹了Vue?Echarts實現(xiàn)帶滾動效果的柱形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue Echarts實現(xiàn)帶滾動效果柱形圖的具體代碼，供大家參考，具體內(nèi)容如下
代碼
<template>
? <div class="timeLineview">
? ? <div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div>
? ? <div v-bind:style="{ height: noHeight + 'px' }" class="nomore">
? ? ? {{ noData }}
? ? </div>
? </div>
</template>
<script>
import echarts from "echarts";
export default {
? components: {},
? name: "timeLine",
? props: {
? ? question: {}
? },
? data() {
? ? return {
? ? ? datainfo: [],
? ? ? datatitle: [],
? ? ? chart: null,
? ? ? heightData: 300,
? ? ? noHeight: 0,
? ? ? noData: ""
? ? };
? },
? methods: {
? ? resize() {
? ? ? this.chart.resize();
? ? },
? ? find() {
? ? //獲取數(shù)據(jù)
? ? ? if (this.question) {
? ? ? ? for (let index = 0; index < this.question.length; index++) {
? ? ? ? ? if (this.question[index].statValue > 0) {
? ? ? ? ? //y軸
? ? ? ? ? ? this.datainfo.push(this.question[index].statValue);
? ? ? ? ? ? //X軸
? ? ? ? ? ? this.datatitle.push(this.question[index].statLabel);
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? this.chart = echarts.init(this.$refs.categoryChart);
? ? ? const option = {
? ? ? ? tooltip: {
? ? ? ? ? trigger: "axis",
? ? ? ? ? axisPointer: {
? ? ? ? ? ? type: "shadow"
? ? ? ? ? }
? ? ? ? },
? ? ? ? title: {},
? ? ? ? legend: {},
? ? ? ? dataZoom: [
? ? ? ? ? {
? ? ? ? ? ? type: "slider",
? ? ? ? ? ? start: 0,
? ? ? ? ? ? end: (100 / this.datainfo.length) * 5 ? //顯示五個
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? type: "inside",
? ? ? ? ? ? start: 0,
? ? ? ? ? ? end: (100 / this.datainfo.length) * 5//顯示五個
? ? ? ? ? }
? ? ? ? ],
? ? ? ? xAxis: {
? ? ? ? ? data: this.datatitle
? ? ? ? },
? ? ? ? yAxis: { minInterval: 1 }, ? //顯示為整數(shù) 最小間距1
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? name: "數(shù)量",
? ? ? ? ? ? data: this.datainfo,
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? color: "#77bef7"
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ]
? ? ? };
? ? ? this.chart.setOption(option);
? ? ? if (this.datainfo.length > 0) {
? ? ? ? this.heightData = 300;
? ? ? } else {
? ? ? ? this.heightData = 0;
? ? ? ? this.noHeight = 300;
? ? ? ? this.noData = "暫無數(shù)據(jù)";
? ? ? }
? ? }
? },
? mounted() {
? ? this.find();
? },
? created() {}
};
</script>
<style ?lang="less" scoped>
.nomore {
? display: flex;
? justify-content: center;
? align-items: center;
? font-size: 18px;
}
</style>效果圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了.env在mode文件中如何添加注釋詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue3-HTTP請求方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue Render函數(shù)創(chuàng)建DOM節(jié)點代碼實例
這篇文章主要介紹了Vue Render函數(shù)創(chuàng)建DOM節(jié)點代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
Vue使用electron轉(zhuǎn)換項目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測試)
這篇文章主要介紹了vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測試),文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-05-05
淺談Vue CLI 3結(jié)合Lerna進行UI框架設(shè)計
這篇文章主要介紹了淺談Vue CLI 3結(jié)合Lerna進行UI框架設(shè)計,在此之前先簡單介紹一下Element的構(gòu)建流程，以便對比新的UI框架設(shè)計。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
Vue.js中,computed屬性根據(jù)依賴進行緩存,只有依賴改變時才重新計算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動更新,并且默認是只讀的,它與methods的主要區(qū)別在于計算屬性具有緩存性,而方法每次調(diào)用都會執(zhí)行,使用computed可以使模板更加簡潔,提高應(yīng)用性能2024-09-09
本篇文章主要介紹了詳解Vue-cli 創(chuàng)建的項目如何跨域請求 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Vue 實現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式
這篇文章主要介紹了Vue 實現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue 動態(tài)創(chuàng)建組件的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12