vue實(shí)現(xiàn)echarts中的儀表盤
更新時(shí)間：2022年03月27日 14:56:18 作者：Polarisone
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)echarts中的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)echarts中的儀表盤的具體代碼，供大家參考，具體內(nèi)容如下
最終結(jié)果
一、安裝
1. 首先需要安裝echarts依賴包
npm install echarts -S
2. 或者使用國內(nèi)的淘寶鏡像：
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() //函數(shù)調(diào)用
? ? ?},
? ? ?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: '空氣質(zhì)量:',
? ? ? ? ? ? ? ? ? ? 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'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //刻度數(shù)字樣式
? ? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? ? ? fontWeight:'bold',
? ? ? ? ? ? ? ? ? ? ? ? color: '#0085FF',
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? detail : {
? ? ? ? ? ? ? ? ? ? ? ? //說明數(shù)字大小
? ? ? ? ? ? ? ? ? ? ? ? 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'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //刻度數(shù)字樣式
? ? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? ? ? fontWeight:'bold',
? ? ? ? ? ? ? ? ? ? ? ? color: '#0085FF',
? ? ? ? ? ? ? ? ? ? ? ? fontSize:8, ? //改變儀表盤內(nèi)刻度數(shù)字的大小
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? 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', //默認(rèn)透明
? ? ? ? ? ? ? ? ? ? ? ? shadowBlur: 5
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //刻度數(shù)字樣式
? ? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? ? ? fontWeight:'bold',
? ? ? ? ? ? ? ? ? ? ? ? color: 'auto',
? ? ? ? ? ? ? ? ? ? ? ? fontSize:8, ? //改變儀表盤內(nèi)刻度數(shù)字的大小
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? detail: {
? ? ? ? ? ? ? ? ? ? ? ? //說明數(shù)字大小
? ? ? ? ? ? ? ? ? ? ? ? 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]
? ? ? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? })
? ? ? }
? }以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)
這篇文章主要介紹了vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3造輪子之Typescript配置highlight過程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對(duì)比及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue3二次封裝element-ui中的table組件的過程詳解
這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過程,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友跟著小編一起來學(xué)習(xí)吧2024-01-01
在vue中axios設(shè)置timeout超時(shí)的操作
這篇文章主要介紹了在vue中axios設(shè)置timeout超時(shí)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例
這篇文章主要介紹了vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue項(xiàng)目啟動(dòng)提示Cannot GET /問題
這篇文章主要介紹了Vue項(xiàng)目啟動(dòng)提示Cannot GET /問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法
下面小編就為大家分享一篇webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03