网络统计图形

最新推荐文章于 2024-10-06 08:55:12 发布

weixin_30342827

最新推荐文章于 2024-10-06 08:55:12 发布

阅读量376

点赞数

文章标签： json javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/cloudtj/p/6097451.html

版权

导读：
统计图形
 eCharts
JSON
eCharts网页绘图
 散点图
 折线图
 柱状图
 饼图
 面积图
 雷达图
 和弦图
 热力图
 矩形树图
 漏斗图
 韦恩图
 地图

1、统计图形 [返回]

统计图是根据统计数字，用几何图形、事物形象和地图等绘制的各种图形。它具有直观、形象、生动、具体等特点。统计图可以使复杂的统计数字简单化、通俗化、形象化，使人一目了然，便于理解和比较。因此，统计图在统计资料整理与分析中占有重要地位，并得到广泛应用。

统计图形是利用点、线、面、体等绘制成几何图形，以表示各种数量间的关系及其变动情况的工具。常用的统计图有条形统计图、扇形统计图、折线统计图、散点图等。在统计学中把利用统计图形表现统计资料的方法叫做统计图示法。

一般采用直角坐标系，横坐标用来表示事物的组别或自变量x，纵坐标常用来表示事物出现的次数或因变量y；或采用角度坐标(如圆形图)、地理坐标(如地形图)。

按图形的数字性质分类，有实数图、累积数图、百分数图、对数图、指数图等；其结构包括图名、图目(图中的标题)、图尺(坐标单位)、各种图线(基线、轮廓线、指导线等)、图注(图例说明、资料来源等)等。

2、eCharts [返回]

eCharts（百度官网），商业级数据图表，一个纯Javascript的开源图表库，由百度商业前端数据可视化团队负责开发维护。可以流畅的运行在PC和移动设备上，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。由eCharts生成的图形为展示统计数据提供了完美解决方案。

3、JSON [返回]

JSON是一种轻量级的数据交换格式,采用完全独立于语言的格式化文本。JSON格式文本易于人阅读和编写，同时也易于机器解析和生成。Json的规格非常简单，只用一个页面几百个字就能说清楚（参见JSON数据交换格式），这些特性使JSON成为理想的数据交换语言。JSON被作为用户和eCharts间数据交换语言，用户需求通过JSON命令描述图形特征和数据，eCharts解析JSON指令后输出图形到浏览器。

4、eCharts网页绘图 [返回]

在网页中设置图形容器：

<div id="oChart" style="height:300px; width:100%;">

在JavaScript代码中：

var myChart = echarts.init(document.getElementById("oChart"));
// 基于准备好的dom，初始化echarts实例
var option = {} // 指定图表的配置项和数据
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表

#Code eChartS01：网页中使用eCharts案例

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="http://www.galaxystatistics.com/webTJX/echarts/js/echarts.min.js"></script>
</head><body>
<p>eCharts3官网：http://echarts.baidu.com/index.html</p>
<div id="main" style="width: 600px;height:400px;"></div>
<p/>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        title: {
            text: 'ECharts 入门示例'
            },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body></html>

运行代码

利用eCharts绘图主要是设置“数据”和“设置”两项数据，下面是常用统计图形参数配置案例。

5、散点图 [返回]

散点图(scatter diagram)又称散点分布图，是以一个变量为横坐标，另一变量为纵坐标，利用散点（坐标点）的分布形态反映变量统计关系的一种图形。特点是能直观表现出影响因素和预测对象之间的总体关系趋势。优点是能通过直观醒目的图形方式反映变量间关系的变化形态，以便决定用何种数学表达方式来模拟变量之间的关系。散点图不仅可传递变量间关系类型的信息，也能反映变量间关系的明确程度

数据

var oFemaleData = [//女性数据
    [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], 
    [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], 
    [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2], 
    [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], [147.2, 49.8], 
    [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8]
    ];
var oMaleData = [//男性数据
    [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], 
    [187.2, 78.8], [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], 
    [175.0, 62.0], [184.0, 81.6], [180.0, 76.6], [177.8, 83.6], 
    [192.0, 90.0], [176.0, 74.6], [174.0, 71.0], [184.0, 79.6], 
    [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9]
    ]

配置

var option = {
title : {
    text: '男性女性身高体重分布'
},
tooltip : {
    trigger: 'axis',
    showDelay : 0,
    formatter : function (params) {
        if (params.value.length > 1) {
            return params.seriesName + ' :<br/>'
               + params.value[0] + 'cm ' 
               + params.value[1] + 'kg ';
        }
        else {
            return params.seriesName + ' :<br/>'
               + params.name + ' : '
               + params.value + 'kg ';
        }
    },  
    axisPointer:{
        show: true,
        type : 'cross',
        lineStyle: {
            type : 'dashed',
            width : 1
        }
    }
},
legend: {
    data:['女性','男性']
},
toolbox: {
    show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        saveAsImage : {show: true}
    }
 },
xAxis : [
    {
        type : 'value',
        scale:true,
        axisLabel : {
            formatter: '{value} cm'
        }
    }
],
yAxis : [
    {
        type : 'value',
        scale:true,
        axisLabel : {
            formatter: '{value} kg'
        }
    }
],
series : [
    {
        name:'女性',
        type:'scatter',
        data: oFemaleData,
        markPoint : {
            data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
        },
        markLine : {
            data : [
                {type : 'average', name: '平均值'}
            ]
        }
    },
    {
        name:'男性',
        type:'scatter',
        data: oMaleData,
        markPoint : {
            data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
        },
        markLine : {
            data : [
                {type : 'average', name: '平均值'}
            ]
        }
    }
]
}

数据设置和绘图

注：修改“数据”和“设置”文本框中数组和JSON数据，将代码分布复制粘贴到文章结尾的“数据”和“设置”文本框中，运行“绘图”按钮重新绘图

6、折线图 [返回]

折线图(Line Graph)是用直线段将各数据点连接起来而组成的图形，以折线方式显示数据的变化趋势。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。

数据

var oX = ['周一','周二','周三','周四','周五','周六','周日'];//横轴日期
var oY1 = [11, 11, 12, 14, 12, 13, 10];//纵轴1
var oY2 = [1, -2, 2, 5, 3, 2, 0];//纵轴1

配置

var option = {
title : {text: '未来一周气温变化'},
tooltip : {
    trigger: 'axis'
},
legend: {data:['最高气温','最低气温']},
toolbox: {show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        magicType : {show: true, type: ['line', 'bar']},
        saveAsImage : {show: true}
    }
},
calculable : true,
xAxis : [
    {
        type : 'category',
        boundaryGap : false,
        data : oX
    }
],
yAxis : [
    {
        type : 'value',
        axisLabel : {
            formatter: '{value} °C'
        }
    }
],
series : [
    {
        name:'最高气温',
        type:'line',
        data:oY1,
        markPoint : {
            data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
        },
        markLine : {
            data : [
                {type : 'average', name: '平均值'}
            ]
        }
    },
    {
        name:'最低气温',
        type:'line',
        data:oY2,
        markPoint : {
            data : [
                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
            ]
        },
        markLine : {
            data : [
                {type : 'average', name : '平均值'}
            ]
        }
    }
]
}

数据设置和绘图

7、柱状图 [返回]

柱状图(bar chart)，是一种以长方形的长度为变量的表达图形的统计报告图，由一系列高度不等的纵向条纹表示数据分布的情况，用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。柱状图亦可横向排列，或用多维方式表达。

数据

var oX = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']//月份
var oY1 = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];//蒸发量
var oY2 = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];//降水量

配置

var option = {
title : {
    text: '某地区蒸发量和降水量',
    subtext: '纯属虚构'
},
tooltip : {
    trigger: 'axis'
},
legend: {
    data:['蒸发量','降水量']
},
toolbox: {
    show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        magicType : {show: true, type: ['line', 'bar']},
        saveAsImage : {show: true}
    }
},
calculable : true,
xAxis : [
    {
        type : 'category',
        data : oX
    }
],
yAxis : [
    {
        type : 'value'
    }
],
series : [
    {
        name:'蒸发量',
        type:'bar',
        data:oY1,
        markPoint : {
            data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
        },
        markLine : {
            data : [
                {type : 'average', name: '平均值'}
            ]
        }
    },
    {
        name:'降水量',
        type:'bar',
        data:oY2,
        markPoint : {
            data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
        },
        markLine : {
            data : [
                {type : 'average', name : '平均值'}
            ]
        }
    }
]
}

数据设置和绘图

8、饼图 [返回]

饼图(Pie Graph)显示一个数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列）中各项的大小与各项总和的比例。饼图中的数据点（数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列）显示为整个饼图的百分比。

数据

var oX = ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'];//图例
var oY = [//数据
     {value:335, name:'直接访问'},
     {value:310, name:'邮件营销'},
     {value:234, name:'联盟广告'},
     {value:135, name:'视频广告'},
     {value:1548, name:'搜索引擎'}
     ];

配置

var option = {
title : {
    text: '某站点用户访问来源',
    x:'center'
},
tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
    orient : 'vertical',
    x : 'left',
    data:oX
},
toolbox: {show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        saveAsImage : {show: true}
    }
},
calculable : true,
series : [
    {
        name:'访问来源',
        type:'pie',
        radius : '55%',
        center: ['50%', '60%'],
        data:oY
    }
]
}

数据设置和绘图

9、面积图 [返回]

面积图(Area Chart)面积图又称区域图，强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。堆积面积图还可以显示部分与整体的关系。

数据

var oX = ['周一','周二','周三','周四','周五','周六','周日'];//日期
var oY1 = [1320, 1132, 601, 234, 120, 90, 20];//意向
var oY2 = [30, 182, 434, 791, 390, 30, 10];//预购
var oY3 = [10, 12, 21, 54, 260, 830, 710];//成交

配置

var option = {
title : {
    text: '某楼盘销售情况'
},
tooltip : {
    trigger: 'axis'
},
legend: {
    data:['意向','预购','成交']
},
toolbox: {show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        saveAsImage : {show: true}
    }
},
calculable : true,
xAxis : [
    {
        type : 'category',
        boundaryGap : false,
        data : ['周一','周二','周三','周四','周五','周六','周日']
    }
],
yAxis : [
    {
        type : 'value'
    }
],
series : [
    {
        name:'意向',
        type:'line',
        smooth:true,
        itemStyle: {normal: {areaStyle: {type: 'default'}}},
        data:[1320, 1132, 601, 234, 120, 90, 20] 
    },
    {
        name:'预购',
        type:'line',
        smooth:true,
        itemStyle: {normal: {areaStyle: {type: 'default'}}},
        data:[30, 182, 434, 791, 390, 30, 10]
    },
    {
        name:'成交',
        type:'line',
        smooth:true,
        itemStyle: {normal: {areaStyle: {type: 'default'}}},
        data:[10, 12, 21, 54, 260, 830, 710]
    }
]
}

数据设置和绘图

10、雷达图 [返回]

雷达图分析法（radar chart）亦称综合财务比率分析图法，又可称为戴布拉图、螂蛛网图、蜘蛛图。是日本企业界的综合实力进行评估而采用的一种财务状况综合评价方法。按这种方法所绘制的财务比率综合图状似雷达，故得此名。

数据

var radarIndicator = [
 {text: '销售（sales）', max: 6000},
 {text: '管理（Administration）', max: 16000},
 {text: '信息技术（Information Techology）', max: 30000},
 {text: '客服（Customer Support）', max: 38000},
 {text: '研发（Development）', max: 52000},
 {text: '市场（Marketing）', max: 25000}
 ];
var radarData = [
{
   value : [4300, 10000, 28000, 35000, 50000, 19000],
   name : '预算分配（Allocated Budget）'
},
{
  value : [5000, 14000, 28000, 31000, 42000, 21000],
  name : '实际开销（Actual Spending）'
}
  ];

配置

var option = {
title : {
    text: '预算 vs 开销'
},
tooltip : {
    trigger: 'axis'
},
legend: {
    orient : 'vertical',
    x : 'right',
    y : 'bottom',
    data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
},
toolbox: {show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        saveAsImage : {show: true}
    }
},
polar : [
   {
       indicator : radarIndicator
    }
],
calculable : true,
series : [
    {
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        data : radarData
    }
]
}

数据设置和绘图

11、和弦图 [返回]

和弦图（chord chart）

数据

var legendData = ['阿森纳', '拜仁慕尼黑', '多特蒙德'];
var nodesData = [
            {name:'默特萨克'},
            {name:'厄齐尔'},
            {name:'波多尔斯基'},
            {name:'诺伊尔'},
            {name:'博阿滕'},
            {name:'施魏因施泰格'},
            {name:'拉姆'},
            {name:'克罗斯'},
            {name:'穆勒'},
            {name:'格策'},
            {name:'胡梅尔斯'},
            {name:'魏登费勒'},
            {name:'杜尔姆'},
            {name:'格罗斯克罗伊茨'},
            {name:'阿森纳'},
            {name:'拜仁慕尼黑'},
            {name:'多特蒙德'}
            ]
var linksData = [
            {source: '阿森纳', target: '默特萨克', weight: 0.9, name: '效力'},
            {source: '阿森纳', target: '厄齐尔', weight: 0.9, name: '效力'},
            {source: '阿森纳', target: '波多尔斯基', weight: 0.9, name: '效力'},
            {source: '拜仁慕尼黑', target: '诺伊尔', weight: 0.9, name: '效力'},
            {source: '拜仁慕尼黑', target: '博阿滕', weight: 0.9, name: '效力'},
            {source: '拜仁慕尼黑', target: '施魏因施泰格', weight: 0.9, name: '效力'},
            {source: '拜仁慕尼黑', target: '拉姆', weight: 0.9, name: '效力'},
            {source: '拜仁慕尼黑', target: '克罗斯', weight: 0.9, name: '效力'},
            {source: '拜仁慕尼黑', target: '穆勒', weight: 0.9, name: '效力'},
            {source: '拜仁慕尼黑', target: '格策', weight: 0.9, name: '效力'},
            {source: '多特蒙德', target: '胡梅尔斯', weight: 0.9, name: '效力'},
            {source: '多特蒙德', target: '魏登费勒', weight: 0.9, name: '效力'},
            {source: '多特蒙德', target: '杜尔姆', weight: 0.9, name: '效力'},
            {source: '多特蒙德', target: '格罗斯克罗伊茨', weight: 0.9, name: '效力'},

            // Ribbon Type 的和弦图每一对节点之间必须是双向边
            {target: '阿森纳', source: '默特萨克', weight: 1},
            {target: '阿森纳', source: '厄齐尔', weight: 1},
            {target: '阿森纳', source: '波多尔斯基', weight: 1},
            {target: '拜仁慕尼黑', source: '诺伊尔', weight: 1},
            {target: '拜仁慕尼黑', source: '博阿滕', weight: 1},
            {target: '拜仁慕尼黑', source: '施魏因施泰格', weight: 1},
            {target: '拜仁慕尼黑', source: '拉姆', weight: 1},
            {target: '拜仁慕尼黑', source: '克罗斯', weight: 1},
            {target: '拜仁慕尼黑', source: '穆勒', weight: 1},
            {target: '拜仁慕尼黑', source: '格策', weight: 1},
            {target: '多特蒙德', source: '胡梅尔斯', weight: 1},
            {target: '多特蒙德', source: '魏登费勒', weight: 1},
            {target: '多特蒙德', source: '杜尔姆', weight: 1},
            {target: '多特蒙德', source: '格罗斯克罗伊茨', weight: 1}
        ]

配置

var option = {
title : {
    text: '德国队效力联盟',
    x:'right',
    y:'bottom'
},
tooltip : {
    trigger: 'item',
    formatter: function (params) {
        if (params.indicator2) {    // is edge
            return params.indicator2 + ' ' + params.name + ' ' + params.indicator;
        } else {    // is node
            return params.name
        }
    }
},
toolbox: {
    show : true,
    feature : {
        magicType: {show: true, type: ['force', 'chord']},
        saveAsImage : {show: true}
    }
},
legend: {
    x: 'left',
    data:['阿森纳', '拜仁慕尼黑', '多特蒙德']
},
series : [
    {
        type:'chord',
        sort : 'ascending',
        sortSub : 'descending',
        showScale : false,
        itemStyle : {
            normal : {
                label : {
                    rotate : true
                }
            }
        },
        // 使用 nodes links 表达和弦图
        nodes: nodesData,
        links: linksData
    }
]
}

数据设置和绘图

12、热力图 [返回]

以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。热力图可显性、直观地将网页流量数据分布通过不同颜色区块呈现，给中小网站网页优化与调整提供了有力的参考依据，方便合作网站提高用户体验。

数据

var heatData = [];
for (var i = 0; i < 200; ++i) {
heatData.push([
    50 + Math.random() * 20,
    24 + Math.random() * 16,
    Math.random()
]);
}
for (var j = 0; j < 10; ++j) {
var x = 100 + Math.random() * 16;
var y = 24 + Math.random() * 12;
var cnt = 30 * Math.random();
for (var i = 0; i < cnt; ++i) {
    heatData.push([
        x + Math.random() * 2,
        y + Math.random() * 2,
        Math.random()
    ]);
}
}

配置

var option = {
backgroundColor: '#1b1b1b',
title : {
    text: '热力图结合地图',
    x:'center',
    textStyle: {
        color: 'white'
    }
},
tooltip : {
    trigger: 'item',
    formatter: '{b}'
},
toolbox: {
    show : true,
    orient : 'vertical',
    x: 'right',
    y: 'center',
    feature : {
      saveAsImage : {show: true}
    }
},
series : [
    {
        name: '北京',
        type: 'map',
        mapType: 'china',
        roam: true,
        hoverable: false,
        data:[],
        heatmap: {
            minAlpha: 0.1,
            data: heatData
        },
        itemStyle: {
            normal: {
                borderColor:'rgba(100,149,237,0.6)',
                borderWidth:0.5,
                areaStyle: {
                    color: '#1b1b1b'
                }
            }
        }
    }
]
}

数据设置和绘图

13、矩形树图 [返回]

数据

var oData = [
            {
                name: '三星',
                value: 6
            },
            {
                name: '小米',
                value: 4
            },
            {
                name: '苹果',
                value: 4
            },
            {
                name: '华为',
                value: 2
            },
            {
                name: '联想',
                value: 2
            },
            {
                name: '魅族',
                value: 1
            },
            {
                name: '中兴',
                value: 1
            }
        ]

配置

var option = {
title : {
    text: '手机占有率',
    subtext: '虚构数据'
},
tooltip : {
    trigger: 'item',
    formatter: "{b}: {c}"
},
toolbox: {
    show : true,
    feature : {
        mark : {show: true},
        dataView : {show: true, readOnly: false},
        restore : {show: true},
        saveAsImage : {show: true}
    }
},
calculable : false,
series : [
    {
        name:'矩形图',
        type:'treemap',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    formatter: "{b}"
                },
                borderWidth: 1
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: oData
    }
]
}

数据设置和绘图

14、漏斗图 [返回]

数据

var legendData = ['展现','点击','访问','咨询','订单'];
var oData = [
            {value:60, name:'访问'},
            {value:40, name:'咨询'},
            {value:20, name:'订单'},
            {value:80, name:'点击'},
            {value:100, name:'展现'}
        ]

配置

var option = {
title : {
    text: '漏斗图',
},
tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
    show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        saveAsImage : {show: true}
    }
},
legend: {
    data : legendData
},
calculable : true,
series : [
    {
        name:'漏斗图',
        type:'funnel',
        x: '10%',
        y: 60,
        //x2: 80,
        y2: 60,
        width: '80%',
        // height: {totalHeight} - y - y2,
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort : 'descending', // 'ascending', 'descending'
        gap : 10,
        itemStyle: {
            normal: {
                // color: 各异,
                borderColor: '#fff',
                borderWidth: 1,
                label: {
                    show: true,
                    position: 'inside'
                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                },
                labelLine: {
                    show: false,
                    length: 10,
                    lineStyle: {
                        // color: 各异,
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            emphasis: {
                // color: 各异,
                borderColor: 'red',
                borderWidth: 5,
                label: {
                    show: true,
                    formatter: '{b}:{c}%',
                    textStyle:{
                        fontSize:20
                    }
                },
                labelLine: {
                    show: true
                }
            }
        },
        data:oData
    }
]
}

数据设置和绘图

15、韦恩图 [返回]

数据

var oData = [
            {value:100, name:'访问'},
            {value:50, name:'咨询'},
            {value:20, name:'公共'}
        ];

配置

var option = {
title : {
    text: '访问 vs 咨询'
},
tooltip : {
    trigger: 'item',
    formatter: "{b}: {c}"
},
toolbox: {
    show : true,
    feature : {
        dataView : {show: true, readOnly: false},
        saveAsImage : {show: true}
    }
},
calculable : false,
series : [
    {
        name:'韦恩图',
        type:'venn',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    textStyle: {
                        fontFamily: 'Arial, Verdana, sans-serif',
                        fontSize: 16,
                        fontStyle: 'italic',
                        fontWeight: 'bolder'
                    }
                },
                labelLine: {
                    show: false,
                    length: 10,
                    lineStyle: {
                        // color: 各异,
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            emphasis: {
                color: '#cc99cc',
                borderWidth: 3,
                borderColor: '#996699'
            }
        },
        data:oData
    }
]
}

数据设置和绘图

16、地图 [返回]

数据

var legendData = ['iphone3','iphone4','iphone5'];
var iphoneData3 = [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '天津',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            {name: '重庆',value: Math.round(Math.random()*1000)},
            {name: '河北',value: Math.round(Math.random()*1000)},
            {name: '河南',value: Math.round(Math.random()*1000)},
            {name: '云南',value: Math.round(Math.random()*1000)},
            {name: '辽宁',value: Math.round(Math.random()*1000)},
            {name: '黑龙江',value: Math.round(Math.random()*1000)},
            {name: '湖南',value: Math.round(Math.random()*1000)},
            {name: '安徽',value: Math.round(Math.random()*1000)},
            {name: '山东',value: Math.round(Math.random()*1000)},
            {name: '新疆',value: Math.round(Math.random()*1000)},
            {name: '江苏',value: Math.round(Math.random()*1000)},
            {name: '浙江',value: Math.round(Math.random()*1000)},
            {name: '江西',value: Math.round(Math.random()*1000)},
            {name: '湖北',value: Math.round(Math.random()*1000)},
            {name: '广西',value: Math.round(Math.random()*1000)},
            {name: '甘肃',value: Math.round(Math.random()*1000)},
            {name: '山西',value: Math.round(Math.random()*1000)},
            {name: '内蒙古',value: Math.round(Math.random()*1000)},
            {name: '陕西',value: Math.round(Math.random()*1000)},
            {name: '吉林',value: Math.round(Math.random()*1000)},
            {name: '福建',value: Math.round(Math.random()*1000)},
            {name: '贵州',value: Math.round(Math.random()*1000)},
            {name: '广东',value: Math.round(Math.random()*1000)},
            {name: '青海',value: Math.round(Math.random()*1000)},
            {name: '西藏',value: Math.round(Math.random()*1000)},
            {name: '四川',value: Math.round(Math.random()*1000)},
            {name: '宁夏',value: Math.round(Math.random()*1000)},
            {name: '海南',value: Math.round(Math.random()*1000)},
            {name: '台湾',value: Math.round(Math.random()*1000)},
            {name: '香港',value: Math.round(Math.random()*1000)},
            {name: '澳门',value: Math.round(Math.random()*1000)}
        ];
var iphoneData4 = [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '天津',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            {name: '重庆',value: Math.round(Math.random()*1000)},
            {name: '河北',value: Math.round(Math.random()*1000)},
            {name: '安徽',value: Math.round(Math.random()*1000)},
            {name: '新疆',value: Math.round(Math.random()*1000)},
            {name: '浙江',value: Math.round(Math.random()*1000)},
            {name: '江西',value: Math.round(Math.random()*1000)},
            {name: '山西',value: Math.round(Math.random()*1000)},
            {name: '内蒙古',value: Math.round(Math.random()*1000)},
            {name: '吉林',value: Math.round(Math.random()*1000)},
            {name: '福建',value: Math.round(Math.random()*1000)},
            {name: '广东',value: Math.round(Math.random()*1000)},
            {name: '西藏',value: Math.round(Math.random()*1000)},
            {name: '四川',value: Math.round(Math.random()*1000)},
            {name: '宁夏',value: Math.round(Math.random()*1000)},
            {name: '香港',value: Math.round(Math.random()*1000)},
            {name: '澳门',value: Math.round(Math.random()*1000)}
        ];
var iphoneData5 = [
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '天津',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)},
            {name: '广东',value: Math.round(Math.random()*1000)},
            {name: '台湾',value: Math.round(Math.random()*1000)},
            {name: '香港',value: Math.round(Math.random()*1000)},
            {name: '澳门',value: Math.round(Math.random()*1000)}
        ];

配置

var option = {
title : {
    text: 'iphone销量',
    x:'center'
},
tooltip : {
    trigger: 'item'
},
legend: {
    orient: 'vertical',
    x:'left',
    data:legendData
},
dataRange: {
    min: 0,
    max: 2500,
    x: 'left',
    y: 'bottom',
    text:['高','低'],           // 文本，默认为数值文本
    calculable : true
},
toolbox: {
    show: true,
    orient : 'vertical',
    x: 'right',
    y: 'center',
    feature : {
        dataView : {show: true, readOnly: false},
        saveAsImage : {show: true}
    }
},
roamController: {
    show: true,
    x: 'right',
    mapTypeControl: {
        'china': true
    }
},
series : [
    {
        name: 'iphone3',
        type: 'map',
        mapType: 'china',
        roam: false,
        itemStyle:{
            normal:{label:{show:true}},
            emphasis:{label:{show:true}}
        },
        data:iphoneData3
    },
    {
        name: 'iphone4',
        type: 'map',
        mapType: 'china',
        itemStyle:{
            normal:{label:{show:true}},
            emphasis:{label:{show:true}}
        },
        data:iphoneData4
    },
    {
        name: 'iphone5',
        type: 'map',
        mapType: 'china',
        itemStyle:{
            normal:{label:{show:true}},
            emphasis:{label:{show:true}}
        },
        data:iphoneData5
    }
]
}

数据设置和绘图

在每种图形的“设置”文本框option和“数据”框中，变量设置功能非常丰富，只需要了解一点JSON基层知识，你就通过可以替换数据和更改option设置，定制个性化统计图形。详解参见：eCharts3官网： http://echarts.baidu.com/index.html。

大数据时代，数据可视化方法大大突破了传统统计学中的几类（散点图、折线图、饼图、柱状图）图形。数据可视化是连接用户和数据的桥梁，是我们向用户展示我们的成果的一种手段，有非常广泛的应用和创建途径。

统计图形生成 [返回]

数据

配置

绘图

转载于:https://www.cnblogs.com/cloudtj/p/6097451.html