1. 首页
  2. 编程与技术

Echarts图表在实际项目中的应用说明

发布于 2016-01-10 06:57:44 | 407 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程，程序狗速度看过来！

ECharts Javascript免费图表库

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

效果：

功能：点击主页进去会有不同的图表展现，点击两侧会有展示不同的数据以及图表。图表也可以托拉拽，重组、归为。

下面看下主要的代码：
数据来源：此时还没有连接接口

$scope.getData = [];//获取到的数据
if(flag == "thisMonth"){
  $scope.chartsTitle = "本月";
  index = 0;
  $scope.getData = [
    {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"10.10%",value:"600"},
    {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"2.29%",value:"136.2"},
    {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"8.80%",value:"523"},
    {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"4.88%",value:"290"},
    {imgSrc:"img/keepAccounts/rent.png",name:"租房",percentage:"20.19%",value:"1200"},
    {imgSrc:"img/keepAccounts/teamBuilding.png",name:"团建",percentage:"13.47%",value:"800.6"},
    {imgSrc:"img/keepAccounts/office.png",name:"办公",percentage:"0.60%",value:"35.8"},
    {imgSrc:"img/keepAccounts/others.png",name:"其他",percentage:"5.99%",value:"355.8"},
    {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"33.68%",value:"2002"}
  ];
}else if(flag == "waitCommit"){
  index = 1;
  $scope.getData = [
    {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"38.12%",value:"365"},
    {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"11.09%",value:"106.2"},
    {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"28.09%",value:"269"},
    {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"1.60%",value:"15.3"},
    {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"21.10%",value:"202"}
  ];
  $scope.chartsTitle = "待提交";
}else if(flag == "checked"){
  index = 2;
  $scope.chartsTitle = "已审批";
  $scope.getData = [
    {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"29.79%",value:"35"},
    {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"13.79%",value:"16.2"},
    {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"24.68%",value:"29"},
    {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"13.02%",value:"15.3"},
    {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"18.72%",value:"22"}
  ];
}

因为有三个入口跳入会展示不同的数据，所以这里有个if判断，index是为了点击左右两侧按钮跳转展示不同页面的数据的。

表格的配置：

//路径配置
require.config({
  paths:{
    echarts:'./js/dist'
  }
});
//图表使用
function drawCharts (dataArr,colorArr){
  require(
    [
      'echarts',
      'echarts/chart/pie'
    ],
    function (ec,data) {
      var myChart = ec.init(document.getElementById('chartsDiv'), 'macarons');
      var option = {
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        calculable : true,
        series : [
          {
            name:'消费金额',
            type:'pie',
            radius : ['50%', '70%'],
            itemStyle : {
              normal : {
                label : {
                  show : false
                },
                labelLine : {
                  show : false
                }
              },
              emphasis : {
                label : {
                  show : true,
                  position : 'center',
                  textStyle : {
                    fontSize : '30',
                    fontWeight : 'bold'
                  }
                }
              }
            },
            data:[

            ]
          }
        ],
        color:[
        ]
      };
      option.series[0].data = dataArr;
      option.color = colorArr;
      myChart.setOption(option);
    }
  );
}

这里面图表的颜色和图表的数据要设置下：

//图表的数据和颜色
function setData (data){
  chartsData = [];
  chartsColor = [];
  for(var i = 0;i<data.length;i++){
    var templateData = {};
    templateData.value = data[i].value;
    templateData.name = data[i].name;
    $scope.costMoney+=parseInt(data[i].value);
    chartsData.push(templateData);
    if(data[i].name == "通讯"){
      chartsColor[i] = "#98D30B";
    }else if(data[i].name == "团建"){
      chartsColor[i] = "#0A92D1";
    }else if(data[i].name == "餐饮"){
      chartsColor[i] = "#0AD1CA";
    }else if(data[i].name == "办公"){
      chartsColor[i] = "#7579C0";
    }else if(data[i].name == "租房"){
      chartsColor[i] = "#B58DFF";
    }else if(data[i].name == "交通"){
      chartsColor[i] = "#FF8E8E";
    }else if(data[i].name == "旅行"){
      chartsColor[i] = "#FFA749";
    }else if(data[i].name == "酒店"){
      chartsColor[i] = "#F19EC2";
    }else if(data[i].name == "其他"){
      chartsColor[i] = "#85A6C0";
    }
  }
}

然后在页面加载进来的时候需要调用这些函数：

$scope.$on('$ionicView.enter',function(){
  //设置表格div高度
  $(".chartsDiv").css('height',$(".chartsRow").outerHeight());
  $(".centerDiv").css('left',window.innerWidth/2-$(".centerDiv").outerHeight()/2-7);
  $(".chartsRow").css("margin-top",$(".dateTime").outerHeight());
  setData($scope.getData);
  drawCharts(chartsData,chartsColor);
});

注意这里的$ionicView.enter
因为要设置抽屉效果的div的高度

点击两侧按钮，显示别的页面的不同的数据需要重新加载下这个过程
封装的方法如下：

/点击左边右边按钮重新加载数据
function reload(item){
  if(item == 0){
    $scope.chartsTitle = "本月";
    $scope.getData = [
      {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"10.10%",value:"600"},
      {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"2.29%",value:"136.2"},
      {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"8.80%",value:"523"},
      {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"4.88%",value:"290"},
      {imgSrc:"img/keepAccounts/rent.png",name:"租房",percentage:"20.19%",value:"1200"},
      {imgSrc:"img/keepAccounts/teamBuilding.png",name:"团建",percentage:"13.47%",value:"800.6"},
      {imgSrc:"img/keepAccounts/office.png",name:"办公",percentage:"0.60%",value:"35.8"},
      {imgSrc:"img/keepAccounts/others.png",name:"其他",percentage:"5.99%",value:"355.8"},
      {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"33.68%",value:"2002"}
    ];
  }else if(item == 1){
    $scope.chartsTitle = "待提交";
    $scope.getData = [
      {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"28.09%",value:"269"},
      {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"11.09%",value:"106.2"},
      {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"1.60%",value:"15.3"},
      {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"38.12%",value:"365"},
      {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"21.10%",value:"202"}
    ];
  }else if(item == 2){
    $scope.chartsTitle = "已审批";
    $scope.getData = [
      {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"13.79%",value:"16.2"},
      {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"24.68%",value:"29"},
      {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"13.02%",value:"15.3"},
      {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"29.79%",value:"35"},
      {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"18.72%",value:"22"}
    ];
  }
  setData($scope.getData);
  drawCharts(chartsData,chartsColor);
}

然后点击方法里直接调用，就出现了所有的效果

$scope.lastPage = function(){
  index-=1;
  thisIndex = Math.abs(index%3);
  reload(thisIndex);
};
$scope.nextPage = function(){
  index+=1;
  thisIndex = Math.abs(index%3);
  reload(thisIndex);
};

这里注意方法的封装，代码的复用。



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务