教你如何透過vue實現echarts中的儀表盤
導讀 | 這篇文章主要為大家詳細介紹了vue實現echarts中的儀表盤,文中示例程式碼介紹的非常詳細,具有一定的參考價值,感興趣的小夥伴們可以參考一下 |
本文例項為大家分享了vue實現echarts中的儀表盤的具體程式碼,供大家參考,具體內容如下
最終結果
一、安裝
1. 首先需要安裝echarts依賴包
npm install echarts -S
2. 或者使用國內的淘寶映象:
npm install -g cnpm --registry=
二、建立圖表
全域性引入
main.js
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
Hello.vue
export default { data(){ return {} }, mounted(){ this.myChart() //函式呼叫 }, methods:{ myChart() { let columnar = this.$echarts.init(document.getElementById('myChart')); columnar.setOption({ tooltip : { formatter: "{a} {c} {b}" }, toolbox: { show: true, feature: { restore: {show: true}, saveAsImage: {show: true} } }, series : [ { name: '空氣質量:', type: 'gauge', z: 3, min: 0, max: 500, splitNumber: 10, radius: '60%', axisLine: { lineStyle: { width: 10, color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ] } }, axisTick: { length: 15, lineStyle: { color: 'auto' } }, //刻度分割線樣式 splitLine: { length: 20, lineStyle: { color: 'white' } }, //刻度數字樣式 axisLabel: { fontWeight:'bold', color: '#0085FF', }, detail : { //說明數字大小 formatter: function (value) { return value; }, offsetCenter:['0%','80%'], fontWeight: 'bolder', borderRadius: 3, backgroundColor: '#0085FF', fontSize:14, width: 100, color: 'white', padding:[5,15,2,15] }, data:[1,2,3,4,5,6,7] }, { name: 'PM2.5:', type: 'gauge', center: ['20%', '55%'], radius: '40%', min:0, max:350, valu:55, endAngle:45, splitNumber:5, axisLine: { lineStyle: { width: 8, color: [[0.2, 'green'], [0.4, 'yellow'],[1.1,'orange'] ] } }, axisTick: { length:12, lineStyle: { color: 'auto' } }, splitLine: { length:20, lineStyle: { color: 'auto' } }, pointer: { width:5, color:'red' }, //刻度數字樣式 axisLabel: { fontWeight:'bold', color: '#0085FF', fontSize:8, //改變儀表盤內刻度數字的大小 }, detail: { formatter: function (value) { return value; }, offsetCenter:['15%','75%'], fontWeight: 'bolder', borderRadius: 3, backgroundColor: '#0085FF', fontSize:14, width: 100, color: 'white', padding:[5,15,2,15] }, data:[1,2,3,4,5,6] }, { name: 'PM10:', type: 'gauge', //儀表盤位置 center: ['79%', '55%'], //儀表盤半徑 radius: '40%', min:0, max:500, startAngle:130, splitNumber:5, //儀表盤弧線寬度 axisLine: { lineStyle: { width: 8, color: [[0.2, 'green'], [0.4, 'yellow'],[1, 'orange'] ] } }, //儀表盤小刻度樣式 axisTick: { length:12, lineStyle: { color: 'auto' } }, //儀表盤大刻度樣式 splitLine: { length:20, lineStyle: { color: 'auto' } }, //儀表盤指標樣式 pointer: { width:5,//指標的寬度 length:"60%", //指標長度,按照半圓半徑的百分比 shadowColor : 'blue', //預設透明 shadowBlur: 5 }, //刻度數字樣式 axisLabel: { fontWeight:'bold', color: 'auto', fontSize:8, //改變儀表盤內刻度數字的大小 }, detail: { //說明數字大小 formatter: function (value) { return value; }, //儀表盤下方文字說明 offsetCenter:['0%','80%'], fontWeight: 'bolder', borderRadius: 3, backgroundColor: '#0085FF', fontSize:14, width: 100, color: 'white', padding:[5,15,2,15] }, data:[1,2,3,4] } ] }) } }
以上就是本文的全部內容,希望對大家的學習有所幫助。
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2885762/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 簡單介紹Vue使用echarts定製特殊的儀表盤VueEcharts
- (覆盤)Vue中如何使用v-echarts元件VueEcharts元件
- layui 中echarts實現圖表UIEcharts
- 年底了!Smartbi教你做一個好看又實用的自助儀表盤!
- 零難度指南:手把手教你如何透過線上Excel實現資產負債表Excel
- Grafana新手教程-實現儀表盤建立和告警推送Grafana
- 自定義儀表盤
- 過分簡單,Tabluea儀表板與Smartbi自助儀表盤製作流程分享
- 一文告訴你Excel融合分析如何利用Smartbi實現儀表盤效果Excel
- vue中引入echartsVueEcharts
- 在vue腳手架中如何使用EChartsVueEcharts
- win10桌面cpu儀表盤怎麼顯示_win10系統cpu儀表盤如何開啟Win10
- 如何透過前端表格控制元件實現自動化報表?前端控制元件
- 如何透過java5註解實現域物件與表的對映Java物件
- react實戰系列 —— 我的儀表盤(bizcharts、antd、moment)React
- 儀表盤場景的前端優化前端優化
- Vue 結合 echarts 原生 html5 實現拖拽排版報表系統VueEchartsHTML
- 教你如何實現Python 過濾敏感詞Python
- 還在「黑盒煉丹」? 教你如何實現一行程式碼透視煉丹過程行程
- 如何透過代理IP實現Facebook群控?
- Python pyecharts繪製儀表盤PythonEcharts
- 用canvas寫出ui想要的儀表盤CanvasUI
- 如何實現JS中的過載JS
- 裝置儀器儀表盤讀數識別系統
- 分散式 PostgreSQL 叢集(Citus)官方示例 - 實時儀表盤分散式SQL
- echarts圖表y軸資料反轉的實現Echarts
- vue+echarts實現地圖及飛線圖VueEcharts地圖
- 如何透過5S實現良好的內務管理?
- 如何透過 Rancher 輕鬆實現多雲部署
- 開源儀表盤-Dashboard-C#/WFC#
- 在Vue專案中使用Echarts(三): Echarts中的其他常用圖VueEcharts
- vue + echartsVueEcharts
- ECharts實現資料圖表分析及程式碼Echarts
- 如何透過css變數實現主題切換?CSS變數
- 智慧儀表透過Modbus轉Profinet閘道器與PLC通訊方案
- 從探索式資料分析到現代 BI 儀表盤:Superset 2.0
- 透過ASM 反射實現IOCASM反射
- 透過alter table 來實現重建表,同事大呼開眼界了