vue实现echarts中的仪表盘_vue.js_编程开发_全面的网站和技术免费教程

vue实现echarts中的仪表盘

2022/3/27 15:43:14

本文实例为大家分享了vue实现echarts中的仪表盘的具体代码，供大家参考，具体内容如下

最终结果

一、安装

1. 首先需要安装echarts依赖包

npm install echarts -s

2. 或者使用国内的淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、创建图表

全局引入

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} {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]
? ? ? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? })
? ? ? }
? }

乘风原创程序

一、安装

二、创建图表