<template> <div>      <!-- <h2>本月抄表完成率</h2> --> <!-- <div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div> -->   <div ref="barg0" style="width: 600px;height:400px;"></div> //设置一个容器 </div> </template>

 

<script> import echarts from 'echarts' export default {     data () {         return {             option : {                  title: {                        text:'德清县',         // 仪表盘标题。          show: true,             // 是否显示标题,默认 true。          offsetCenter: [0,"20%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。                     fontSize: 20,// 文字的字体大小,默认 15。                     textStyle:{                         color:'#fff' //设置颜色                     },                                left:'center' //left：'center' 这样就可以让标题在 文本中图表中居中了                 },                                  tooltip : {                     formatter: "{a} <br/>{b} : {c}%"                 },                 toolbox: {                     feature: {                         restore: {},                         saveAsImage: {}                     },                     show : false     //这个可以让默认的 编辑按钮 还原和保存图 隐藏                 },                 series: [                     {                         name: '业务指标',                         type: 'gauge',                         detail: {formatter:'{value}%'},                         data: [{value: 50, name: ''}] //this.option.series[0].data[0].value                     }                 ]                     }                     }                 },                 methods: {                     customized(){                         var chart1 = echarts.init(this.$refs.barg0);                             setInterval(() =>{                             this.option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;                             chart1.setOption(this.option, true);                         },2000);                         chart1.setOption(this.option)                     }                 },                 mounted() {                     this.customized()                     // let _this = this;                     this.$nextTick(() => {                     let bargraph0 = echarts.init(this.$refs.barg0);                     bargraph0.setOption(this.option);                     window.addEventListener("resize", bargraph0.resize);

 

                    // let bargraph = echarts.init(_this.$refs.barg);                     // bargraph.setOption(_this.option2);                     // window.addEventListener("resize", bargraph.resize);

 

                    // let bargraph2 = echarts.init(_this.$refs.barg2);                     // bargraph2.setOption(_this.option3);                     // window.addEventListener("resize", bargraph2.resize);                     // });                     })                 } } </script>

 

<style lang=""> </style>