Echarts Bar橫向柱狀圖實(shí)例代碼
接上一篇# Echart Bar柱狀圖樣式詳解續(xù)寫,可以先看看上一篇,不看的話,影響也不是特別大。
橫向柱狀圖
動(dòng)態(tài)更新數(shù)據(jù)和樣式
實(shí)現(xiàn)數(shù)據(jù)按月統(tǒng)計(jì)和按日統(tǒng)計(jì)的動(dòng)態(tài)切換。按月統(tǒng)計(jì)時(shí),每個(gè)月數(shù)據(jù)都會(huì)展示,x 軸顯示 12 個(gè)標(biāo)簽;按日統(tǒng)計(jì)時(shí),x 軸不完全顯示所有標(biāo)簽,間隔顯示,而且柱狀體的寬度也會(huì)變化。主要是采用的是setOption方法。
官方文檔[setOption]:echarts.apache.org/zh/api.html…
<script> import * as R from "ramda"; const source1 = [ ["1月", 1330, 666, 560], ["2月", 820, 760, 660], ...... ["11月", 901, 880, 360], ["12月", 934, 600, 700], ]; const source2 = [ ["1日", 1330, 666, 560], ["2日", 820, 760, 660], ...... ["29日", 934, 600, 700], ["30日", 1330, 666, 560], ]; // 具體配置如之前所示,詳細(xì)省略,只做基本示例展示 const initOption = { ... dataset: { source: source1 }, }; export default { data() { return { charts: null, isDaily: false, }; }, mounted() { this.charts = this.$echarts.init( document.getElementById("barCharts"), null, { renderer: "svg", } ); this.charts.setOption(R.clone(initOption)); }, methods: { handleSource() { this.isDaily = !this.isDaily; this.charts.setOption( R.mergeDeepRight(initOption, { // 動(dòng)態(tài)更新數(shù)據(jù)源 dataset: { source: this.isDaily ? source2 : source1, }, xAxis: { // 動(dòng)態(tài)更新標(biāo)簽間隔 axisLabel: { interval: this.isDaily ? 4 : "auto", }, }, series: R.map( // 動(dòng)態(tài)更新柱體寬度 (o) => ((o.barWidth = this.isDaily ? 12 : 24), o), initOption.series ), }), true ); this.charts.resize(); }, }, }; </script>
解決 echarts 寬高自適應(yīng)問題
在 web 項(xiàng)目中做圖表時(shí),圖表的寬高不是固定的,需要隨著瀏覽器寬度高度自適應(yīng),使用的方法就是resize。如果有多個(gè)圖表,需要同時(shí)進(jìn)行resize處理。
<script> export default { mounted() { window.addEventListener("resize", this.handleResize, false); }, destroyed() { window.removeEventListener("resize", this.handleResize); }, methods: { handleResize() { const _this = this; const timer = setTimeout(() => { _this.lineCharts.resize(); _this.barCharts.resize(); }, 500); // 清除定時(shí)器 this.$once("hook:beforeDestroy", () => { setTimeout(timer); }); }, }, }; </script>
縱向柱狀圖
縱向柱狀圖實(shí)現(xiàn)
本質(zhì)和橫向是一樣的,就是將 x,y 軸值更換一下;x 軸為value,y 軸為category
let option = { xAxis: { type: "value", }, yAxis: { type: "category", }, };
坐標(biāo)指示器背景漸變色
其實(shí)原理和橫向的一樣,就是漸變色處理的地方 x,y 值更換一下
let horizontalColor = { type: "linear", x: 1, // 更換 y: 0, x2: 0, y2: 0, // 更換 colorStops: [ { offset: 0, color: "rgba(234,244,255,1)" }, { offset: 1, color: "rgba(234,244,255,0.3)" }, ], global: false, };
柱體設(shè)置不同顏色
柱體的屬性設(shè)置series中color可以是一個(gè)函數(shù),在函數(shù)中處理。核心代碼為colorList[params.dataIndex]
let colorList = [ "#1890ff", "#52c41a", "#faad14", "#f5222d", "#1DA57A", "#d9d9d9", ]; let series = [ { type: "bar", barWidth: 16, itemStyle: { // 定制顯示(按順序),實(shí)現(xiàn)不同顏色的柱體 color: (params) => { return colorList[params.dataIndex]; }, }, dimensions: ["類型", "銷售數(shù)量"], }, ];
柱狀圖上方顯示數(shù)值
柱體的屬性設(shè)置series中l(wèi)abel可以是一個(gè)函數(shù),在函數(shù)中處理。可以設(shè)置位置,字體顏色和大小等。核心代碼為params.value[params.encode.x[0]]。
let series = [ { // ...... type: "bar", label: { // 柱圖頭部顯示值 show: true, position: "right", color: "#333", fontSize: "12px", formatter: (params) => { return params.value[params.encode.x[0]]; }, }, }, ];
tooltip 提示框自定義
和橫向的一樣,就是要注意取值params[0].axisValue, item.seriesName, item.value[item.encode.x[0]]
let tooltip = R.merge(tooltip, { formatter: function(params) { let html = `<div style="height:auto;width:163px;"> <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;"> ${params[0].axisValue} </div> ${params .map( ( item ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;"> <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${ item.color };"></span> ${item.seriesName} <span style="flex:1;text-align:right;">${ item.value[item.encode.x[0]] }</span> </div>` ) .join("")} </div>`; return html; }, });
總體實(shí)現(xiàn)
charts.setOption({ title: { text: "銷售數(shù)量分布", }, dataset: { source: [ ["蘋果", 200], ["桃子", 180], ["葡萄", 340], ["香蕉", 250], ["芒果", 166], ["榴蓮", 185], ], }, xAxis: R.merge(yAxis, { type: "value", }), yAxis: R.mergeDeepRight(xAxis, { type: "category", axisPointer: { shadowStyle: { color: horizontalColor, }, }, }), series, tooltip, });
總結(jié)
到此這篇關(guān)于Echarts Bar橫向柱狀圖的文章就介紹到這了,更多相關(guān)Echarts Bar橫向柱狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jìn)度條的問題
- Echarts基本入門之柱狀圖、折線圖通用配置
- Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
- vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
- vue echarts實(shí)現(xiàn)橫向柱狀圖
- uniapp引用echarts的詳細(xì)步驟(附柱狀圖實(shí)例)
- echarts動(dòng)態(tài)渲染柱狀圖背景顏色及頂部數(shù)值方法詳解
- 基于vue+echarts實(shí)現(xiàn)柱狀圖漸變色效果(每個(gè)柱子顏色不同)
- Echarts柱狀圖修改柱子顏色漸變及柱子圓角效果實(shí)例
相關(guān)文章
JS記錄用戶登錄次數(shù)實(shí)現(xiàn)代碼
當(dāng)?shù)卿洿螖?shù)達(dá)到三次,就自動(dòng)調(diào)用函數(shù),隱藏彈出框。下面是具體的實(shí)現(xiàn),感興趣的朋友可以參考下2014-01-01Javascript 兩種刷新方法以及區(qū)別和適用范圍
這篇文章主要介紹了Javascript 兩種刷新方法以及區(qū)別和適用范圍的相關(guān)資料,需要的朋友可以參考下2017-01-01JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例
下面小編就為大家分享一篇JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例,具有很好的參考價(jià)值,希望對大家有所幫助2017-12-12JavaScript網(wǎng)絡(luò)請求工具庫axios使用實(shí)例探索
這篇文章主要為大家介紹了JavaScript網(wǎng)絡(luò)請求工具庫axios使用實(shí)例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01TypeScript里string和String的區(qū)別
這篇文章主要介紹了TypeScript里string和String的區(qū)別,真的不止是大小寫的區(qū)別,string表示原生類型,而String表示對象,下文更多詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-03-03js將列表組裝成樹結(jié)構(gòu)的兩種實(shí)現(xiàn)方式分享
最近做的任務(wù)提了新的需求,需要實(shí)現(xiàn)一個(gè)樹形結(jié)構(gòu),所以下面這篇文章主要給大家介紹了關(guān)于js將列表組裝成樹結(jié)構(gòu)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2022-01-01解析javascript瀑布流原理實(shí)現(xiàn)圖片滾動(dòng)加載
這篇文章主要幫助大家解析javascript瀑布流原理,實(shí)現(xiàn)js圖片滾動(dòng)加載2016-03-03微信小程序小組件 基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序小組件,基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02