乘风原创程序

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