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} 
{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(){     })}中，更新数据。