vue實現(xiàn)echarts中的儀表盤
更新時間:2022年03月27日 14:56:18 作者:Polarisone
這篇文章主要為大家詳細介紹了vue實現(xiàn)echarts中的儀表盤,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)echarts中的儀表盤的具體代碼,供大家參考,具體內容如下
最終結果
一、安裝
1. 首先需要安裝echarts依賴包
npm install echarts -S
2. 或者使用國內的淘寶鏡像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、創(chuàng)建圖表
全局引入
main.js
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
Hello.vue
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default { ? ? data(){ ? ? ? return {} ? ? },? ? ? ?mounted(){ ? ? ? ? this.myChart() //函數調用 ? ? ?}, ? ? ?methods:{ ? ? ? ? myChart() { ? ? ? ? let columnar = this.$echarts.init(document.getElementById('myChart')); ? ? ? ? columnar.setOption({ ? ? ? ? ? tooltip : { ? ? ? ? ? ? formatter: "{a} <br/>{c} " ? ? ? ? ? }, ? ? ? ? ? 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] ? ? ? ? ? ? ? ? } ? ? ? ? ? ] ? ? ? ? }) ? ? ? } ? }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
解決echarts圖表使用v-show控制圖表顯示不全的問題
這篇文章主要介紹了解決echarts圖表使用v-show控制圖表顯示不全的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vuex持久化插件(vuex-persistedstate)解決刷新數據消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數據消失的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04