欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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. 或者使用國(guó)內(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 : {
? ? ? ? ? ? ? ? ? ? ? ? //說(shuō)明數(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%", //指針長(zhǎng)度,按照半圓半徑的百分比
? ? ? ? ? ? ? ? ? ? ? ? shadowColor : 'blue', //默認(rèn)透明
? ? ? ? ? ? ? ? ? ? ? ? shadowBlur: 5
? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? //刻度數(shù)字樣式
? ? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? ? ? fontWeight:'bold',
? ? ? ? ? ? ? ? ? ? ? ? color: 'auto',
? ? ? ? ? ? ? ? ? ? ? ? fontSize:8, ? //改變儀表盤內(nèi)刻度數(shù)字的大小
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? detail: {
? ? ? ? ? ? ? ? ? ? ? ? //說(shuō)明數(shù)字大小
? ? ? ? ? ? ? ? ? ? ? ? formatter: function (value) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return value;
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? //儀表盤下方文字說(shuō)明
? ? ? ? ? ? ? ? ? ? ? ? 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]
? ? ? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? })
? ? ? }
? }

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決echarts圖表使用v-show控制圖表顯示不全的問(wèn)題

    解決echarts圖表使用v-show控制圖表顯示不全的問(wèn)題

    這篇文章主要介紹了解決echarts圖表使用v-show控制圖表顯示不全的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問(wèn)題

    Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問(wèn)題

    這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-04-04
  • Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題

    Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題

    這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能

    Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue插槽的作用

    Vue插槽的作用

    插槽(slot)是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時(shí),把不確定的、希望由用戶指定的部分定義為插槽??梢园巡宀壅J(rèn)為是組件封裝期間,為用戶預(yù)留的內(nèi)容的占位符
    2022-09-09
  • vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼

    vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-05
  • vue3+ant?design的form數(shù)組表單校驗(yàn)方法

    vue3+ant?design的form數(shù)組表單校驗(yàn)方法

    這篇文章主要介紹了vue3+ant?design的form數(shù)組表單,如何校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-09-09
  • 詳解Vue如何使用$emit進(jìn)行組件通信

    詳解Vue如何使用$emit進(jìn)行組件通信

    $emit是Vue實(shí)例的一個(gè)方法,它用于觸發(fā)自定義事件,本文主要為大家詳細(xì)介紹了Vue如何使用$emit進(jìn)行組件通信,感興趣的小伙伴可以跟隨小編咦學(xué)習(xí)一下
    2023-12-12
  • Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法

    Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法

    百度了好久都沒(méi)辦法實(shí)現(xiàn)vue中一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面,甚至到google上搜索也是沒(méi)辦法的,最終還是找了高人親自指導(dǎo),所以下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法,需要的朋友可以參考下
    2018-09-09
  • 在vscode 中設(shè)置 vue模板內(nèi)容的方法

    在vscode 中設(shè)置 vue模板內(nèi)容的方法

    這篇文章主要介紹了在vscode 中設(shè)置 vue模板內(nèi)容的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09

最新評(píng)論