/**
* @Author Sean
* @Date 2019/4/30
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content >
          <div class="big-circle"></div>
          <div class="circle">2004</div>
          <div class="line"></div>
          <div class="big-circle-brand"></div>
          <div class="circle-brand">R</div>
          <div class="line"></div>
          <div class="big-circle-date"></div>
          <div class="circle-date">2010</div>
          <div class="brand">
            <div class="brand-date">2004-06-09</div>
            <div class="brand-name">商标></div>
            <div class="brand-content">拔苗起航！注册了第一个商标：米家</div>
          </div>
          <div class="line"></div>
          <div class="big-circle-zhuce"></div>
          <div class="circle-zhuce"></div>
          <div class="line"></div>
          <div class="big-circle-change"></div>
          <div class="circle-change"></div>
          <div class="company-registration">
            <div class="registration-date">2010-03-03</div>
            <div class="registration">公司注册></div>
            <div><font style="color: white">今天我诞生了！</font></div>
          </div>
          <div class="line"></div>
          <div class="big-circle-change"></div>
          <div class="circle-change"></div>
          <div class="equity-change">
            <div class="equity-change-date">2010-05-12</div>
            <div class="equity-change-name">股东变更></div>
            <div><font style="color: white">股东由1 雷军自然人股东</font></div>
          </div>
          <div class="line"></div>
          <div class="big-circle-change"></div>
          <div class="circle-change"></div>
          <div class="company-registration">
            <div class="registration-date" style="background: forestgreen">2010-07-28</div>
            <div class="registration">实收资本变更></div>
            <div ><font style="color: white">由100万变更为2637.4978万</font></div>
          </div>
          <div class="line"></div>
          <div class="big-circle-change"></div>
          <div class="circle-change" style="background: orange"></div>
          <div class="equity-change">
            <div class="equity-change-date">2010-07-28</div>
            <div class="equity-change-name">注册资本变更></div>
            <div><font style="color: white">由100万变更为2637.4978万</font></div>
          </div>
          <div class="line"></div>
          <div class="big-circle-date"></div>
          <div class="circle-date">2011</div>
          <div class="company-get">
            <div style="background: #337ab7;width: 30%;height: 10px;overflow: hidden;text-align: center;margin-top: 10px;"></div>
            <div style="width: 40%;text-align: center;font-size: 32px;color: white">企业成就</div>
            <div style="background: #337ab7;width: 30%;height: 10px;overflow: hidden;text-align: center;margin-top: 10px;"></div>
          </div>
          <div class="brand-chart">
            <div class="brand-name" style="    padding: 30px 0px 0px 20px;">商标</div>
            <div id="brand" style="width: 100%;height: 300px" ></div>
          </div>
          <div class="invest-chart">
            <div class="invest" style="    padding: 30px 0px 0px 20px;">对外投资(14)</div>
            <div id="invest" style="width: 100%;height: 300px"></div>
          </div>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        created: function () {

        },
        mounted: function () {
          this.brand_initLoad()
          this.invest_initLoad()
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          brand_initLoad(){
            let vm = this
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('brand'))
            // 绘制图表
            myChart.setOption(
              {
                title : {
                  text: '1974',
                  subtext:'商标',
                  x:'center',
                  y:'center'
                },
                tooltip : {
                  // trigger: 'item',
                  // formatter: "{a} <br/>{b} : {c} ({d}%)"
                  show:true
                },
                color:['yellow','red','grey','green','blue'],
                series : [
                  {
                    name: '访问来源',
                    type: 'pie',
                    // radius : '55%',
                    // center: ['50%', '60%'],
                    radius:['40%', '50%'],
                    data:[
                      {value:335, name:'直接访问355'},
                      {value:310, name:'邮件营销310'},
                      {value:234, name:'联盟广告234'},
                      {value:135, name:'视频广告135'},
                      {value:1548, name:'搜索引擎1548'}
                    ]
                  }
                ]
              }
            )
          },
          invest_initLoad(){
            let vm = this
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('invest'))
            // 绘制图表
            myChart.setOption({

              tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis : [
                {
                  type : 'category',
                  data : ['软件信息', '批发零售','商业服务','制作业','技术服务'],
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLabel: {
                    rotate: 10,
                    interval :0
                  }
                }
              ],
              yAxis : [
                {

                  show:false

                }
              ],
              series : [
                {
                  name:'直接访问',
                  type:'bar',
                  itemStyle: {
                    normal: {
                      //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                      color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'


                        ];
                        return colorList[params.dataIndex]
                      },
                      //以下为是否显示，显示位置和显示格式的设置了
                      label: {
                        show: true,
                        position: 'top',
//
                        formatter: '{c}'
                      }
                    }
                  },
                  barWidth: '40',
                  data:[7, 3, 2, 1, 1]
                }
              ]
            })
          }
        }
    }
</script>

<style scoped lang="less" rel="stylesheet">
    .public-style {
        .content {
          background:@headerColor;
          .big-circle{
            width: 54px;
            height: 54px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            text-align: center;
            line-height:50px;
            margin: 20px auto 0px;
          }
          .circle{
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            text-align: center;
            line-height: 50px;
            margin: -52px auto 0px;
            border: 2px solid blue;
            color:blue;
          }
          .line{
            height: 30px;
            width: 50%;
            border-right: 1px solid white;
          }
          .big-circle-brand{
            width: 30px;
            height: 30px;

            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            text-align: center;
            margin: 0px auto;
          }
          .circle-brand{
            width: 26px;
            height: 26px;
            line-height: 26px;
            background: red;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            text-align: center;
            margin: -28px auto 0px;
          }
          .big-circle-date{
            width: 54px;
            height: 54px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            margin: 0px auto 0px;
          }
          .circle-date {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            text-align: center;
            line-height: 50px;
            margin: -52px auto 0px;
            border: 2px solid blue;
          }
          .brand{
            height: 100px;
            width: 40%;
            margin-top: -100px;
            margin-left: 59%;
            .brand-date{
              line-height: 20px;
              background: red;
              width: 100%;
              border-radius: 8px;
              text-align: center;
            }
            .brand-name{
              font-size: 14px;
              margin-top: 7px;
              color: #cccccc;
            }
            .brand-content{
              font-size: 14px;
              line-height:15px;
              margin-top: 5px;
              color: white;
            }
          }
          .big-circle-zhuce{
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            margin: 0px auto 0px;
          }
          .circle-zhuce{
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            margin: -18px auto 0px;
            border: 2px solid blue;
          }
          .big-circle-change{
            width: 30px;
            height: 30px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            margin: 0px auto 0px;
          }
          .circle-change{
            width: 26px;
            height:26px;
            background: white;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            margin: -28px auto 0px;
            border: 1px solid blue;
          }
          .company-registration{
            font-size: 14px;
            width: 40%;
            height: 80px;
            margin-top: -75px;
            margin-left: 15px;
            .registration-date{
              line-height: 20px;
              background: rebeccapurple;
              color: white;
              border-radius: 8px;
              text-align: center;
            }
            .registration{
              margin: 8px 0px 5px 0px;
              color: #c0c0c0;
            }
          }
          .equity-change{
            width: 40%;
            height: 80px;
            margin-top: -85px;
            margin-left: 59%;
            .equity-change-date{
              line-height: 20px;
              background: green;
              border-radius: 8px;
              text-align: center;
            }
            .equity-change-name{
              font-size:14px;
              margin:8px 0px 5px 0px;
            }
          }
          .company-get{
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            -webkit-flex-direction: row;
          }
          .brand-chart{
            width: 90%;
            height:300px;
            background: white;
            margin: 15px 5%;

          }
          .invest-chart{
            width: 90%;
            height: 380px;
            background: white;
            margin-left: 5%;
          }
        }
    }
</style>
