今天就跟大家聊聊有關(guān)怎么在vue中實現(xiàn)一個柱狀圖效果,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)建站堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的梅江網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!<!-- 引入echarts --> <script src="/tupian/20230522/h3pre>Vue.prototype.$echarts = window.echarts // 使用時直接使用this.$echarts
<template> <div class="com-container"> <div class="com-chart" ref="sellerRef"></div> </div> </template>
export default { data () { return { // 初始化的圖表 chartInstance: null, allDate: null, // 服務(wù)器返回的數(shù)據(jù) } }, } ```js ##### 5.methods中的邏輯 ```js methods: { // 初始化echarts對象 initEchart(){ // 獲取dom對象 this.chartInstance = this.$echarts.init(this.$refs.sellerRef) }, // 獲取服務(wù)器的數(shù)據(jù) async getData(){ const {data:res} = await this.$http.get('seller') this.allDate = res // 返會的數(shù)據(jù)結(jié)構(gòu)是 name商家 value數(shù)值 // 對返回的數(shù)據(jù)進行從小打到排序 sort方法 this.allDate.sort((a, b) => { return a.value - b.value }) // 調(diào)用更新視方法 this.updateChart() }, // 更新圖表 updateChart(){ // y軸類目軸的數(shù)據(jù) const sellerNames = this.allDate.map(item=>{ // 根據(jù)你的需求調(diào)整 return item.name }) // x軸數(shù)值軸的數(shù)據(jù) const sellerValues = this.allDate.map(item=>{ return item.value }) const option = { xAxis: { type: 'value' }, yAxis: { type: 'category', // y軸坐標(biāo)軸使用遍歷出來的name data: sellerNames }, series: [ { // 類型為柱狀圖 type: 'bar', // x軸數(shù)據(jù)需要設(shè)置在series的data類型為遍歷的value data: sellerValues } ] } // 渲染optio數(shù)據(jù)給dom對象 this.chartInstance.setOption(option) },
// dom加載完成調(diào)用 mounted () { this.initChart() this.getData() },
<!-- 引入主題 --> <script src="./static/lib/theme/chalk.js"></script>
this.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk')
const option = { title: { text: '| 商家銷售統(tǒng)計', textStyle: { fontSize: 66 }, left: 20, top: 20 }, // 坐標(biāo)軸配置 grid: { top: '20%', left: '3%', right: '6%', bottom: '3%', // 距離包含坐標(biāo)軸文字 containLabel: true }, xAxis: { type: 'value' }, yAxis: { type: 'category', // y軸坐標(biāo)軸使用遍歷出來的name data: sellerNames }, series: [ { // 類型為柱狀圖 type: 'bar', // x軸數(shù)據(jù)需要設(shè)置在series的data類型為遍歷的value data: sellerValues, // 柱的寬度 barWidth: 66, // 柱文字 默認(rèn)不展示 label: { show: true, // 文字靠右顯示 position: 'right', textStyle: { // 顏色為白色 color: 'white' } }, // 控制柱的每一項 itemStyle: { // 控制柱的圓角半徑 barBorderRadius: [0, 33, 33, 0], // 線性漸變 // 指定不同百分比的顏色數(shù)值 color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ { // 百分之0的樣式 offset: 0, color: '#5052EE' }, { // 百分之百 offset: 1, color: '#AB6EE5' } ]) } } ], tooltip: { trigger: 'axis', axisPointer: { type: 'line', // 默認(rèn)為直線,可選為:'line' | 'shadow' z: 0, // 背景層級 lineStyle: { width: 66, // 背景寬度 color: '#2D3443' // 背景顏色 } } } } ```
看完上述內(nèi)容,你們對怎么在vue中實現(xiàn)一個柱狀圖效果有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
新聞標(biāo)題:怎么在vue中實現(xiàn)一個柱狀圖效果-創(chuàng)新互聯(lián)
網(wǎng)站地址:http://bm7419.com/article46/ddjghg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護、做網(wǎng)站、小程序開發(fā)、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容