echarts图表

标签: css属性知识点  vue.js  javascript知识点  vue.js  javascript

Vue中导入echarts图表,如何修改legend图例组件中的name和value值显示位置的修改,


   mounted: function () {
      //初始化画布大小
      /*this.$refs['workshopViewContainer'].style.width = this.width+"px";
      this.$refs['workshopViewContainer'].style.height = this.height+"px";*/

      this.addListenShapeSelectedEvent();
      console.log('mounted', this.workshopId)
      this.startLoadRealtimeData();
      this.loadWorkshopRealtimeState();
      this.realTime();
      this.getPicture();
    },
    
mthods:{
getPicture() {
        let that = this;
        let myChart = Echarts.init(this.$refs.yChart);m
        let data = [
          {
            value: 350,
            name: '',
          },
          {value: 800, name: '运行',number:this.RealTimeData.runningNum, label: { show: false }},
          {value: 150, name: '待机',number:this.RealTimeData.standbyNum,label: { show: false } },
          {value: 200, name: '停机',number:this.RealTimeData.stopNum,label: { show: false } },
        ];


        myChart.setOption({
          // tooltip: {
          //   trigger: 'item',
          //   formatter:function () {
          //     return 'data.number'
          //
          //   }
          // },
          title: {
            text: "设备状态",
            // x:'center',
            // y: 'center',
            left:'15',
            top:15,
            color: "#333333",
            fontSize: 14,
            fontWeight:700,

          },

          legend: {
            // orient: '',
            left: 'center',
            y:'bottom',
            icon: "circle",
            data: [
              {name: '运行',value:800,},
              {name: '待机',value:150,},
              {name: '停机',value:200,},
              // '运行', '待机', '停机'
            ],
            formatter:function(name){
              let target;
              for(let i=0;i<data.length;i++){
                if(data[i].name===name){
                  target=data[i].number
                }
              }
              let arr=["{a|"+target+"}","{b|"+name+"}"]
              return arr.join("\n")

            },
            textStyle:{
              rich:{
                a:{
                  fontSize:24,
                  color:"#333",
                  position:'top',
                  padding:[0,0,-35,-20],
                  margin:[0,0,0,20],
                  // padding:10
                },
                b:{
                  fontSize:14,
                  color:"#333"
                }
              }
            }
          },
          color: ['#ffffff','#98d881', '#ffbe00', '#a4a8af'],
          graphic: {
            type: 'text',
            left:'center',
            top:210,
            z: 2,
            zlevel: 100,
            style:{
              text:'总设备数',
              fontWeight:400,
              fontSize:14,
              color:'#626366',
              textAlign: 'center'
            },
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '60%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              hoverAnimation:false,
              label: {
                show: false,
                display:null,
                position: 'inner',
                fontSize:0,
                normal: {
                  position: 'center',
                  formatter:function (argument) {
                    var html;
                    html='280';
                    return html;
                  },
                  textStyle:{
                    fontSize: 40,
                    color:'#333333'
                  }
                }
              },
              minAngle: 15,
              startAngle:313,
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                },


              },
              labelLine: {
                show: false
              },
              selectedOffset: 30,
              data: [
                {
                  value: 350,
                  name: '',
                },
                {
                  value: 800, name: '运行',number:140, label: { show: false }
                },
                {value: 150, name: '待机',number:80,label: { show: false } },
                {value: 200, name: '停机',number:300,label: { show: false } },
              ]
            },

          ]

        });

        setTimeout(function () {
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        }, 500);

      },
}

在这里插入图片描述

版权声明:本文为weixin_42055163原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42055163/article/details/105103316