echarts.js官网

echarts.js 官网

http://echarts.baidu.com/

效果：

代码：

  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);//设置初始化数据

注意：要放在updated中，且要加上this.$nextTick(function(){     })

效果2：

code:

//月交易额详情
      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);

注意：也是要放在vue.js中的updated:function(){this.$nextTick(function(){     })}中，更新数据。