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

echarts.js官网相关推荐

echarts.js 官网
echarts.js 官网 http://echarts.baidu.com/ 效果: 代码: updated:function(){this.$nextTick(function () {/**** ...
Node.js 官网入门教程（二） npm（安装、包版本、卸载、npx）、package.json（scripts、devDependencies）package-lock.json（语义版本规则符号
Node.js 官网入门教程(二) npm(包管理.安装.包版本.卸载.npx).package.json(scripts.devDependencies).package-lock.json(语义版 ...
knockout+html绑定,Knockout.Js官网学习（style绑定、attr绑定）
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
2021最新Node.js官网安装教程，配置环境变量（图文详细）
打开官网 Node.js官网 ,选择自己的版本,这里我使用的是Windows64位的,下载.msi安装包下载之后,双击运行点击next下一步勾选同意,点击Next下一步选择安装路径,这里我选择 ...
Node.js 官网入门教程（一） CommonJS 模块规范、Node.js REPL、console、CLI、exports
Node.js 官网入门教程(一) CommonJS 模块规范.Node.js REPL.console.CLI.exports 文章目录 Node.js 官网入门教程(一) CommonJS 模块规 ...
React.js 官网入门教程分离文件操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html> <h ...
可视化有关JS官网链接
[threeJs]3d建模基于webGL threejs官网:https://threejs.org/ threejs中文教程:Three.js 中文教程 | 参考手册 | 使用指南 | 动画特效 ...
【工程师综合项目二】React + Koa2打造『JS++官网管理后台』
Redis认知.安装与操作 MongoDB:动态数据库,如游戏中需要频繁地保存人物的坐标 Oracle:收费,企业级 mac要安装homebrew(包管理工具) window安装Redis程序运行教程 ...
Knockout.Js官网学习（创建自定义绑定）
前言你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...

echarts.js官网

echarts.js官网相关推荐

最新文章

热门文章