画面截图：



画面代码：

import React,{ Component } from 'react'
import { Dimensions, View, Text } from 'react-native'
import Echarts from 'native-echarts';

let { width, height } = Dimensions.get('window');

export default class Statistics extends Component{
    render(){
        const lineOption = {
          tooltip: {},
          legend: {
              backgroundColor: '#0C294B',
              borderColor: '#081C3F',
              borderWidth: 1,
              paddingTop: 5,
              itemWidth: 30,
              itemHeight: 15,
              itemGap: 15,
              textStyle: {
                color: '#A9A9A9'
              },
              data:[{
                name: '电话',
              },{
                name: '询价',
              }]
          },
          xAxis: {
              data: ["日","一","二","三","四","五","六"],
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#A9A9A9'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#A9A9A9'
                }
              }
          },
          yAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#A9A9A9'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#A9A9A9'
              }
            }
          },
          series: [{
              name: '电话',
              type: 'line',
              data: [5, 20, 36, 10, 10, 20, 25]
          }, {
              name: '询价',
              type: 'line',
              data: [15, 10, 16, 20, 30, 10, 15]
          }],
          color: ['#7CCD7C', '#5CACEE']
        };
        const pieOption = {
          title: {
            x: '60',
            text: '分享渠道',
            bottom: 10,
            textStyle: {
              color: '#FFFFFF',
            }
          },
          series: [{
              name: '分享渠道',
              type: 'pie',
              center: ['100', '40%'],
              radius : ['45%', '65%'],
              avoidLabelOverlap: false,
              startAngle: 45,
              label: {
                  normal: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      show: true,
                      textStyle: {
                          fontSize: '20',
                          fontWeight: 'bold',
                          color: '#FFFFFF'
                      }
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data: [
                {value: 63, name: '百度'},
                {value: 43, name: 'Google'},
                {value: 31, name: '360搜索'},
                {value: 18, name: '有道'},
                {value: 15, name: '搜狐'},
                {value: 9, name: 'Yahoo'},
                {value: 7, name: '搜狗'}
              ]
          }],
          legend: {
              orient: 'vertical',
              y: 'center',
              right: '40',
              align: 'right',
              data:['百度', 'Google', '360搜索', '有道', '搜狐', 'Yahoo', '搜狗'],
              textStyle: {
                color: '#FFFFFF'
              },

          },
          color: ['#1E90FF','#90EE90', '#87CEFA', '#FF8C00', '#FFA500','#FF4500', '#800080']
        };

        return (
            <View style={{flex:1, backgroundColor:'#183A63'}}>
              <View style={{width:width - 10, height:80, margin:5, flexDirection:'row', borderWidth:1, borderColor:'#081C3F'}}>
                <View style={{flex:1, padding:10, borderRightWidth:1, borderRightColor:'#081C3F', backgroundColor:'#0C294B', flexDirection:'column'}}>
                  <Text style={{color:'#A9A9A9'}}>电话:</Text>
                  <Text style={{color:'#7CCD7C', fontSize:30, fontWeight:'bold'}}>160</Text>
                </View>
                <View style={{flex:1, padding:10, borderRightWidth:1, borderRightColor:'#081C3F', backgroundColor:'#0C294B'}}>
                  <Text style={{color:'#A9A9A9'}}>邮件:</Text>
                  <Text style={{color:'#FFFFFF', fontSize:30, fontWeight:'bold'}}>89</Text>
                </View>
                <View style={{flex:1, padding:10, borderRightWidth:1, borderRightColor:'#081C3F', backgroundColor:'#0C294B'}}>
                  <Text style={{color:'#A9A9A9'}}>留言:</Text>
                  <Text style={{color:'#FFFFFF', fontSize:30, fontWeight:'bold'}}>694</Text>
                </View>
                <View style={{flex:1, padding:10, backgroundColor:'#0C294B'}}>
                  <Text style={{color:'#A9A9A9'}}>询价:</Text>
                  <Text style={{color:'#5CACEE', fontSize:30, fontWeight:'bold'}}>350</Text>
                </View>
              </View>
              <Echarts option={lineOption} height={240} width={width}/>
              <View style={{height:1, backgroundColor:"#969696", width:width - 10, marginLeft:5}}/>
              <Echarts option={pieOption} height={200} width={width}/>
            </View>
        );
    }
}


 

                                                    

                                                        
为什么80%的码农都做不了架构师？>>>   
                                        
                                                
最近客户有个需求：统计图表，我就要需要在jsp页面展示饼图，柱状图等，希望高手指点指点，
 
有没有上手快而且方便的制作统计图表的什么东东，思路也好，我自己原来用CSS做了个柱状图，很难看啊。。
 
js好像也是可以做的，比较麻烦，不知道哪位大侠帮帮小弟呢？
                                                    

                                                        





                                        
                                            
转载于:https://my.oschina.net/pansd/blog/11872

统计图表的应用场合

线性统计图表应用：用来反映总体趋势情况、用来表达连贯性数据统计、展现折现或者曲线的形式使用、多条折现或者曲线可以进行相互比较
	
区域统计图表应用：通过区域所占比重进行对比统计、通过区域所占面积情况显示它所拥有的比重、通过区域统计图表显示连续性变化情况
	
柱状和条形统计图表应用：柱状和条形统计图表常用在对比情况的使用、可以显示总体数量，也可以分段显示数量、使用频率比较高
	
饼状图统计图表应用：用来统计各个组成部分的所占比重，使用频率比较高
	
散点图统计图表应用：用来统计总体分布情况、通过图表可以得到哪些区域分布密集与疏散情况
	
组合统计图表应用、速度图表、时钟图表



 Excel设计统计图表

创建一个表，绘制图


使用截图工具，保存下来


打开Axure，拖拽一个图片组件，将图片放入组件中



 HighChart设计统计图表

打开axure，生成原型文件


在网站下载HighCharts文件并解压，放到此文件夹下https://www.highcharts.com/blog/download/引入组件


打开axure，新建内部框架，双击添加链接到HighCharts目录下example中的指定路径，路径下的example最好单独自建一个文件夹，并放入htm，修改名字，方便后续修改操作




发布生成原型文件
	
对并状图进行修改数据，按如上操作发布一个饼状图，进入到htm，修改浏览网址属性、标题等，然后刷新即可改变页面展示效果




字体的修改：



 


Android统计图表MPAndroidChart
MPAndroidChart是在Android平台上开源的第三方统计图表库，可以绘制样式复杂、丰富的各种统计图表，如一般常见的折线图、饼状图、柱状图、散点图、金融股票中使用的的“蜡烛”图、“泡泡”统计图、雷达状统计饼状图等等。简言之，AndroidMPChart基本上可以满足日常在Android平台上的统计图表开发需要。

AndroidMPChart在github上的项目主页： 
https://github.com/PhilJay/MPAndroidChart 

在自己的项目的libs中，导入其发布的jar包即可使用MPAndroidChart。MPAndroidChart发布的jar包页面在： 
https://github.com/PhilJay/MPAndroidChart/releases 

AndroidMPChart使用方法：在上面的releases页面下载最新的jar包，复制到自己的项目libs中即可使用。如图：



注：写作本文是基于MPAndroidChart的版本：mpandroidchartlibrary-2-1-3.jar


现在，先做一个基础的AndroidMPChart折线图，折线图在平时的统计图表中应用最多，AndroidMPChart提供了丰富的功能给予支持。
效果图如下：



现给出实现上述统计图表的全部代码。
MainActivity.java的代码：
package zhangphil.linechart;

import java.util.ArrayList;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.Legend.LegendForm;
import com.github.mikephil.charting.components.Legend.LegendPosition;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.utils.ValueFormatter;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		LineChart chart = (LineChart) findViewById(R.id.chart);

		// 制作7个数据点（沿x坐标轴）
		LineData mLineData = makeLineData(7);
		setChartStyle(chart, mLineData, Color.WHITE);
	}

	// 设置chart显示的样式
	private void setChartStyle(LineChart mLineChart, LineData lineData,
			int color) {
		// 是否在折线图上添加边框
		mLineChart.setDrawBorders(false);

		mLineChart.setDescription("描述@ZhangPhil");// 数据描述

		// 如果没有数据的时候，会显示这个，类似listview的emtpyview
		mLineChart
				.setNoDataTextDescription("如果传给MPAndroidChart的数据为空，那么你将看到这段文字。@Zhang Phil");

		// 是否绘制背景颜色。
		// 如果mLineChart.setDrawGridBackground(false)，
		// 那么mLineChart.setGridBackgroundColor(Color.CYAN)将失效;
		mLineChart.setDrawGridBackground(false);
		mLineChart.setGridBackgroundColor(Color.CYAN);

		// 触摸
		mLineChart.setTouchEnabled(true);

		// 拖拽
		mLineChart.setDragEnabled(true);

		// 缩放
		mLineChart.setScaleEnabled(true);

		mLineChart.setPinchZoom(false);

		// 设置背景
		mLineChart.setBackgroundColor(color);

		// 设置x,y轴的数据
		mLineChart.setData(lineData);

		// 设置比例图标示，就是那个一组y的value的
		Legend mLegend = mLineChart.getLegend();

		mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);
		mLegend.setForm(LegendForm.CIRCLE);// 样式
		mLegend.setFormSize(15.0f);// 字体
		mLegend.setTextColor(Color.BLUE);// 颜色

		// 沿x轴动画，时间2000毫秒。
		mLineChart.animateX(2000);
	}

	/**
	 * @param count
	 *            数据点的数量。
	 * @return
	 */
	private LineData makeLineData(int count) {
		ArrayList<String> x = new ArrayList<String>();
		for (int i = 0; i < count; i++) {
			// x轴显示的数据
			x.add("x:" + i);
		}

		// y轴的数据
		ArrayList<Entry> y = new ArrayList<Entry>();
		for (int i = 0; i < count; i++) {
			float val = (float) (Math.random() * 100);
			Entry entry = new Entry(val, i);
			y.add(entry);
		}

		// y轴数据集
		LineDataSet mLineDataSet = new LineDataSet(y, "测试数据集。by ZhangPhil");

		// 用y轴的集合来设置参数
		// 线宽
		mLineDataSet.setLineWidth(3.0f);

		// 显示的圆形大小
		mLineDataSet.setCircleSize(5.0f);

		// 折线的颜色
		mLineDataSet.setColor(Color.DKGRAY);

		// 圆球的颜色
		mLineDataSet.setCircleColor(Color.GREEN);

		// 设置mLineDataSet.setDrawHighlightIndicators(false)后，
		// Highlight的十字交叉的纵横线将不会显示，
		// 同时，mLineDataSet.setHighLightColor(Color.CYAN)失效。
		mLineDataSet.setDrawHighlightIndicators(true);

		// 按击后，十字交叉线的颜色
		mLineDataSet.setHighLightColor(Color.CYAN);

		// 设置这项上显示的数据点的字体大小。
		mLineDataSet.setValueTextSize(10.0f);

		// mLineDataSet.setDrawCircleHole(true);

		// 改变折线样式，用曲线。
		// mLineDataSet.setDrawCubic(true);
		// 默认是直线
		// 曲线的平滑度，值越大越平滑。
		// mLineDataSet.setCubicIntensity(0.2f);

		// 填充曲线下方的区域，红色，半透明。
		// mLineDataSet.setDrawFilled(true);
		// mLineDataSet.setFillAlpha(128);
		// mLineDataSet.setFillColor(Color.RED);

		// 填充折线上数据点、圆球里面包裹的中心空白处的颜色。
		mLineDataSet.setCircleColorHole(Color.YELLOW);

		// 设置折线上显示数据的格式。如果不设置，将默认显示float数据格式。
		mLineDataSet.setValueFormatter(new ValueFormatter() {

			@Override
			public String getFormattedValue(float value) {
				int n = (int) value;
				String s = "y:" + n;
				return s;
			}
		});

		ArrayList<LineDataSet> mLineDataSets = new ArrayList<LineDataSet>();
		mLineDataSets.add(mLineDataSet);

		LineData mLineData = new LineData(x, mLineDataSets);

		return mLineData;
	}
}

MainActivity.java需要的activity_main.xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

	<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
</RelativeLayout>



MPAndroidChart提供了丰富的参数设计条件，可以设计样式丰富统计图表，比如在本例中，如果把注释掉的这段代码重新启用：
// 改变折线样式，用曲线。
		// mLineDataSet.setDrawCubic(true);
		// 默认是直线
		// 曲线的平滑度，值越大越平滑。
		// mLineDataSet.setCubicIntensity(0.2f);

		// 填充曲线下方的区域，红色，半透明。
		// mLineDataSet.setDrawFilled(true);
		// mLineDataSet.setFillAlpha(128);
		// mLineDataSet.setFillColor(Color.RED);


那么折线图的样式就变成这样：