您好,登錄后才能下訂單哦!
這篇文章主要講解了“怎么用vue3.0+echarts實(shí)現(xiàn)立體柱圖”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“怎么用vue3.0+echarts實(shí)現(xiàn)立體柱圖”吧!
vue3.0實(shí)現(xiàn)echarts立體柱圖
1、安裝echarts
cnpm i --save echarts
2、頁(yè)面定義容器
<template> <div ref="echart" class="echartDiv"></div> </template>
3、js中引入echarts
import * as echarts from 'echarts';
<template> <div ref="echart" class="echartDiv"></div> </template> <script> import * as echarts from 'echarts'; import { onMounted,toRefs, ref,reactive } from 'vue'; export default { setup(){ let state = reactive({ xAxisData:['浩星','妍仔','哆啦a夢(mèng)','李強(qiáng)','王穎','老王'], yAxisData:[4,22,1,11,23,11], yAxisData1:[1,1,1,1,1,1], echart: ref(), }) const echartInit = () =>{ var myChart = echarts.init(state.echart); // 指定圖表的配置項(xiàng)和數(shù)據(jù) var option = { tooltip: { trigger: "axis", axisPointer: { type: "shadow", // 默認(rèn)為直線,可選為:'line' | 'shadow' }, formatter: function(parms) { var str = parms[0].axisValue + "</br>" + parms[0].marker + "今天登錄:" + parms[0].value + '次' return str; }, }, textStyle: { color: "#333", }, color: ["#7BA9FA", "#4690FA"], grid: { containLabel: true, left: "10%", top: "20%", bottom: "10%", right: "10%", }, xAxis: { type: "category", data: state.xAxisData, axisLine: { lineStyle: { color: "#333", }, }, axisTick: { show: false, }, axisLabel: { margin: 20, //刻度標(biāo)簽與軸線之間的距離。 textStyle: { color: "#000", }, }, }, yAxis: { type: "value", axisLine: { show: true, lineStyle: { color: "#B5B5B5", }, }, splitLine: { lineStyle: { // 使用深淺的間隔色 color: ["#B5B5B5"], type: "dashed", opacity: 0.5, }, }, axisLabel: {}, }, series: [{ data: state.yAxisData, stack: "zs", type: "bar", barMaxWidth: "auto", barWidth: 60, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, type: "linear", global: false, colorStops: [{ offset: 0, color: "#5EA1FF", }, { offset: 1, color: "#90BEFF", }, ], }, }, }, //下面的立體,控制顏色是color第一個(gè) { data: state.yAxisData1, type: "pictorialBar", barMaxWidth: "20", symbol: "diamond", symbolOffset: [0, "50%"], symbolSize: [60, 15], zlevel: 2, }, //上面的立體,控制顏色是color第二個(gè) { data: state.yAxisData, type: "pictorialBar", barMaxWidth: "20", symbolPosition: "end", symbol: "diamond", symbolOffset: [0, "-50%"], symbolSize: [60, 12], zlevel: 2, } ], }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option); } //掛載 onMounted(()=>{ echartInit() }) return { ...toRefs(state), echartInit }; } } </script> <style lang='scss' scoped> .echartDiv{ width: 100%; height: 400px; } </style>
感謝各位的閱讀,以上就是“怎么用vue3.0+echarts實(shí)現(xiàn)立體柱圖”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)怎么用vue3.0+echarts實(shí)現(xiàn)立體柱圖這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。