精华内容
下载资源
问答
  • 结合google CorePlot在iphone上实现的柱状图饼图散点图,具体操作步骤请看本人blog:http://jinkeu.blog.163.com/blog/static/20892129201161624545/
  • 主要介绍了jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果,结合实例形式分析了jQuery使用HighCharts插件同时绘制折线图、柱状图、饼状图组合图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载...
  • 下面就记录下我在Struts2环境下是如何生成一些饼图柱状图和折线图~~~   首先struts2若要支持jfreechart是需要引入struts2-jfreechart-plugin-2.x.x.jar包,正如struts2支持ireport需要引入struts2-...

    最近在做报表,但客户要求加上一些图表显得更为生动,于是我就学习了下jfreechart发现也挺简单的。下面就记录下我在Struts2的环境下是如何生成一些饼图、柱状图和折线图的~~~

     

    首先struts2若要支持jfreechart是需要引入struts2-jfreechart-plugin-2.x.x.jar包的,正如struts2支持ireport需要引入struts2-jasperreport-plungin-2.x..x.jar包一样。

    最核心的struts.xml的配置必不可少(以饼图为例,其他原理类似):

     

    <package name="chartPackage" extends="jfreechart-default" namespace="/">
    	<action name="xxxChart" class="com.xx.xx.XXXChartAction">
    		<result name="pie" type="chart">
    			<param name="width">450</param>
    			<param name="height">350</param>
    		</result>
    	</action>
    </package>

     注意到extends="jfreechart-default"了没,这是struts2配置支持JFreeChart的核心所在。

     

    当然我们要在XXXChartAction里这样写了:

     

    public String pie() throws Exception {
    //得到List<Map<String, String>> list过程略
    		JFreeChart chart = JFreeChartService.createPieChart(list);
    		this.setChart(chart);
    		return "pie";
    	}

     其中JFreeChartService这个类是专门用于根据数据集生成不同chart的工具类。

     

    不妨看下生成饼图的方法:

     

    /**
    	 * 根据数据源绘制3D饼图
    	 * @param list
    	 * @return
    	 */
    	public static JFreeChart createPieChart(List<Map<String, Object>> list) {
    		int size = list.size();
    		DefaultPieDataset dpd = new DefaultPieDataset();
    		String[] appIds = new String[size];
    		long[] totalCnts = new long[size];
    		for(int i=0; i<size; i++) {
    			//。。。。。。。。。。
    			dpd.setValue(appId, totalSum);//appId为饼图的每一块的key, totalSum为该块对应的值
    			appIds[i] = appId;
    			totalCnts[i] = totalSum;
    		}
    //源码:public static JFreeChart createPieChart3D(String title, PieDataset dataset, boolean legend, boolean tooltips, boolean urls)
    		JFreeChart chart = ChartFactory.createPieChart3D("交易量饼图", dpd, true, true, false);
    		
    		//字体设置
    		chart.setTitle(new TextTitle("交易量饼图", new Font("黑体", Font.ITALIC , 25))); 
    		Font font = new Font("宋体", Font.ITALIC, 12);  
            PiePlot plot = (PiePlot) chart.getPlot();  
    //        chart.getTitle().setFont(font);  
            plot.setLabelFont(font);  
            chart.getLegend().setItemFont(font);
            return chart;
    	}

     同理,生成柱状图和折线图大同小异!

    柱状图:

     

    /**
    	 * 根据数据源绘制3D柱状图
    	 * @param list
    	 * @return
    	 */
    	public static JFreeChart createBarChart(List<Map<String, Object>> list) {
    		int size = list.size();
    		String[] appIds = new String[size];
    		double[] ratios = new double[size];
    		for(int i=0; i<size; i++) {
    			Map<String, Object> map = list.get(i);
    			//。。。。。。。。。。
    		}
    		
    		String[] rowKeys = new String[]{"成功率"};
    		double[][] data = new double[1][size];
    		data[0] = ratios;
    //源码:public static CategoryDataset createCategoryDataset(Comparable rowKeys[], Comparable columnKeys[], double data[][])
    	CategoryDataset dataset = DatasetUtilities.createCategoryDataset(rowKeys, appIds, data);
    //源码: public static JFreeChart createBarChart3D(String title, String categoryAxisLabel, String valueAxisLabel, CategoryDataset dataset, PlotOrientation orientation, boolean legend, boolean tooltips, boolean urls)	
    //		JFreeChart chart = ChartFactory.createBarChart("成功率柱状图", "系统", "成功率", dataset, PlotOrientation.VERTICAL, false, false, false);      
    		JFreeChart chart = ChartFactory.createLineChart3D("成功率柱状图", "系统", "成功率", dataset, PlotOrientation.VERTICAL, false, false, false); 
    		//重新设置图标标题,改变字体 
    	     chart.setTitle(new TextTitle("成功率柱状图", new Font("黑体", Font.ITALIC , 22))); 
    	     CategoryPlot plot = (CategoryPlot)chart.getPlot(); 
    	     //取得横轴 
    	     CategoryAxis categoryAxis = plot.getDomainAxis(); 
    	     //设置横轴显示标签的字体 
    	     categoryAxis.setLabelFont(new Font("宋体" , Font.BOLD , 18)); 
    	     //分类标签以45度角倾斜 
    	     categoryAxis.setCategoryLabelPositions(CategoryLabelPositions.UP_45); 
    	     categoryAxis.setTickLabelFont(new Font("宋体" , Font.ITALIC , 15));
    
    	     CategoryAxis domainAxis = plot.getDomainAxis();
    	     //设置距离图片左端距离
    	     domainAxis.setLowerMargin(0.1);
    	     //设置距离图片右端距离
    	     domainAxis.setUpperMargin(0.1);
    	     
    	    BarRenderer3D renderer = new BarRenderer3D();
    	     renderer.setItemMargin(0.1);//组内柱子间隔为组宽的10%  
    	     renderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());//显示柱子上的数值
    	     renderer.setBaseItemLabelsVisible(true);
    	     plot.setRenderer(renderer);//使用我们设计的效果
    	     
    	     //取得纵轴 
    	     NumberAxis numberAxis = (NumberAxis)plot.getRangeAxis(); 
    	     //设置纵轴显示标签的字体 
    	     numberAxis.setLabelFont(new Font("宋体" , Font.BOLD , 18));
     
    	  // 设置最高的一个   Item   与图片顶端的距离   
    	     numberAxis.setUpperMargin(0.15);   
    //	     // 设置最低的一个   Item   与图片底端的距离   
    //	     numberAxis.setLowerMargin(0.15);   
    	     plot.setRangeAxis(numberAxis);  
    
    //	      Font font00 = new Font("宋体",Font.BOLD,18); 
    //		  LegendTitle legend = chart.getLegend(); 
    //		  legend.setItemFont(font00);//设置注释字体
    		  
    		 return chart;
    	}

    源码说明:

    public static CategoryDataset createCategoryDataset(Comparable rowKeys[], Comparable columnKeys[], double data[][])

    其中,rowKeys为柱状图上显示的指标字符串的数组(只显示一个指标的时候就是一个数组长度为1的数组呀);columnKeys为x轴上的针对每一个指标的一批比较对象,data为一个二维数组,外维是指标下标,内维是每一对象在某一指标上的取值

    打个比方,有A.B.C.D.E 5个对象,在柱状图上要绘制他们在 甲、乙两个指标上的值——则rowKeys为甲和乙组成的数组,columnKeys为A-E这5个对象,一个data[2][5]的数组则描述了这5个对象分别在这2个指标上的取值~~~ 

     

    折线图:

     

     

    /**
    	 * 根据数据源绘制3D折线(走势)图
    	 * @param list
    	 * @return
    	 */
    	public static JFreeChart createLineChart(List<Map<String, Object>> list) {
    		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
    		for(Map<String, Object> map : list) {
    //源码:public void setValue(Number value, Comparable rowKey, Comparable columnKey);
    			dataset.setValue((Long.valueOf((String)map.get("total_sum"))),
    					(String) map.get("app_id"), map.get("snap_date").toString());
    		}
    		//如果把createLineChart改为createLineChart3D就变为了3D效果的折线图       
            JFreeChart  chart = ChartFactory.createLineChart3D("交易量走势图", "时间", "总交易量", dataset,  
                    PlotOrientation.VERTICAL, // 绘制方向  
                    true, // 显示图例  
                    true, // 采用标准生成器  
                    false // 是否生成超链接  
                    );  
            chart.getTitle().setFont(new Font("黑体", Font.ITALIC , 22)); // 设置标题字体  
            chart.getLegend().setItemLabelPadding(new RectangleInsets(2,2,2,2));
            chart.getLegend().setItemFont(new Font("宋体" , Font.BOLD , 18));// 设置图例类别字体  
            chart.setBackgroundPaint(new Color(Integer.parseInt(("C0E46A"), 16)));// 设置背景色   
            //获取绘图区对象  
            CategoryPlot plot = chart.getCategoryPlot();  
            plot.setBackgroundPaint(Color.LIGHT_GRAY); // 设置绘图区背景色  
            plot.setRangeGridlinePaint(Color.WHITE); // 设置水平方向背景线颜色  
            plot.setRangeGridlinesVisible(true);// 设置是否显示水平方向背景线,默认值为true  
            plot.setDomainGridlinePaint(Color.WHITE); // 设置垂直方向背景线颜色  
            plot.setDomainGridlinesVisible(true); // 设置是否显示垂直方向背景线,默认值为false  
              
            CategoryAxis domainAxis = plot.getDomainAxis();     
            domainAxis.setLabelFont(new Font("宋体" , Font.BOLD , 18)); // 设置横轴字体  
            domainAxis.setTickLabelFont(new Font("宋体" , Font.ITALIC , 15));// 设置坐标轴标尺值字体  
            domainAxis.setLowerMargin(0.01);// 左边距 边框距离  
            domainAxis.setUpperMargin(0.06);// 右边距 边框距离,防止最后边的一个数据靠近了坐标轴。  
            domainAxis.setMaximumCategoryLabelLines(2);  
            domainAxis.setCategoryLabelPositions(CategoryLabelPositions.DOWN_45);//横轴上的Label 45度倾斜
              
            ValueAxis rangeAxis = plot.getRangeAxis();  
            rangeAxis.setLabelFont(new Font("宋体" , Font.BOLD , 18));   
            rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());//Y轴显示整数  
            rangeAxis.setAutoRangeMinimumSize(1);   //最小跨度  
            rangeAxis.setUpperMargin(0.18);//上边距,防止最大的一个数据靠近了坐标轴。     
            rangeAxis.setLowerBound(0);   //最小值显示0  
            rangeAxis.setAutoRange(false);   //不自动分配Y轴数据  
            rangeAxis.setTickMarkStroke(new BasicStroke(1.6f));     // 设置坐标标记大小  
            rangeAxis.setTickMarkPaint(Color.BLACK);     // 设置坐标标记颜色  
              
         // 获取折线对象  
            LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();  
            BasicStroke realLine = new BasicStroke(1.8f); // 设置实线  
            // 设置虚线  
    //        float dashes[] = { 5.0f };   
    //        BasicStroke brokenLine = new BasicStroke(2.2f, // 线条粗细  
    //                BasicStroke.CAP_ROUND, // 端点风格  
    //                BasicStroke.JOIN_ROUND, // 折点风格  
    //                8f, dashes, 0.6f);   
    //        for (int i = 0; i < dataset.getRowCount(); i++) {  
    //            if (i % 2 == 0)  
    //                renderer.setSeriesStroke(i, realLine); // 利用实线绘制  
    //            else  
    //                renderer.setSeriesStroke(i, brokenLine); // 利用虚线绘制  
    //        }  
              
    //        plot.setNoDataMessage("无对应的数据,请重新查询。");  
    //        plot.setNoDataMessageFont(titleFont);//字体的大小  
    //        plot.setNoDataMessagePaint(Color.RED);//字体颜色  
            return chart;
    	}

     代码说明:

    dataset.setValue((Long.valueOf((String)map.get("total_sum"))),(String) map.get("app_id"), map.get("snap_date").toString());对应源码:

    public void setValue(Number value, Comparable rowKey, Comparable columnKey)其中value为折线图上每一个点对应的值,Comparable rowKey为Y轴方向的比较对象, Comparable columnKey则是X轴方向上点的对象。举一个小例子,有A/B/C/D/E 5个对象,要在折线图上反映他们10个时间点的取值情况,则这10个时间点为columnKey, 这5个对象即为rowKey。

    一般而言,反映在sql查询得出数据集中,columnKey和rowKey为group by的字段。

     

    在前台的写法很简单,即(以刚才配置了的饼图为例):

     

    <img  src="xxxChart/pie?参数="+xxx  />

     即可查看到效果。

     

    注:后台代码还需要JFreeChart的相关jar包支持:jcommon-1.x.x.jar和jfreechart-1.x.x.jar

     

    以下效果仅供参考!

    柱状图:


     
     饼图:


    折线图:


     

     

     

    • 7aafd5b1-e041-3b36-8327-1e1f068e4297-thumb.png
    • 大小: 16.9 KB
    • 1a3ff318-a419-367e-98c2-68ae59942f93-thumb.png
    • 大小: 23.2 KB
    • cb2c841e-3beb-3072-b20a-646a18f099df-thumb.png
    • 大小: 38.6 KB
    展开全文
  • 也是从网上整理到,希望能方便大家。 c#.net2005下运行,WebChart结合sql数据库生成饼图和柱状图。 提供源代码sql执行脚本。
  • 前端代码引入JS &lt;!-- echarts图表 --&gt; &lt;script type="text/javascript"... 加载后台数据代码,并生成图表 var swfltjChart = echarts.init(document.getElementById('swflt...
    1. 前端代码引入JS
      	<!-- echarts图表 -->
      	<script type="text/javascript" src="rwtj/echarts.min.js"></script>
      

      加载后台的数据代码,并生成图表

      var swfltjChart = echarts.init(document.getElementById('swfltj_chart'));
      	swfltjChart.clear();
      	swfltjChart.showLoading({text: '正在努力的读取数据中...'});
      	$.ajax({
      		asyn:false,
          	type: 'post',  
          	contentType: "text/html;charset=UTF-8",
            	url: _path+"/rwsjtj/pie.do?lx=swfltj"+param,					      
            	error: function (XMLHttpRequest, textStatus, errorThrown) {  //请求失败处理函数
            	    alert(textStatus);  
            	},  
            	success:function(rtn){ //请求成功后处理函数。
            	    var option = eval("("+rtn+")");
            	    swfltjChart.setOption(option);
            		swfltjChart.hideLoading(); 
            	}  
        	});

       

    2. 后台java代码的需要引入,具体的jar可以从下载

      import com.github.abel533.echarts.Option;
      import com.github.abel533.echarts.axis.CategoryAxis;
      import com.github.abel533.echarts.axis.ValueAxis;
      import com.github.abel533.echarts.code.Orient;
      import com.github.abel533.echarts.code.Tool;
      import com.github.abel533.echarts.json.GsonOption;
      import com.github.abel533.echarts.option.EffectOption;
      import com.github.abel533.echarts.option.NoDataLoadingOption;
      import com.github.abel533.echarts.series.Bar;
      import com.github.abel533.echarts.series.Effect;
      import com.github.abel533.echarts.series.Pie;

       

    3. 后台的部分代码:

      /**
           * 饼图 
           * @return
           */
          @RequestMapping(value = "/pie.do")
          @ResponseBody
          public String pie(HttpServletRequest request){
              //需要的数据
              String title = "事务分类统计";
              String lx  = UtilComm.trim(request.getParameter("lx"));
              String qsrq = request.getParameter("qsrq");
              String jsrq = request.getParameter("jsrq");
              String bmid = request.getParameter("bmid");
              if("zbswtj".equals(lx))
              {
              	title = "在办事务统计";
              }
              Map<String,Integer> dataMap = new HashMap<String, Integer>();
              if("zbswtj".equals(lx))
              {
              	dataMap = rwsjtjService.getRwztTj(qsrq, jsrq, bmid);
              }
              else
              {
              	dataMap = rwsjtjService.getSwflTj(qsrq, jsrq, bmid);
              }
               
              Object[] searchs = new Object[dataMap.size()] ;
              
              //创建option对象
              Option option = new GsonOption();
      
              //设置标题  二级标题  标题位置
              // option.title().text(title).subtext("二级标题").x("center");
              
              option.title().text(title).x("left");//将标题传入即可 并且支持链式调用 设置显示位置 居左
              
              //设置工具栏 展示  能标记
              option.toolbox().show(true).feature(Tool.mark,
                      Tool.magicType);
      
              //设置显示工具格式
              option.tooltip().show(true);
      
              //填充数据
              Pie pie = new Pie();//创建饼图对象
      
              //设置饼图的标题 半径、位置
              //pie.name(title).radius("55%").center("50%","50%");
              
              //填充数据
              int i =0;
              for(String key : dataMap.keySet()){
                  Map<String,Object> map = new HashMap<String, Object>();
                  map.put("value",dataMap.get(key));//填充饼图数据
                  String name ="";
                  if("zbswtj".equals(lx))
                  {
                  	if(key.equals("100_cq"))
                  	{
                  		name="在办(已超期)";
                  	}
                  	else if(key.equals("100_wcq"))
                  	{
                  		name="在办(未超期)";
                  	}
                  	else
                  	{
                  		name =CacheUtils.getCommZtmcVal(key);
                  	}
                  }
                  else
                  {
                  	name = (String)CacheUtils.getPtRwfl(key).get("MCMB");
                  }
                  map.put("name",name);//填充饼图数据对应的搜索引擎
                  pie.data(map);
                  searchs[i]=name;
                  i++;
              }
              //设置图例  图例位置  图例对齐方式 竖列对齐
              option.legend().data(searchs).x("right").y("center").orient(Orient.vertical);
              option.series(pie); //设置数据
              
              NoDataLoadingOption noDataLoadingOption =new NoDataLoadingOption();
              Effect effect = new Effect();
              effect.setShow(true);
              EffectOption effectOption = new EffectOption();
              effectOption.setEffect(0);
              noDataLoadingOption.setEffect(effect);
              noDataLoadingOption.setText("暂无数据");
              option.noDataLoadingOption(noDataLoadingOption);
              
              return option.toString();
      }
          
          
          /**
           * 柱状图  
           * @return
           */
          @RequestMapping(value = "/bar.do")
          @ResponseBody()
          public String bar(HttpServletRequest request){
          	 String lx  = UtilComm.trim(request.getParameter("lx"));
          	  String qsrq = request.getParameter("qsrq");
                String jsrq = request.getParameter("jsrq");
                String bmid = request.getParameter("bmid");
              //标题
              String title = "办理人办理事务统计";
              if("fqrswtj".equals(lx))
              {
              	title = "发起人提交事务统计";
              }
              Map<String,Integer> dataMap = new HashMap<String, Integer>();
              if("fqrswtj".equals(lx))
              {
              	dataMap = rwsjtjService.getTjrrTj(qsrq, jsrq, bmid,"");
              }
              else
              {
              	dataMap = rwsjtjService.getCbrrTj(qsrq, jsrq, bmid,"");
              }
              
              //####开始构建option对象 ######
              //1.创建option对象    有两种方式 一种是直接创建option但是在封装好option之后要使用json转换工具进行格式的转换
              //这里使用第二种方式直接构建GsonOption 通过toString方法可转换成json
              Option option = new GsonOption();
              //2.设置标题  可选
              option.title().text(title).x("left");//将标题传入即可 并且支持链式调用 设置显示位置 居左
              if(dataMap.size()==0)
              {
              	NoDataLoadingOption noDataLoadingOption =new NoDataLoadingOption();
              	Effect effect = new Effect();
              	effect.setShow(true);
              	EffectOption effectOption = new EffectOption();
              	effectOption.setEffect(0);
              	noDataLoadingOption.setEffect(effect);
              	noDataLoadingOption.setText("暂无数据");
              	option.noDataLoadingOption(noDataLoadingOption);
              	return option.toString();
              }
              //3.设置图例  可选
              option.legend().data("总数","在办").x("right").y("center").orient(Orient.vertical);;
              //4.设置工具栏  可选
              option.toolbox().show(true).feature(Tool.mark,
                      Tool.magicType); //设置可标记
              //5.设置显示工具
              option.tooltip().show(true) ;//设置显示的格式 当鼠标放到柱状图上时的显示格式
      
              //7.设置y轴 这里不给指定数据  自动调整
              ValueAxis valueAxis = new ValueAxis();
              option.yAxis(valueAxis);
      
              //8.填充柱状图数据
              Bar bar = new Bar();
              bar.name("总数");
              Object[] dimSet =new Object [dataMap.size()];
              int i=0;
              for(String key : dataMap.keySet()){
                  Map<String,Object> map = new HashMap<String, Object>();
                  map.put("value",dataMap.get(key));
                  String name = CacheUtils.getUserNameVal(key);
                  map.put("name",name);
                  bar.data(map);//指定路段装入指定数据
                  dimSet[i++]=name;
              }
              
              
              Map<String,Integer> dataMapZb = new HashMap<String, Integer>();
              if("fqrswtj".equals(lx))
              {
              	dataMapZb = rwsjtjService.getTjrrTj(qsrq, jsrq, bmid,"ZB");
              }
              else
              {
              	dataMapZb = rwsjtjService.getCbrrTj(qsrq, jsrq, bmid,"ZB");
              }
              Bar bar2 = new Bar();
              bar2.name("在办");
              for(String key : dataMap.keySet()){
                  Map<String,Object> map = new HashMap<String, Object>();
                  map.put("value",  dataMapZb.get(key)==null?"0":dataMapZb.get(key));
                  String name = CacheUtils.getUserNameVal(key);
                  map.put("name",name);
                  bar2.data(map);//指定路段装入指定数据
              }
              
              
              //6.设置x轴数据
              CategoryAxis categoryAxis = new CategoryAxis();
              categoryAxis.data(dimSet);
              option.xAxis(categoryAxis);
              
              //装入数据表中
              option.series(bar,bar2);
              
          
              
              //option进行json格式处理
              String result = option.toString();
              return result ;
          }

       

    4. 用了echart3.jar后java组装数据根据简单清晰。整个过程非常简单。效果图如下

    5. 前端和后台应用的包资源可以从https://download.csdn.net/download/yinbaicheng/10610857  下载。

    展开全文
  • echarts关于地图和柱状图的结合展示

    万次阅读 2018-01-02 08:58:06
    这次讲的主要是两个地图的结合展示,echarts的官网大部分的都是柱状图和折线图一起展示的例子,对于地图和柱状图的结合展示很少,我找了半天也只有饼图和柱状图的结合(PS:最后还是找到了,挖了很久.....)。...

             忙了好几个月的其他项目,忘了更新接下来的echarts其他的功能展示了,实在抱歉。这次讲的主要是两个地图的结合展示,echarts的官网大部分的都是柱状图和折线图一起展示的例子,对于地图和柱状图的结合展示很少,我找了半天也只有饼图和柱状图的结合(PS:最后还是找到了,挖了很久.....)。

    这边我先展示下效果图给大家看下:

    上图的柱状图的数据和地图上的数据可以不一致,两者的数据源可以在地图的配置,可以配置成和地图一样的数据源 也可以配置成独立的。两者之间的效果并不会相互干扰。 直接上代码,首先是地图的配置:

    function gene(item) {
    //清空
    // var planePath = 'path://M41.750 257.260 L 22.000 267.255 21.875 282.628 C 21.728 300.691,22.058 298.080,18.985 305.500 L 16.500 311.500 16.500 525.000 L 16.500 738.500 19.338 743.328 C 21.061 746.259,23.985 749.303,26.783 751.078 L 31.392 754.000 79.208 754.000 L 127.025 754.000 129.368 748.750 C 130.657 745.862,132.735 741.250,133.986 738.500 C 135.237 735.750,137.059 731.700,138.036 729.500 C 139.012 727.300,141.203 722.431,142.905 718.680 C 145.969 711.928,146.000 711.696,146.000 695.145 L 146.000 678.429 138.155 677.379 C 93.129 671.350,95.506 604.146,140.750 604.015 L 146.000 604.000 146.000 541.433 C 146.000 479.251,145.988 478.869,143.993 479.502 C 142.890 479.852,139.402 479.579,136.243 478.894 C 133.084 478.209,129.931 477.541,129.235 477.410 C 126.273 476.854,119.072 471.802,115.103 467.496 C 93.547 444.111,110.187 405.091,141.750 405.011 L 146.000 405.000 146.000 343.967 L 146.000 282.934 143.528 278.055 C 141.080 273.224,138.116 270.526,132.703 268.201 C 127.864 266.123,126.385 266.305,104.500 271.676 C 99.000 273.026,92.700 274.527,90.500 275.012 C 80.882 277.131,53.800 283.286,46.286 285.061 C 41.769 286.127,37.831 287.000,37.536 287.000 C 34.902 287.000,37.318 278.124,40.250 277.027 C 47.173 274.436,51.580 272.726,53.500 271.882 C 54.600 271.399,57.300 270.396,59.500 269.653 L 63.500 268.303 63.784 257.651 C 64.128 244.735,66.417 244.776,41.750 257.260 M125.000 329.000 L 125.000 349.000 81.000 349.000 L 37.000 349.000 37.000 329.000 L 37.000 309.000 81.000 309.000 L 125.000 309.000 125.000 329.000 M73.600 378.765 C 76.518 380.713,77.000 384.354,77.000 404.434 L 77.000 425.000 53.500 425.000 L 30.000 425.000 30.000 404.135 C 30.000 384.540,30.126 383.109,32.073 380.635 L 34.145 378.000 53.323 378.015 C 63.870 378.024,72.995 378.361,73.600 378.765 M131.392 420.438 C 115.469 427.680,113.107 451.221,127.262 461.610 C 137.887 469.409,149.819 468.650,159.148 459.583 C 178.796 440.485,156.489 409.024,131.392 420.438 M77.000 453.000 L 77.000 473.000 53.500 473.000 L 30.000 473.000 30.000 453.000 L 30.000 433.000 53.500 433.000 L 77.000 433.000 77.000 453.000 M77.000 500.500 L 77.000 520.000 53.500 520.000 L 30.000 520.000 30.000 500.500 L 30.000 481.000 53.500 481.000 L 77.000 481.000 77.000 500.500 M77.000 549.018 L 77.000 569.037 53.750 568.768 L 30.500 568.500 30.229 548.750 L 29.958 529.000 53.479 529.000 L 77.000 529.000 77.000 549.018 M77.000 596.000 L 77.000 616.000 53.500 616.000 L 30.000 616.000 30.000 596.000 L 30.000 576.000 53.500 576.000 L 77.000 576.000 77.000 596.000 M132.500 618.316 C 122.646 623.093,118.000 630.198,118.000 640.488 C 118.000 670.846,161.678 674.014,166.415 644.000 C 169.243 626.077,148.655 610.486,132.500 618.316 M77.000 644.000 L 77.000 664.000 53.500 664.000 L 30.000 664.000 30.000 644.000 L 30.000 624.000 53.500 624.000 L 77.000 624.000 77.000 644.000 M76.812 690.459 C 76.416 713.872,78.519 711.926,53.564 711.968 C 28.281 712.011,30.000 713.626,30.000 689.826 L 30.000 672.000 53.562 672.000 L 77.124 672.000 76.812 690.459';
    // var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';


    var planePath = 'image://../image/bus.png';
    series.splice(0, series.length);
       series.push(
       {
           name: item[0],
           type: 'scatter',
           coordinateSystem: 'geo',
           label: {
               normal: {
                   show: true,
                   position: 'right',
                   formatter: '{b}'
               },
               emphasis: {
                        show: true
                    }
           },
           symbolSize: function (val) {
            return 7;


           },
           itemStyle: {
               normal: {
                   color: '#a6c84c'//  a6c84c
               }
           },
           data: item[1].map(function (dataItem) {
              var dd = dataItem[0].value,nn=dataItem[0].name,vv=[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
            local =[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
            if(dataItem[1].value){
            dd = dataItem[1].value;
            vv = [parseFloat(dataItem[1].jd),parseFloat(dataItem[1].wd)]; //维度和经度
           
            nn=dataItem[1].name;   //城市名称
            }
               return {
                   name: nn,
                   value: vv.concat([dd])
               };
           })
           
       },
     
       {
        name: item[0],
           type: 'lines',
           zlevel: 1,
           effect: {
               show: true,
               period: 6,
               trailLength: 0.7,
               color: '#fff',
               symbolSize: 0.5
           },
           lineStyle: {
               normal: {
                   color: '#a6c84c', //a6c84c  82D900   FFDC35
                   width: 0,
                   curveness: 0.2
               }
           },
           data: null
       },
       {
           name: item[0],
           type: 'lines',
           zlevel: 2,
           symbol: ['none', 'arrow'],
           symbolSize: 10,
           effect: {
               show: true,
               period: 6,
               trailLength: 0.3,
               symbol: planePath,
               symbolSize: 40
           },
           lineStyle: {
               normal: {
                   color: '#ffa022',  //a6c84c   00A600
                   width: 1,
                   opacity: 0.6,
                   curveness: 0.2
               }
           },
           data: convertData(item[1])
       },
       {
           zlevel: 2,
           type: 'bar',
           symbol: 'none',
           //barWidth: 12,
           //barBorderRadius: 20,
           itemStyle: {
            normal: {
               //barWidth: 8,
                       barBorderRadius: 5,
                       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                           offset: 0,
                           color: '#99d9ea'  // 2a333d  99d9ea
                       }, {
                           offset: 1,
                           color: '#3fa7dc'
                       }]),
                       shadowColor: 'rgba(0, 0, 0, 0.4)',
                       shadowBlur: 2,
                       label : {  
                                show : true,  
                                position : 'right'
                            }   
                   }
           },
            //  data:  [2,2,2,2,2,2,2,2,2,2,2]
          // data:  [12,5,5,5,5,2,2,2,2,2,2]
         data: allList

       },
       {
           name: item[0] + ' Top10',
           type: 'effectScatter',
           coordinateSystem: 'geo',
           zlevel: 2,
           showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
           label: {
               normal: {
                   show: false,
                   position: 'right',
                   formatter: '{b}'
               }
           },
           symbolSize: function (val) {
              // return val[2] / 20;//40  到达城市点的大小
            return 7;


           },
           itemStyle: {
               normal: {
                   color: '#a6c84c'//  a6c84c
               }
           },
           data: 
            item[1].slice(0, 10).map(function (dataItem) {
              var dd = dataItem[0].value,nn=dataItem[0].name,vv=[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
              local =[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
            if(dataItem[1].value){
            dd = dataItem[1].value;
            vv = [parseFloat(dataItem[1].jd),parseFloat(dataItem[1].wd)]; //维度和经度
            nn=dataItem[1].name;   //城市名称
            }
               return {
                   name: nn,
                   value: vv.concat([dd])
               };
           })
             
       }
       
       );
    }
    option2 = {
       backgroundColor: '#404a59',  //404a59
       title : {
           left: 'center',
           textStyle : {
               color: '#fff'
           }
       },
       tooltip : {
           trigger: 'item',
           formatter: function (params) {
               return  params.name===""?"":params.name + ' : ' + params.value;
           }
       },
       legend: {
           orient: 'vertical',
           top: 'bottom',
           left: 'right',
           data:['用户出行'],
           textStyle: {
               color: '#fff'
           },
           selectedMode: 'single'
       },
       geo: {
           map: 'china',
           label: {
               emphasis: {
                   show: false
               }
           },
           roam: true,
           zoom: 9,
           itemStyle: {
               normal: {
                   areaColor: '#323c48',
                   borderColor: '#404a59'
               },
               emphasis: {
                   areaColor: '#2a333d'
               }
           }
       },
       
       grid: {
           right:50,
           top: 10,
           bottom: 220,
           width: '10%'
       },
       xAxis: {
        show : false,
           type: 'value',
           scale: true,
           position: 'top',
           triggerEvent:true,
           boundaryGap: false,
           splitLine: {
               show: false
           },
           axisLine: {
               show: false
           },
           axisTick: {
               show: false
           },
           axisLabel: {
               margin: 2,
               textStyle: {
                   color: '#aaa'
               }
           },
       },
       yAxis: {
           type: 'category',
           //  name: 'TOP 20',
           nameGap: 16,
           axisLine: {
               show: true,
               lineStyle: {
                   color: '#ddd'
               }
           },
           axisTick: {
               show: false,
               lineStyle: {
                   color: '#ddd'
               }
           },
           axisLabel: {
               interval: 0,
               textStyle: {
                   color: '#ddd'
               }
           },
           data: categoryData
       },

       series: series
    };

         红色的是柱状图的数据, 蓝色的是柱状图的配置,data:categoryData 是Y轴的数据配置。然后接下来是地图渲染的配置,这里我就给返回的数据返回Success的配置,前面一些的无关JS 我就省略了,



    try{
    $.ajax({
    async:false,
    url : url,
    data : {
    whereCase :JSON.stringify(param)
    },
    type : "POST",
    dataType : 'JSON',
    success : function(mes) {
    if(mes.data == undefined){
    parentObject.find('.table_data2').css("background","white").html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
    parentObject.find('.table_data3').css("background","white").html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
    $(".loaDailog").hide();
    $(".loaDailog2").hide();
    return;
    }
    if(parentObject.find('.table_data3').attr('class')){  //如果有table_data3,说明是图表和地图都要展示的
    var myChart3 = echarts.init(parentObject.find('.table_data3').get(0));
    var data = mes.dataMap;
    categoryData.splice(0,categoryData.length);
    allList.splice(0,allList.length);
    categoryData.push("");
    var zz = {};
    var bb = {normal:{color:'gray',
                                opacity:0,
                                }};
    zz['name'] = "";
    zz['value'] = 10;
    zz['itemStyle'] = bb;
    allList.push(zz);

    for(var i = data.length-1;i>=0;i--){
    var info = {};
    if(data[i][1].value===null||data[i][1].value ===undefined){
    categoryData.push(data[i][0].name);
    info['name'] = data[i][0].name;
    info['value'] = data[i][0].value;
    }else{
    categoryData.push(data[i][1].name);
    info['name'] = data[i][1].name;
    info['value'] = data[i][1].value;
    }
    allList.push(info);
    }
     
    series = [];
    var item  = [parentObject.find('.cityId').html().replace('市',''), data];
    var jwdArr = item[1];
    var jwd2 = jwdArr[0];
    var jwd = mes.center;
    if(jwd == null){
    if(jwdArr[1][0] != null && JSON.stringify(jwdArr[0][0]) == JSON.stringify(jwdArr[1][0])){
    jwd = jwd2[0];
    }else {
    jwd = jwd2[1];
    }
    }
    option2.geo.center = [jwd.jd, jwd.wd];//重新定位地图的中心(以选择的城市为中心)
    //console.log(option2.geo.center);
    //console.log(categoryData.length);
    option2.grid.bottom = 550-categoryData.length*20;
    gene(item);
    option2.series = series;
    myChart3.setOption(option2);
    }else{
    // 另外的地图   因为我一个页面要展示两个不同的地图,所以要渲染的话分两次。
    var option = mes.data;
    option = adjustOption(option);
    myChart.setOption(option);


    if(parentObject.find('.table_data2').attr('class')){  //如果有table_data2,说明是点击图表出现地图
    var myChart2 = echarts.init(parentObject.find('.table_data2').get(0));
    var zz = option.xAxis;
    var nn = option.series;
    categoryData.splice(0,categoryData.length);
    allList.splice(0,allList.length);
    categoryData.push("");
    var xx = {};
    var bb = {normal:{color:'gray',
                                opacity:0,
                               }};
    xx['name'] = "";
    xx['value'] = 10;
    xx['itemStyle'] = bb;
    allList.push(xx);
    for(var p=zz[0].data.length-1;p>=0;p--){
    var info={};
    categoryData.push(zz[0].data[p]);
    info['name'] = zz[0].data[p];
    info['value'] = nn[0].data[p];
    allList.push(info);
    }
    replaceCate = [].concat(categoryData);
    replaceAllList = [].concat(allList);

    ss  = zz[0].data[0];
    //console.log(ss);
    $.ajax({
    url : "moveInMapHit.do",
    type : "post",
    dataType : "json",
    async: false,
    data:{
    cityName : ss,
    provinceId : $('.provinceId').eq(0).attr("val"),
    startDate : $('.hasDatepicker').eq(0).val(),
    endDate : $('.hasDatepicker').eq(1).val()
    },
    success : function(response) {
    var data = response.data;
    series = [];
    var item  = [name.replace('市',''), data];
    var jwdArr = item[1];
    var jwd2 = jwdArr[0];
    var  jwd = jwd2[1];
    option2.geo.center = [jwd.jd,jwd.wd];//重新定位地图的中心(以选择的城市为中心)
    option2.grid.bottom = 550-categoryData.length*20;
    gene(item);
    option2.series = series;
    myChart2.setOption(option2);
    },
    });
    //这是点击柱状图的之后会重新渲染 这里看你柱状图是否需要和地图交互,不需要的话,下面这段代码可以省略
    myChart2.on('click', function (params) {
    var name = params.name;
    if(name===""||name===undefined){
    return;
    }
    $.ajax({
    url : "moveInMapHit.do",
    type : "post",
    dataType : "json",
    async: false,
    data:{
    cityName : name,
    provinceId : $('.provinceId').eq(0).attr("val"),
    startDate : $('.hasDatepicker').eq(0).val(),
    endDate : $('.hasDatepicker').eq(1).val()
    },
    success : function(response) {
    var data = response.data;
    var item  = [name.replace('市',''), data];
    var jwdArr = item[1];
    var jwd2 = jwdArr[0];
    var jwd = jwd2[1];
    series = [];
    categoryData.splice(0,categoryData.length);
    allList.splice(0,replaceAllList.length);
    categoryData = [].concat(replaceCate);
    allList = [].concat(replaceAllList) ;
    option2.geo.center = [jwd.jd,jwd.wd];//重新定位地图的中心(以选择的城市为中心)
    option2.grid.bottom = 550-categoryData.length*20;
    option2.yAxis.data = categoryData;
    gene(item);
    option2.series = series;
    myChart2.setOption(option2);
    },
    });
    });
    }
    }
    },
    error: function() { 
    parentObject.find('.table_data').html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
    $(".loaDailog").hide();
    $(".loaDailog2").hide();


    });
    }catch(e) {
    console.log("websocket交互错误!");
    }

        JS的渲染到此就结束了,友情提示下,DIV没有宽高定义的话,echarts渲染会失败。还有啥问题或者想交流下的加我QQ 1441167743   私信啥我的不一定能够及时回复。








    展开全文
  • 不仅几乎能兼容所有pc浏览器,而且对iosandroid手机端兼容 性也不错,它能够很简单便捷在Web网站或Web应用中添加交互性图表,Highcharts目前支持直线图、折线图、面积图、柱状图饼图、散点图 等多达28种...

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、折线图、面积图、柱状图、饼图、散点图 等多达28种不同类型的图表,还支持3D立体图表的生成,可以满足你对Web图表的任何需求 !而且Highcharts对学习者、非商业机构是免费使用的。

    案例场景:要求针对技术cto网站,直观地显示一周网站pv、uv的变化曲线;
    编程实现:
    1、首先创建数据库,保存网站每天的数据;
    CREATE TABLE `line` (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `pv` int(10) DEFAULT NULL,
      `uv` int(10) DEFAULT NULL,
      `did` int(10) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

    2、编写php代码从数据库中获取到每天网站的数据;
    include_once('connect.php');
    $res = mysql_query("select * from line");
    while($row = mysql_fetch_array($res)){
        $pv[] = intval($row['pv']);  //注意这里必须要用intval强制转换,不然图表不能显示
        $uv[] = intval($row['uv']);
    }
    $data = array(array("name"=>"pv","data"=>$pv),array("name"=>"uv","data"=>$uv));
    $data = json_encode($data);    //把获取的数据对象转换成json格式

    效果展示:


    本文出自技术CTO:http://www.jscto.net,转载请注明出处。

    转载于:https://www.cnblogs.com/syuanq/p/3760426.html

    展开全文
  • 可视化 这是一个尝试利用Vue结合D3.js...练习了常用图表(柱状图饼图,地图)在Vue中实现 数据采用模拟实现,全是随机数据 技术栈 Vue Vue路由器 安装 git clone https://github.com/funlee/vue-visualizatio
  • 红色柱状图函数:=text(round(A1,1),“0.0”)&rept("|",A1) 蓝色柱状图函数:=rept("|",A2)&text(round(A2,1),“0.0”) 饼图为excel制图后,复制进入word表格中。 效果图2: 1.将红色部分数值改为负数 2....
  • CorePlot-曲线

    千次阅读 2014-02-17 14:52:51
    Core Plot 功能强大很多,我们可以利用它很方便地画出复杂曲线图、柱状图和饼图等等。下面我先来介绍如何在项目中配置使用 Core Plot 库,然后通过一个曲线图示例来演示如何使用它,最后结合示例介绍 Core Plot ...
  • 用 pyecharts 对爬虫后数据进行可视化处理(生成饼图柱状图、地理位置图、3D旋转动图、词云图)及地图问题解决 首先,pyecharts 是一款融合了Pythonecharts技术强大数据可视化工具,它可视化类型...
  • 数据可视化,我们常见有表格、图标、图表、柱状图、折线图、雷达图、漏斗图、等值面图、等值线图、GIS地图、蜂窝图、格点数据、热力图、柱状图饼图、散点图、地理坐标/地图、K 线图、雷达图、盒须图、热力图、...
  • 文章目录Pyecharts使用切换主题颜色柱状图数据堆叠并列柱状图带窗口滑块3D柱状图Line(折线/面积图)Pie饼图涟漪特效散点图Funnel(漏斗图)Geo(地理坐标系)水球图雷达图词云图 最新常用数据可视化模块是...
  • Kibana 核心产品搭载了一批经典功能:柱状图、线状图、饼图、旭日图,等等。 将地理数据融入任何地图 精选时序性 UI,对Elasticsearch 中数据执行高级时间序列分析。 利用 Graph 功能分析数据间关系 Kibana ...
  • JFreeChart使用

    千次阅读 多人点赞 2014-07-05 22:22:30
    JFreeChart一个免费Java图表库.JFreeChart支持饼图(2D3D),条形图(水平垂直,整齐堆叠),线图,散点图,...由于JFreeChart可以生成图像很多,在此简要列举三个(饼图,柱状图,曲线图)作为入门,学习如何整合Struts如
  • Matplotlib是python中一个2D图形库, 它能以各种硬拷贝格式跨平台交互式环境生成高质量图形, 比如说柱状图, 功率谱, 条形图, 误差图, 散点图等.其中, matplotlib.pyplot 提供了一个类似mat...
  • ECharts 提供了常规折线图、柱状图、散点图、饼图、K线图,用于统计盒形图,用于地理数据可视化地图、热力图、线图,用于关系数据可视化关系图、treemap、旭日图,多维数据可视化平行坐标,还有用于 BI ...
  • 现如今,Echarts在数据可视化方面早已升入化境,已经不再拘泥于简单的饼图柱状图,已然从平面直角坐标系,扩展到了极坐标系地理坐标系等等。  随着地图使用越来越广泛,统计图与地图结合的展示方式更加直观,...
  • 图形库Core Plot

    2016-01-08 15:57:55
    Core Plot 功能强大很多,我们可以利用它很方便地画出复杂曲线图、柱状图和饼图等等。下面我先来介绍如何在项目中配置使用 Core Plot 库,然后通过一个曲线图示例来演示如何使用它,最后结合示例介绍 Core Plot ...
  • Core Plot 功能强大很多,我们可以利用它很方便地画出复杂曲线图、柱状图和饼图等等。下面我先来介绍如何在项目中配置使用 Core Plot 库,然后通过一个曲线图示例来演示如何使用它,最后结合示例介绍 Core Plot ...
  • iOS 之coreplot部分详解

    2014-09-23 11:37:16
    Core Plot 功能强大很多,我们可以利用它很方便地画出复杂曲线图、柱状图和饼图等等。下面我先来介绍如何在项目中配置使用 Core Plot 库,然后通过一个曲线图示例来演示如何使用它,最后结合示例介绍 Core Plot ...
  • ios图标绘制

    2015-11-19 19:49:28
    Core Plot 功能强大很多,我们可以利用它很方便地画出复杂曲线图、柱状图和饼图等等。下面我先来介绍如何在项目中配置使用 Core Plot 库,然后通过一个曲线图示例来演示如何使用它,最后结合示例介绍 Core Plot ...
  • 当前国内外市场上主流大数据分析工具,基本都采用键盘鼠标相结合的方式实现数据统计分析,包括:制作趋势图,柱状图饼图,条状图等。通过“全语音交互”实现数据分析目前市场仍旧处于“空白”状态。  2017...

空空如也

空空如也

1 2 3 4
收藏数 62
精华内容 24
关键字:

柱状图和饼图的结合