Vue中使用Echarts建立图表（柱状图、折线图、环形图、中国地图及仪表盘）

待我称王封你为后i 2022-05-14 09:54 225阅读 0赞

### 文章目录 ###

*  一、安装Echarts
 *  二、在main.js引入，以便于全局使用
 *  三、绘制图表
 *   *  柱状图
     *  折线图
     *  环形图、饼图
     *  箱线柱状图
     *  中国地图
     *  仪表盘

随着大数据时代的来临，更多的数据要求可视化操作，图表的应用需求也不断提高。那么在Vue中该怎样使用图表呢？

# 一、安装Echarts #

npm install echarts -S

# 二、在main.js引入，以便于全局使用 #

import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

# 三、绘制图表 #

## 柱状图 ##

<template>
    	<div>
    		<header>这是销量展示页面</header>
    		<div id="volume"></div>
    		<foottab></foottab>
    	</div>
    </template>
    <script>
    //引入底部导航组件
    import foottab from '../components/footTab.vue'
    export default {
      methods:{
      	drawBar(){
      		//基于准备好的dom，初始化echarts实例
      		let volume = this.$echarts.init(document.getElementById('volume'));
      		//绘制图表
      		volume.setOption({
      			title:{text:'商品销量'},
      			tooltip:{},
      			legend: {
      				data:['销量']
      			},
      			xAxis: {
      				data: ['衣服','裤子','帽子','鞋子','领带']
      			},
      			yAxis: {},
      			series: [{
      				name: '销量',
      				type: 'bar',
      				data: [40,30,20,60,10]
      			}]
    
      		})
      	}
      },
      mounted(){//模板或el对应的html渲染完成后再调用里面的方法
      	this.drawBar()
      },
      components: {
        foottab
      }
    }
    </script>
    </script>
    <style lang="scss" scoped>
    	#volume{
    		width:20em;
    		height:20em;
    	}
    </style>

这样即完成了绘制，绘制效果如下：  
![这里写图片描述][70]

## 折线图 ##

line(){
          //指定图标的配置和数据
          var option = {
              title:{
                  text:'集中度风险'
              },
              tooltip:{},
              legend:{
                  data:['时间']
              },
              xAxis:[
                {
                    name:'时间',
                    type:'category',
                    boundaryGap: false,//从起点开始
                    splitLine: {//隐藏网格线
                      "show": false
                    },
                    axisTick:{ //隐藏刻度线
                      "show":false
                    },
                    data:["201808","201809","201903","201906"]
                }
              ],
              yAxis:{
                  name:'%',
                  min: 'dataMin', //取数据在该轴上的最小值作为最小刻度
                  splitLine: {
                    "show": false
                  },
                  axisTick:{       //y轴刻度线
                    "show":false
                  }
              },
              series:[{
                  name:'访问量',
                  type:'line',
                  areaStyle: {
                      normal: {color: '#80ffc0'}
                  },
                  data:[51,54,48,53]
              }]
          };
          let volume5 = this.$echarts.init(document.getElementById('volume5'));
          volume5.setOption(option)
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]

## 环形图、饼图 ##

pie(){
          var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                },
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['30%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:135, name:'直接访问'},
                        {value:210, name:'邮件营销'},
                        {value:260, name:'联盟广告'},
                        {value:100, name:'视频广告'},
                        {value:248, name:'搜索引擎'}
                    ]
                }
            ]
          }
          var volume6 = this.$echarts.init(document.getElementById('volume6'));
          volume6.setOption(option)
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 1]

## 箱线柱状图 ##

let volume1 = this.$echarts.init(document.getElementById('volume1'));
    volume1.setOption({
              backgroundColor:'#0d2a43',
              tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              /*
              legend: { //最上方显示
                  data:['中华人寿', '中华财险'],
                  color:'#ffffff'
              },
              */
              grid: {//内部距离
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis : [
                  {
                      type : 'value',
                      splitLine: {show: false}, //去掉网格线
                      axisTick: {//决定是否显示坐标刻度  
                        alignWithLabel: false,
                        show:false
                      },
                      axisLine:{//坐标字体颜色调整
                          show:false, //隐藏坐标线
                          lineStyle:{
                              color:'#ffffff',
                              width:2
                          }
                      }
                  }
              ],
              yAxis : [
                  {
                      type : 'category',
                      silent: true,
                      splitLine: {show: false}, //去掉网格线
                      axisTick : {show: true},
                      splitLine: {show: false}, 
                      axisLine:{//坐标字体颜色调整
                          lineStyle:{
                              color:'#ffffff',
                              width:2
                          }
                      },
                      data : ['保险风险','市场风险','信用风险']
                  }
              ],
              series : [
                  {
                      name:'中华人寿',
                      type:'bar',
                      barWidth: 30,
                      //stack: 'a',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#ffffff'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'left',//提示文字的位置
                              color:'#ffffff'
                          }
                      },
                      data:[-16.36]
                  },
                  {
                      name:'中华人寿',
                      type:'bar',
                      //barGap: "-100%",//包含关系
                      barWidth: 30,
                      //stack: 'b',
                      itemStyle:{
                        normal:{
                            color:'#ffffff'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'left',
                              color:'#ffffff'
                          }
                      },
                      data:[,-11.38]
                  },
                  {
                      name:'中华人寿',
                      type:'bar',
                      barWidth: 30,//设置宽度
                      //stack: 'c',
                      itemStyle:{
                        normal:{
                            color:'#ffffff'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'left',
                              color:'#ffffff'
                          }
                      },
                      data:[,,-12.2]
                  },
                  {
                      name:'中华人寿',
                      type:'bar',
                      barWidth: 30,
                      barGap: "-100%",//是否叠加
                      //stack: 'a',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#f9f6c7'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'left',
                              color:'black'
                          }
                      },
                      data:[-8]
                  },
                  {
                      name:'中华人寿',
                      type:'bar',
                      barWidth: 30,
                      barGap: "-100%",//是否叠加
                      //stack: 'b',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#c3f8ee'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'left',
                              color:'black'
                          }
                      },
                      data:[,-7.32]
                  },
                  {
                      name:'中华人寿',
                      type:'bar',
                      barWidth: 30,
                      barGap: "-100%",//是否叠加
                      //stack: 'c',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#c3f8ee'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'left',
                              color:'black'
                          }
                      },
                      data:[,,-8.13]
                  },
                  {
                      name:'中英人寿',
                      type:'bar',
                      barWidth: 30,
                      //stack: 'a',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#ffffff'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'right',
                              color:'#ffffff'
                          }
                      },
                      data:[20]
                  },
                  {
                      name:'中华财险',
                      type:'bar',
                      barWidth: 30,
                      //stack: 'b',
                      itemStyle:{
                        normal:{
                            color:'#ffffff'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'right',
                              color:'#ffffff'
                          }
                      },
                      data:[,14]
                  },
                  {
                      name:'中华财险',
                      type:'bar',
                      barWidth: 30,//设置宽度
                      //stack: 'c',
                      itemStyle:{
                        normal:{
                            color:'#ffffff'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'right',
                              color:'#ffffff'
                          }
                      },
                      data:[,,15]
                  },
                  {
                      name:'中华财险',
                      type:'bar',
                      barWidth: 30,
                      barGap: "-100%",//是否叠加
                      //stack: 'a',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#f9f6c7'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'right',
                              color:'black'
                          }
                      },
                      data:[10]
                  },
                  {
                      name:'中华财险',
                      type:'bar',
                      barWidth: 30,
                      barGap: "-100%",//是否叠加
                      //stack: 'b',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#c3f8ee'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'right',
                              color:'black'
                          }
                      },
                      data:[,9]
                  },
                  {
                      name:'中华财险',
                      type:'bar',
                      barWidth: 30,
                      barGap: "-100%",//是否叠加
                      //stack: 'c',//决定两个是否重叠
                      itemStyle:{
                        normal:{
                            color:'#c3f8ee'
                        }
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'right',
                              color:'black'
                          }
                      },
                      data:[,,10]
                  },
              ]
            })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 2]

## 中国地图 ##

randomColor(){
     var arr = []
     for(var i = 0; i < 6; i++){
       console.log(Math.round(Math.random()*this.colorArr.length))
       arr.push(this.colorArr[Math.round(Math.random()*this.colorArr.length)])
     }
     return arr;
    },
    map2(){
          var optionChinaMap = {
                tooltip : {
                    trigger: 'item', //显示悬浮窗口
                    formatter:function(params){
                        //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
                        var res='合规处罚<br />';
                        //定义一个变量来保存series数据系列
                        var myseries=optionChinaMap.series;
                        //循环遍历series数据系列
                        for(var i=0;i<myseries.length;i++){
                            //在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
                            for(var k=0;k<myseries[i].data.length;k++){
                                //console.log(myseries[i].data[k].name);
                                //如果data数据中的name和地区名称一样
                                if(myseries[i].data[k].name==params.name){
                                    //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
                                    res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
                                }
                            }
                        }
                        //返回res
                        //console.log(res);
                        return res;                
                    },
                },
                legend: {
                    orient: 'vertical',//图例的排列方向
                    textStyle: {color:'#fff'},
                    x:'left',//图例的位置
                    y:'20',
                    data:['中国地图']
                },
     
                visualMap: {//颜色的设置  dataRange
                    textStyle: {color:'#000'},
                    x: 'left',
                    y: 'bottom',
                    splitList: [
                        {start: 1500},{start: 900, end: 1500},
                        {start: 310, end: 1000},{start: 200, end: 300},
                        {start: 50, end: 200},{start: 0, end: 50},
                    ],
                    color: this.randomColor() 
                },
                // roamController: {//控制地图的上下左右放大缩小
                //     show: true,
                //     x: 'right',
                //     mapTypeControl: {
                //         'china': true
                //     }
                // },
                series : [
                    {
                        name: '地区',
                        type: 'map',
                        mapType: 'china',
                        zoom: 1.1,
                        layoutCenter:['50%','50%'],
                        roam: false,//是否开启鼠标缩放和平移漫游
                        itemStyle:{//地图区域的多边形 图形样式
                            normal:{//是图形在默认状态下的样式
                                label:{
                                    show: true,
                                    textStyle: {color: "rgb(249, 249, 249)"}
                                }
                            },
                            emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                label:{show:true},
                            }
                        },
                        top:"100",//组件距离容器的距离
                        data:[
                            {name: '北京',value: '北京' },{name: '天津',value: '天津' },  
                            {name: '上海',value: '上海' },{name: '重庆',value: this.randomData() },  
                            {name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },  
                            {name: '云南',value: this.randomData() },{name: '辽宁',value: this.randomData() },  
                            {name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },  
                            {name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },  
                            {name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },  
                            {name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },  
                            {name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },  
                            {name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },  
                            {name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },  
                            {name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },  
                            {name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },  
                            {name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },  
                            {name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },  
                            {name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },  
                            {name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }  
                        ]
                    },
                    {
                        name: '事件次数',
                        type: 'map',
                        mapType: 'china',
                        zoom: 1.1,
                        layoutCenter:['50%','50%'],
                        roam: false,//是否开启鼠标缩放和平移漫游
                        showLegendSymbol : false, //去掉小点
                        itemStyle:{//地图区域的多边形 图形样式
                            normal:{//是图形在默认状态下的样式
                                label:{
                                    show: true,
                                    textStyle: {color: "rgb(249, 249, 249)"}
                                }
                            },
                            emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                label:{show:true},
                            }
                        },
                        top:"100",//组件距离容器的距离
                        data:[
                            {name: '北京',value: '1次' },{name: '天津',value: this.randomData() },  
                            {name: '上海',value: this.randomData() },{name: '重庆',value: this.randomData() },  
                            {name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },  
                            {name: '云南',value: this.randomData() },{name: '辽宁',value: this.randomData() },  
                            {name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },  
                            {name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },  
                            {name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },  
                            {name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },  
                            {name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },  
                            {name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },  
                            {name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },  
                            {name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },  
                            {name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },  
                            {name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },  
                            {name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },  
                            {name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },  
                            {name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }  
                        ]
                    },
                    {
                        name: '处罚金额',
                        type: 'map',
                        mapType: 'china',
                        zoom: 1.1,
                        layoutCenter:['50%','50%'],
                        roam: false,//是否开启鼠标缩放和平移漫游
                        showLegendSymbol : false,
                        itemStyle:{//地图区域的多边形 图形样式
                            normal:{//是图形在默认状态下的样式
                                label:{
                                    show: true,
                                    textStyle: {color: "rgb(249, 249, 249)"}
                                }
                            },
                            emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                label:{show:true},
                            }
                        },
                        top:"100",//组件距离容器的距离
                        data:[
                            {name: '北京',value: '30万' },{name: '天津',value: this.randomData() },  
                            {name: '上海',value: this.randomData() },{name: '重庆',value: this.randomData() },  
                            {name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },  
                            {name: '云南',value: this.randomData() },{name: '辽宁',value: this.randomData() },  
                            {name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },  
                            {name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },  
                            {name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },  
                            {name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },  
                            {name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },  
                            {name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },  
                            {name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },  
                            {name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },  
                            {name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },  
                            {name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },  
                            {name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },  
                            {name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },  
                            {name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }  
                        ]
                    }
                ]
            };
            let volume3 = this.$echarts.init(document.getElementById('volume3'));
            var that = this
            volume3.setOption(optionChinaMap)
            /*
            this.timer = setInterval(function(){
              optionChinaMap.visualMap.color = that.randomColor() 
              volume3.setOption(optionChinaMap)
            },2000)
            */
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 3]

## 仪表盘 ##

chart(){
          var colorTemplate1 = [[0.2, "rgba(255,0,0,0.8)"], [0.8, "rgba(0,255,255,0.8)"], [1, "rgba(0,255,0,0.8)"]];
          var data1 = [{
                          name: "",
                          value: 65
                      }];
          // 指定图表的配置项和数据
          var option = {    
              backgroundColor: "#000",
              tooltip: {              // 本系列特定的 tooltip 设定。   
                      show: true,
                      trigger:'item',
                      formatter: "{b}：{c}%",
                      backgroundColor: "rgba(50,50,50,0.7)",  // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
                      borderColor: "#333",        // 提示框浮层的边框颜色。...
                      borderWidth: 0,             // 提示框浮层的边框宽。...
                      padding: 5,                 // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
                      textStyle: {                // 提示框浮层的文本样式。...
                          // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
                      },
              },
              
              series: [
                  {
                      name: "仪表盘1",     // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                      type: "gauge",          // 系列类型
                      radius: "35%",          // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                      center: ["18%", "55%"], // 仪表盘位置(圆心坐标)
                      startAngle: 225,        // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                      endAngle: -45,          // 仪表盘结束角度,默认 -45
                      clockwise: true,        // 仪表盘刻度是否是顺时针增长,默认 true。
                      min: 0,                 // 最小的数据值,默认 0 。映射到 minAngle。
                      max: 100,               // 最大的数据值,默认 100 。映射到 maxAngle。
                      splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10。
                      
                      axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                          show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                          lineStyle: {            // 仪表盘轴线样式。
                              color: colorTemplate1,  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                              opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                              width: 5,                  //轴线宽度,默认 30。
                              shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                              shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                          }
                      },
                      
                      splitLine: {            // 分隔线样式。
                          show: true,             // 是否显示分隔线,默认 true。
                          length: -25,             // 分隔线线长。支持相对半径的百分比,默认 30。
                          lineStyle: {            // 分隔线样式。
                              color: "#eee",              //线的颜色,默认 #eee。
                              opacity: 0,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                              width: 2,                   //线度,默认 2。
                              type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                              shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                              shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                          }
                      },
                      
                      axisTick: {             // 刻度(线)样式。
                          show: true,             // 是否显示刻度(线),默认 true。
                          splitNumber: 5,         // 分隔线之间分割的刻度数,默认 5。
                          length: 0,              // 刻度线长。支持相对半径的百分比,默认 8。
                          lineStyle: {            // 刻度线样式。   
                              color: "#eee",              //线的颜色,默认 #eee。
                              opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                              width: 1,                   //线度,默认 1。
                              type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                              shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                              shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                          },
                      },
                              
                      axisLabel: {            // 刻度标签。
                          show: true,             // 是否显示标签,默认 true。
                          distance: 5,            // 标签与刻度线的距离,默认 5。
                          color: "#fff",          // 文字的颜色,默认 #fff。
                          fontSize: 12,           // 文字的字体大小,默认 5。
                          formatter: "{value}",   // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                      },
                      
                      pointer: {              // 仪表盘指针。
                          show: true,             // 是否显示指针,默认 true。
                          length: "70%",          // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                          width: 5,               // 指针宽度,默认 8。
                      },
                      
                      itemStyle: {            // 仪表盘指针样式。
                          color: "auto",          // 指针颜色，默认(auto)取数值所在的区间的颜色
                          opacity: 1,             // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                          borderWidth: 0,         // 描边线宽,默认 0。为 0 时无描边。
                          borderType: "solid",    // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                          borderColor: "#000",    // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                          shadowBlur: 10,         // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                          shadowColor: "#fff",    // 阴影颜色。支持的格式同color。
                      },
                      
                      emphasis: {             // 高亮的 仪表盘指针样式
                          itemStyle: {
                              //高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
                          }
                      },
                      
                      title: {                // 仪表盘标题。
                          show: true,             // 是否显示标题,默认 true。
                          offsetCenter: [0,"20%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                          color: "#fff",          // 文字的颜色,默认 #333。
                          fontSize: 20,           // 文字的字体大小,默认 15。
                      },
                      
                      detail: {               // 仪表盘详情，用于显示数据。
                          show: true,             // 是否显示详情,默认 true。
                          offsetCenter: [0,"50%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                          color: "auto",          // 文字的颜色,默认 auto。
                          fontSize: 30,           // 文字的字体大小,默认 15。
                          formatter: "{value}%",  // 格式化函数或者字符串
                      },
                      
                      data: data1
                  },
                  {
                      name: "仪表盘",
                      type: "gauge",          // 系列类型
                      radius: "45%",          // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                      center: ["18%", "55%"], // 仪表盘位置(圆心坐标)
                      startAngle: 225,        // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                      endAngle: -45,          // 仪表盘结束角度,默认 -45
                      clockwise: true,        // 仪表盘刻度是否是顺时针增长,默认 true。
                      min: 0,                 // 最小的数据值,默认 0 。映射到 minAngle。
                      max: 100,               // 最大的数据值,默认 100 。映射到 maxAngle。
                      splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10。
                      axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                          show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                          lineStyle: {            // 仪表盘轴线样式。
                              color: [[1,'gray']],
                              opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                              width: 2,                  //轴线宽度,默认 30。
                              shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                              shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                          }
                      },
                      
                      splitLine: {            // 分隔线样式。
                          show: false
                      },
                      
                      axisTick: {             // 刻度(线)样式。
                          show: false
                      },
                              
                      axisLabel: {            // 刻度标签。
                          show: false       
                      },
                      
                      pointer: {              // 仪表盘指针。
                          show: false
                      },     
                      title: {                // 仪表盘标题。
                          show: false 
                      },
                      
                      detail: {               // 仪表盘详情，用于显示数据。
                          show: false            // 是否显示详情,默认 true。
                      },
                      data: [{name:'',value:''}]
                  }
              ]
          };
          let volume4 = this.$echarts.init(document.getElementById('volume4'));
          volume4.setOption(option)
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 4]

[70]: /images/20220514/b5c2609800ff4e73883a380e9d093d9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20220514/87be4c868a50428a887f3a4e7f9c8ac0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 1]: /images/20220514/f2be8da489e64347830df430c8ea9e81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 2]: /images/20220514/6ba0ddac804f4334a74d9342c2f7f4f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 3]: /images/20220514/5f833fb64e9644e99c9ccfc5add0de7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 4]: /images/20220514/014b1d1431344df0a1550a1956fe2110.png