Echarts图表

Posted 2020-10-02 AnswerTheQuestion

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts图表相关的知识，希望对你有一定的参考价值。

近期做报表时用到了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>

以上是关于Echarts图表的主要内容，如果未能解决你的问题，请参考以下文章

vue2+echarts：使用后台传输的json数据去动态渲染echarts图表

图表控件== 百度 echarts的入门学习

Qt图表eCharts（想一想，我的程序需要使用JS来实现功能呢？）

Echarts基本图表的学习笔记

ECharts常用图表地图