vue echart 仪表盘

import echarts from "echarts";
export const publicCredit01hhmdOne = optiondata => {
 // let perdata = parseInt(optiondata[0].value / 500 * 100);
 let perdata = 0;
 perdata = parseInt(optiondata[0].value /optiondata[0].max * 100);
 return {
   backgroundColor: 'transparent',
   title: {
     show: true,
     x: "center",
     y: "62%",
     // text: '更新时间：2017-11-14', //幸运值取代码置于值于此处
     //subtext: '幸运指数',
     textStyle: {
       fontSize: 14,
       fontWeight: 'bolder',
       fontStyle: 'normal',
       color: "#29b0c5"
     }
   },
   tooltip: {
     show: true,
     formatter: "{b}：{c}",
     backgroundColor: '#29b0c5',
     // borderColor: '#189EB1',
     // borderWidth: '1px',
     textStyle: {
       color: 'white'
     }
   },
   series: [{
     // name: '能力',
     type: 'gauge',
     center: ['50%', '54%'], // 默认全局居中
     splitNumber: 6, //刻度数量
     min: 0, //最小刻度
     max: optiondata[0].max, //最大刻度
     // startAngle: 210,
     // endAngle: -30,
     radius: '100%', //图表尺寸
     axisLine: {
       show: true,
       lineStyle: {
         width: 12,
         length: 4,
         shadowBlur: 0,
         color: [
           [0.2, '#29b0c5'],
           [0.8, '#29b0c5'],
           [1, '#29b0c5']
         ]
       }
     },
     // 刻度
     axisTick: {
       show: true,
       lineStyle: {
         color: "#84dfed",
         width: 1
       },
       length: 10,
       splitNumber: 2
     },
     //  刻度
     splitLine: {
       show: true,
       length: -4,
       lineStyle: {
         color: [
           "#84dfed"
         ]
       }
     },
     // 刻度数值
     axisLabel: {
       distance: -20,
       textStyle: {
         color: "#0a6d7b",
         fontSize: "12",
       },
       formatter: function(e) {
         return Math.floor(e * 100)/100;
       }
     },
     pointer: {
       show: true,
       length: "80%",
       width: 4,
     },
     title: {
       textStyle: {
         fontSize: 14,
         fontWeight: 'bolder',
         fontStyle: 'bolder',
         color: "#29b0c5"
       },
       offsetCenter: [2, 65]
     },
     //仪表盘详情，用于显示数据。
     detail: {
       show: true,
       color: "#29b0c5",
       offsetCenter: [2, 35],
       textStyle: {
         fontSize: 26,
         fontWeight: 'bold'
       },
       formatter:function(value) {
         return  Math.floor(value/optiondata[0].max * 100)   + "%"
       }// 格式化函数或者字符串
     },
     data: [{
       name: optiondata[0].name,
       value: optiondata[0].value ,
     }]
   }]
 }
};

 <!-- 红黑名单奖惩企业情况 -->
             <echartsPietTwo
               ref="pCredit03hemd"
               idOne="honghenmingdan1"
               idTwo="honghenmingdan2"
               style="height:calc(100% - 50px)"
               :seriesData1="publicCredit03hemd.seriesData1"
               :seriesData2="publicCredit03hemd.seriesData2"
             ></echartsPietTwo>
             
             import echartsPietTwo from "./components/echarts-pie-two.vue";
              components: { echartsPietTwo},
              
              data(){
                 return {
                 	publicCredit03hemd:{
       			  	/*seriesData1:[
        				 	{"value":"160","name":"激励企业占比","max":"260"}
       					],
       				seriesData2:[
         					{"value":"45","name":"惩戒企业占比","max":"260"}
       				],*/
       				seriesData1:[
         					{"value":"0","name":"--","max":"0"}
       				],
       				seriesData2:[
         					{"value":"0","name":"--","max":"0"}
       				],
     				},
                 }
              }
              

echarts-pie-two.vue

<template>
 <div class="full-chart">
   <div :id="idOne" class="echartsStyle"></div>
   <div :id="idTwo" class="echartsStyle"></div>
 </div>

</template>

<script>
import Vue from "vue"
import { publicCredit01hhmdOne,publicCredit01hhmdTwo } from "./mapoptions";
export default {
 name: "echatrsLine",

 props: {
   idOne: {
     type: String,
     required: true,
     default: ""
   },
   idTwo: {
     type: String,
     required: true,
     default: ""
   },
   seriesData1: {
     type: Array,
     default: () => []
   },
   seriesData2: {
     type: Array,
     default: () => []
   }
 },
 data() {
   return {};
 },
 watch: {
   seriesData1: {
     handler: function() {
       this.$nextTick(() => {
         this.initOne();
       });
     },
     immediate: true
   },
   seriesData2: {
     handler: function() {
       this.$nextTick(() => {
         this.initTwo();
       });
     },
     immediate: true
   },
 },
 mounted() {
   this.$nextTick(() => {
     //this.initOne();
     //this.initTwo();
   });
 },
 methods: {
   getNum() {},
   init(){
     this.$nextTick(() => {
      // this.initOne();
       //this.initTwo();
     });

   },
   initOne() {
     const _this = this;
     let myChart1 = this.$echarts.init(document.getElementById(this.idOne));
     //myChart.setOption(option);
     myChart1.setOption(publicCredit01hhmdOne(this.seriesData1))
   },
   initTwo() {
     const _this = this;
     let myChart2 = this.$echarts.init(document.getElementById(this.idTwo));
     myChart2.setOption(publicCredit01hhmdTwo(this.seriesData2))
   }
 }
};
</script>
<style lang="less" scoped>
 .full-chart{
   display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;
   .echartsStyle{
     flex: 1;
     height: 100%;
   }
 }
</style>