智一面gtalent-星之码前端开发-Echarts应用

  updated:function(){

    this.$nextTick(function () {

      /****************************************************  大数据页面 str************************************************************/

      var oUsercount = echarts.init(document.getElementById('pie_usercount'));

      var default_fc = "#00eaff";

      var default_fs = "12";

      var pointLine_color = "#3ca5fe";//月交易折线的颜色

      var daylyPointLine_color = "#fdd849";//日交易额折线的颜色


      var opt_usercount = {

        color:["#fdd324","#7be7ed","#fd642d","#158df2","#155ef2"],//每段图默认的颜色，按顺序

        tooltip: {//全局设置

          trigger: 'item',

          formatter: "{a} <br/>{b}: {c} ({d}%)"

        },

        legend : {//说明文字的设置

          width:80,height:120,

          itemWidth:10,itemHeight:10,

          orient: 'vertical',

          //x: 'left',//图&文字的排列方向

          right:20,//legend定位

          top:70,//

          data: ['平台用户', '城市运营商', '装修公司', '普通设计师', 'VIP设计师'],//与series 的data要一一对应

          textStyle: {//说明文字的样式

            color: default_fc

            , fontSize: default_fs

          }

        },

        series: [

          {//pie图显示设置

            name:'用户数量详情',//系列名称 {a|{a}}

            type:'pie',

            radius: ['40%', '60%'],

            center:['40%','50%'],//居中位置["x","y"]

            avoidLabelOverlap: false,

            label: {

              normal: {

                show: true,

                position: 'outline'

                ,textStyle: {

                  fontSize:default_fs,

                  fontWeight: 'bold'

                }

                ,formatter:"{b}: {d}%"//饼图上显示文字的格式设置，b和d 都有特殊代表


              },

              emphasis: {

                show: true,

                textStyle: {

                  fontSize: default_fs,

                  fontWeight: 'bold'

                }

              }

            },

            labelLine: {

              normal: {

                lineStyle: {

                  color: 'green'

                }

              }

            },

            //data: ['平台用户', '城市运营商', '装修公司', '普通设计师', 'VIP设计师'],

            data:[

              {value:335, name:'平台用户'},

              {value:310, name:'城市运营商'},

              {value:234, name:'装修公司'},

              {value:135, name:'普通设计师'},

              {value:1548, name:'VIP设计师'}

            ]

          }

        ]

      };


// 使用刚指定的配置项和数据显示图表。

      oUsercount.setOption(opt_usercount);//设置初始化数据

//月交易额详情

      var oMonthsum = echarts.init(document.getElementById('line_monthsum'));

      var opt_monthsum = {

//  color:"#3ca5fe",

        grid:{left:'20%'},//这个可以调整Y轴距离父容器边距

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            type: 'cross'

          }

        },

        toolbox: {

          show: true,

          feature: {

            saveAsImage: {}

          }

        },

        xAxis:  {

          name:"(单位：月份)",

          nameLocation:"end",

          align:"center",

          type: 'category',

          boundaryGap: false,

          data: ['10','11','12','1', '2', '3', '4', '5', '6', '7', '8', '9']

          ,nameTextStyle:{//名称的样式

            color:default_fc,verticalAlign:"bottom",padding:[70,0,0,-84]//调整x轴名称的position

          },

          axisLabel:{//轴线label文字

            color:default_fc,

            fontSize:default_fs

          },

          axisLine:{//直角坐标系的轴线

            shadowColor: 'rgba(0, 0, 0, 0.5)',

            shadowBlur: 10,

            lineStyle:{

              color:default_fc

            }

          }

        },

        yAxis: {

          name:"(单位：元)",

          type: 'value',

          axisLabel: {

            formatter: '{value}'

          },

          axisPointer: {

            snap: true

          }

          ,axisLine:{

            show:false

            ,shadowColor: 'rgba(0, 0, 0, 0.5)',

            shadowBlur: 10,

            lineStyle:{

              color:default_fc

            }

          }

        },

        visualMap: {

          show: false,

          dimension: 0,

          pieces: [{

            lte: 6,

            color: pointLine_color

          }, {

            gt: 6,

            lte: 8,

            color:pointLine_color

          }, {

            gt: 8,

            lte: 14,

            color: pointLine_color

          }, {

            gt: 14,

            lte: 17,

            color: pointLine_color

          }, {

            gt: 17,

            color: pointLine_color

          }]

        },

        series: [

          {

            name:'月交易额',

            type:'line',

            smooth: true,

            //data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],

            data:vm.alldata.monChart,

            markArea: {

              data: [ [{

                name: '早高峰',

                xAxis: '07:30'

              }, {

                xAxis: '10:00'

              }], [{

                name: '晚高峰',

                xAxis: '17:30'

              }, {

                xAxis: '21:15'

              }] ]

            }

          }

        ]

      };

      oMonthsum.setOption(opt_monthsum);