Echarts图表

最新推荐文章于 2022-03-31 12:53:04 发布
最新推荐文章于 2022-03-31 12:53:04 发布
阅读量58 收藏
点赞数
文章标签： java javascript json ViewUI
原文链接：http://www.cnblogs.com/AnswerTheQuestion/p/7340575.html
版权

近期做报表时用到了Echarts图表，因为从前只用过JfreeChart，两者一比较感觉百度做的确实厉害，功能很强大，要是很多。

最近主要用到了，柱状图，折线图，混合图，南丁格尔玫瑰图，桑基图。

有兴趣可以到其官网看，上面讲的非常详细。http://echarts.baidu.com/index.html；

官网API地址：http://echarts.baidu.com/option.html#title

1.柱状图，折线图，混合图

下面代码是实际项目中的用法，具体属性就不多说了，到上面网址去看。最主要的就是数据格式。

图例：data:['蒸发量','降水量','平均温度']；

默认图例显示：selected:['平均温度':false];

后台查询字段：data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];

数据:series:

[

{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]

其实我建议大家到官网看看文档，我这也是粗略写一下，因为用的少，以后自己看的时候有地方找，主要还是上面的网址管用。。。

/**charts图*/    
function charts(id,url,ny,jgdmQL){
    $("#chart_"+id).html("");
    var str=checkValue(id);
    var startDate=$("#startYear").val()+$("#startMonth").val();
    var endDate=$("#endYear").val()+$("#endMonth").val();
    var myChart = echarts.init(document.getElementById("chart_"+id));
    myChart.showLoading({text:"图表数据正在努力加载..."});
    $.post(url,{"str":str,"startDate":startDate,"endDate":endDate,"ny":ny,"jgdmQL":jgdmQL},function(result){
        var tuLi=eval("("+result.tuLi+")");
        var moRen=eval("("+result.moRen+")");
        var nm=eval("("+result.nm+")");
        var da=eval("("+result.chart+")");
        var option = {
                tooltip: {
                    trigger: 'axis'
                },
                toolbox:{
                    show:true,
                    feature:{
                        saveAsImage:{
                            show:true
                        },
                        dataView:{
                            show:true,
                            readOnly:false
                        },
                        restore:{
                            show:true
                        },
                        magicType:{
                            show:true,
                            type:["line","bar"]
                        }
                    }
                },
                legend: {
                    data:tuLi,//动态图例
                    selected:moRen//初始图例是否显示
                },
                grid:{
                      y:165
                  },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel:{
                            interval:0,
                            rotate:20
                        },
                        data: nm//后台查询字段对象                                
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额/万元',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '增幅/%',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                ],
                series: da//数据
        };
        myChart.setOption(option);        
        myChart.hideLoading();
    },"json")
}

2.桑基图。这个图就有点麻烦，其描述的是，从初始状态至最终形态的变化过程。

name是节点，links是变化过程。

{ target: '张店',source: '淄_博_增_长_比_%',value:10}：表示：张店有10变为了淄_博_增_长_比_%

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>桑基图</title>
  <%@include file="../public.jsp"%>
  <script type="text/javascript" src="../../js/charts/charts.common.extend.js"></script>
  <script type="text/javascript">
  function format(v){  // 格式化矩形框内显示的文字，如需要换行矩形框内的数据name节点需要添加下滑线_,如桑_基_图,这种格式的文字才可以垂直显示
         var name = v.name;
         if(name.indexOf('_') > -1){
            var str = '';
            var strArr = name.split('_');
            for (var i = 0; i < strArr.length;i++) {
               str += strArr[i] + '\n';
            }
            return str;
         }
    }

    function toolTipformat(v){ // 转化工具提示栏中的文字，默认写法无需修改
        alert(v);
         var name = v.name;
        if(name.indexOf('_') > -1){
           var str = '';
           var strArr = name.split('_');
           for (var i = 0; i < strArr.length;i++) {
              str += strArr[i];
           }
           return str;
        }else{
            return v.name;
        }
    }
          $(function(){
              var option = {
                     title: {
                       text: ''
                },
                tooltip: {
                     trigger: 'item',
                     triggerOn: 'mousemove'
                 },
                 series: [
                        {
                        type: 'sankey',
                        width:'40%',
                        nodeWidth:50,
                        data:[{
                            name:'淄_博_收_入_额',
                            value:0,
                            label:{//该矩形节点中文本标签的样式
                                 normal:{//常规样式
                                    textStyle:{fontSize:16,color:'black',fontWeight:'bold'}
                                }/*,
                               emphasis:{//着重突出的样式                      
                                    textStyle:{
                                       fontSize:16,
                                       color:'black',
                                        fontWeight:'bold'
                                    }
                               }*/
                         },
                         itemStyle:{//矩形节点的样式
                             normal:{shadowColor:'#FF9900',color:'#FF9900'}
                         }
                        },
                      {name: '张店',value: 10,label:{normal:{position: 'insideRight'}}}, 
                      {name: '临淄',value: 20,label:{normal:{position: 'insideRight'}}},
                      {name: '博山', value: 20,label:{normal:{position: 'insideRight'}}}, 
                      {name: '周村',value: 10,label:{normal:{position: 'insideRight'}}}],
                        links:[{ source: '张店',target: '淄_博_收_入_额',value:10}, {source: '临淄',target: '淄_博_收_入_额',value:20},
                             { source: '博山', target: '淄_博_收_入_额',value:20}, {source: '周村',target: '淄_博_收_入_额',value:10}],
              label:{//描述每个矩形节点中文本的样式
                       normal:{
                          position: 'inside',//在矩形节点内部
                          formatter:function(v){
                            return format(v)
                        }
                     }
                      
                },
            itemStyle: {//描述每个矩形节点的样式
                normal: {//常规的
                    opacity: 0.6,
                    color:'#FFFF00',
                    borderWidth: 0,
                    shadowColor:'#FFFF00'
                }
            },
            lineStyle: {//矩形节点之间连线的样式
                normal: {
                    opacity:0.6,
                    color:'#FFFF00',
                    shadowColor:'#FFFF00'
                }
            },
            tooltip:{//本系列特定的提示信息
               formatter:function(v){
                            return toolTipformat(v);
                        }
                }
            },
            {
                  type: 'sankey',
                  width:'40%',
                  left:'46%',
                  nodeWidth:50,
                  data:[{
                      name:'淄_博_增_长_比_%',
                      value:0,
                      label:{//该矩形节点中文本标签的样式
                           normal:{//常规样式
                              textStyle:{fontSize:16,color:'black',fontWeight:'bold'}
                          }/*,
                         emphasis:{//着重突出的样式                      
                              textStyle:{
                                 fontSize:16,
                                 color:'black',
                                  fontWeight:'bold'
                              }
                         }*/
                   },
                   itemStyle:{//矩形节点的样式
                       normal:{shadowColor:'#009900',color:'#009900'}
                   }
                  },
                {name: '张店',value: 10,label:{normal:{position: 'insideLeft'}}}, 
                {name: '临淄',value: 20,label:{normal:{position: 'insideLeft'}}},
                {name: '博山', value: 20,label:{normal:{position: 'insideLeft'}}}, 
                {name: '周村',value: 10,label:{normal:{position: 'insideLeft'}}}],
                  links:[{ target: '张店',source: '淄_博_增_长_比_%',value:10}, {target: '临淄',source: '淄_博_增_长_比_%',value:20},
                       { target: '博山', source: '淄_博_增_长_比_%',value:20}, {target: '周村',source: '淄_博_增_长_比_%',value:10}],
        label:{//描述每个矩形节点中文本的样式
                 normal:{
                    position: 'inside',//在矩形节点内部
                    formatter:function(v){
                      return format(v)
                  }
               }
                
          },
      itemStyle: {//描述每个矩形节点的样式
          normal: {//常规的
              opacity: 0.6,
              color:'#00FF00',
              borderWidth: 0,
              shadowColor:'#00FF00'
          }
      },
      lineStyle: {//矩形节点之间连线的样式
          normal: {
              opacity:0.6,
              color:'#00FF00',
              shadowColor:'#00FF00'
          }
      },
      tooltip:{//本系列特定的提示信息
         formatter:function(v){
                      return toolTipformat(v);
                  }
          }
      }
                ]
           };
              var myChart = echarts.init(document.getElementById("aa"));
            myChart.setOption(option);    
          })
  </script>    
  
  </head>
  <body>
    <div id="aa" style="width: 100%;height: 100%"></div>
  </body>
</html>

转载于:https://www.cnblogs.com/AnswerTheQuestion/p/7340575.html

diku9497
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
NBA数据的Echarts 数据分析图表
weixin_44769702的博客
06-02 2204
1、数据 NBA 猛龙队和勇士队 2、软件 Echarts Gallery 3、代码 已在GitHub共享 对NBA数据进行简单Echarts分析 4、截图
echars入门篇
weixin_30455661的博客
02-16 47
官网地址：echars。 官方实例：首次使用请点击。 官方文档以及第一次操作实例如下 我们生活中有很多统计图，举例一下，有：柱形图、饼图、折线图等一些可以统计数据的形式。 图有：X轴（横轴），Y轴（纵轴）。 官方介绍的是它们分为不同的类型：也就是Line（线图）、Bar（条形图）、scatter（散图）等。 关于本实例：点击这里从github拉取。 由上述所得，...
ECharts常用图表（柱状图）
qq_41891425的博客
11-06 9940
7大图表 柱状图 描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以以清晰的看出每个分类数据的排名情况。 图表1：柱状图 实现步骤 ECharts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option X轴数据： 数组1：[‘张三’，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’] Y轴数据： 数组2：[88,92,63,77,94,80,72,86] 图表类型 在series设置type:bar //bar是柱状图，line是线状，pie
数据可视化ECharts的常用图表，看完就会用(2)
zag666的博客
03-31 7331
ECharts七大常用图表：柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图 本文主要介绍后四个图表， 文章目录四、饼图五、地图六、雷达图 四、饼图 饼图的数据是由name和value组成的字典所形成的数组；饼图无须配置xAxis和yAxis。 特点：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况。 var pieData = [ { name: '淘宝', value: 11231 }, { name: '京东', value: 22673 },
echarts图表导出excel示例
09-04
主要介绍了echarts图表导出excel示例,需要的朋友可以参考下
echarts图表导出到excel
12-19
echarts图表导出到excel中的解决方法，做个备忘录，以防忘记
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括...echarts Ax
java后台生成echarts图表
11-13
echarts-java 通过phantomjs java后台生成echats图表，echartspoi相关jar包及phantomjs都在压缩包内
echarts图表存储
最新发布
04-10
echarts图表存储
jfreechart绘制的风速风向玫瑰图
09-18
flex案例\flex图形\玫瑰图\jfreechart小记(雷达图+折线图).doc
数据可视化ECharts的七大常用图表，看完就会用(1)
zag666的博客
03-31 7748
数据可视化 什么是数据可视化？ 数据可视化, 说白了, 就是把数据以更加直观的方式进行呈现。那什么方式是更加直观的方式呢? 就是图表。常言道, 文不如表, 表不如图, 人们大脑对图的敏感程度要比苍白无力的文字好很多。 通过图表可以很清楚的看到各项数据之间的关系：（下图是Echarts官网的一个例子） 数据可视化的好处 更直观的展示信息 清晰有效地传达与沟通信息 更容易洞察隐藏在数据中的信息 数据可视化的实现方式 ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库，兼容性强，底
earchs设置多个折线图不同颜色_如何直观呈现”收入-成本=利润“？折线图+堆积面积图...
weixin_42659252的博客
12-28 781
今日分享主题：两条折线图之间的差距如何直观呈现？借助堆积面积图。先说明下：本文操作使用的是2019版本，2013版本以上操作界面也差不多。如果是2013以下版本，操作界面可能会有差异，但功能都有，要自己找找。昨天折线图中的极值，如何自动标记呢？这篇文章中，只有一组指标一条折线图。但有时候，我们会有多组指标比较，需要画出多条折线图来呈现趋势。而且，这其中一些时候，各指标之间还存在勾稽关系，比如收入、...
vue2.6x 使用echarts图表
qq_32209081的博客
12-14 1097
后台管理系统必不可少的图表统计earchs,引入很简单官网中写了webpack引入earchs 下载： 当然 vue2.5引入的方式跟webpack有些区别的直接用import引入 ，注意：引入不要公共引入 不然包太大，影响加载速度，不然上线之前 性能优化也会需要再次处理。 import echarts from 'echarts' 例： <template> <div class="chinaMap"> <div id="map" ref="MapMountNode
Echarts3.0引入百度地图-简单说
热门推荐
Osborn的博客
07-25 1万+
    1. 首先是百度AK的申请 2. 下载bmap.js echarts.js bmap.js 是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’ 下载地址为：https://pan.baidu.com/s/1o8MB98I   下面针对的是Echarts3.0  下载地址为...
使用ECharts实现状态区间图
OrangeJ
10-20 1万+
需求背景假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆
Echarts 实现 设备运行状态图 工业大数据展示
又是再见?
05-10 1万+
设备运行状态图需求：翻阅echarts 官网实例， 发现其中的 profile 图就是想要的效果：http://echarts.baidu.com/examples/editor.html?c=custom-profilevar data = []; var dataCount = 100;// 测试数据条数 var startTime = 1525835791000; // 2018/5/9 1...
echarts实时数据图表
weixin_30436101的博客
02-26 228
import React, { PureComponent } from 'react'; import ReactEcharts from 'echarts-for-react'; import moment from 'moment'; export default class Charts extends PureComponent { getOption = () =&...
使用echarts实现时间状态区间图
IMFaust的博客
06-17 1万+
该图例参考了官方的demo:https://echarts.baidu.com/examples/editor.html?c=custom-profile以及https://www.cnblogs.com/cindy-hmy/p/8251193.html var colors = ['blue', 'red','gray'];//三种状态的颜色 var state = ['深睡'...
echarts 图表越界
09-07
Echarts图表越界是指在Echarts中的图表元素超出了指定的显示范围，导致部分或全部图表内容无法完整可见。 图表越界可能出现的原因有多种，其中一种常见的情况是因为用户自定义了某些图表参数，而导致了图表的显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值