zoukankan      html  css  js  c++  java
  • vue + echarts画圈圈

      
      <div class="chart-bar-left" id= "chartbar-left" style="margin-top:1%;">
          v-chart :options="optionPieleft" class="chart-pie-left"/>
        </div>
         
      <script>
    
          //添加引用
        import ECharts from "vue-echarts";
        import "echarts/lib/component/polar";
        // 引入提示框和标题组件
        import "echarts/lib/component/tooltip";
        import "echarts/lib/component/title";
        //引用legend组件
        import "echarts/lib/component/legend";
                  //引入饼图
        import "echarts/lib/chart/pie";
    
    
     var placeHolderStyle = {
          ormal: {
            color: 'rgba(44,59,70,1)', // 未完成的圆环的颜色
            label: {
            show: false
            },
          labelLine: {
          show: false
              }
            },
          emphasis: {
               color: 'rgba(44,59,70,1)' // 未完成的圆环的颜色
            }
        };
    
      var linear_color_left = {
        type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
        colorStops: [{
        offset: 0,
        color: '#0986e8'
        }, {
        offset: 1,
        color: '#4cd8f4'
        }]
        };
    
    export default {
            components: {
            "v-chart": ECharts
          },
        name: 'Dashboard',
    data(){
    return{
    optionPie : {
        backgroundColor: '#FFFFFF',
        title: {
            text: "冷运行天数",
            textStyle: {
                color: '#050f58',
                fontSize: 12,
             
            },
            left: 'center',
          top:'98'
        },
        series: [{
                //最里圈圆环
                  type: 'pie',
                  radius: ['75%', '75%'],
                  silent: true,
                  itemStyle: {
                      normal: {
                          labelLine: {
                              show: false
                          }
                      }
                  },
                  data: [{
                      value: 1,
                      itemStyle: {
                          normal: {
                              color: '#050f58',
                              borderColor: '#162abb',
                              //borderWidth: 1,
                              //shadowBlur: 5,
                              shadowColor: 'rgba(21,41,185,.75)'
                          }
                      }
                  }]
              },{
                  type: 'pie',
                  radius: ['89%', '91%'],
                  silent: false,
                  label: {
                      normal: {
                          show: false,
                      }
                  },
                  data: [{
                      value: 1,
                      itemStyle: {
                          normal: {
                              color: '#050f58',
                              barBorderRadius: 30,
                              // shadowBlur: 50,
                              shadowColor: 'rgba(21,41,185,.75)'
                          }
                      }
                  }]
              }, {
                  name: '占比',
                  type: 'pie',
                  radius: ['89%', '91%'],
                  hoverAnimation: false,
                  data: [{
                      value: 70, //已完成
                      show: false,
                      label: {
                          normal: {
                              formatter: '{d}',
                          
                              position: 'center',
                              show: true,
                              textStyle: {
                                  fontSize: '45',
                                  fontWeight: '200',
                                  color: '#3dd4de',
                                  margin:'00',
                              }
                          }
                      },
                     
    
                      itemStyle: {
                          normal: {
                              color: linear_color_left,
                              shadowColor: '#3dd4de',
                              shadowBlur: 2,
                              borderWidth: 2,
                              borderColor:linear_color_left
                          }
                      }
                  }, {
                      value: 30,//剩余
                      show: false,
                      itemStyle: {
                          normal: {
                              barBorderRadius: 50,
                              color: 'rgba(10,9,86,0)', // 未完成的圆环的颜色
                              label: {
                                  show: false
                              },
                              labelLine: {
                                  show: false
                              }
                          },   
                      }
                  }]
    
              }]
          },
      
    
    
    
    
    
          }
        }
      }  
    </script>
    
    

    画完张这样

  • 相关阅读:
    使用BackgroundWorker组件进行异步操作编程《转》
    C#多线程控制进度条之长任务操作《转》
    模态进度条窗体实现<转>
    dev xtraReports使用《转》
    客户端IP
    WebService获取服务端硬件信息和客户端IP,MAC,浏览器信息,所在城市《转》
    c#多线程 Invoke方法的使用<转>
    C# windowform进度条《转》
    XtraReports 打印控件的简单使用《转》
    hdu Marriage Match II
  • 原文地址:https://www.cnblogs.com/provedl/p/10518206.html
Copyright © 2011-2022 走看看