数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图。

1.堆积柱状图:

http://echarts.baidu.com/examples/editor.html?c=bar-stack

以上的类型的颜色是自动分配的,stack属性可以将同一类型的数据放在一个矩形图中。

2.扇形图

http://echarts.baidu.com/examples/editor.html?c=pie-legend

1---->随机生成扇形图中的

2---->随机生成对应名字的数量

3---->显示几个名字在图形中

function代码可以改为下面代码样式,来传入自己的数据:

function genData(count) {
    var nameList = [
        ‘儿童‘, ‘无标记‘, ‘灾难‘, ‘戏曲‘, ‘传记‘, ‘战争‘, ‘家庭‘, ‘历史‘, ‘科幻‘, ‘悬疑‘, ‘武侠‘, ‘冒险‘, ‘古装‘, ‘鬼怪‘, ‘爱情‘, ‘动作‘, ‘动画‘, ‘奇幻‘, ‘剧情‘, ‘惊悚‘, ‘犯罪‘, ‘运动‘, ‘短片‘, ‘喜剧‘,‘同性‘,‘恐怖‘
    ];
    var legendData = [];
    var seriesData = [];
    var list_1=[4,20,2,2,2,14,16,23,11,39,17,15 ,64,2,137,22,8,36,231,9,12,1,14,18,1,1]
    var selected = {};
    for (var i = 0; i < 26; i++) {
        name =nameList[i];
        legendData.push(name);
        seriesData.push({
            name: name,
            value: list_1[i]
        });
        selected[name] = i <27;
    }

    return {
        legendData: legendData,
        seriesData: seriesData,
        selected: selected
    };

}

3.嵌套环形图

http://echarts.baidu.com/examples/editor.html?c=pie-nest

selected表示哪一个被选中,上面的data表示内圆,是外面环的总和,从上到下要按顺序排列即可(见上图),当然你也可以不这样排列,但是这样就得不到对应的效果图。

原文地址:https://www.cnblogs.com/ybf-yyj/p/8485144.html

时间: 2024-08-29 17:41:32

数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)的相关文章

数据输入——生成你需要的echart图(世界地图,气泡图)

上一篇文章介绍了:堆积柱状图.扇形图.嵌套环形图,现在来介绍一下:世界地图和气泡图 1.世界地图 http://echarts.baidu.com/examples/editor.html?c=map-world-dataRange 这个就不多做介绍了,大家看图就可以了,颜色越深表示value越大,白色表示data中没有这个国家. 2.气泡图 按照这张图的意思来解释图中的1 2 3 4 5 1.[x轴数据(无需定义范围),y轴数据(无需定义范围),气泡大小,对应的国家(鼠标放上去才会显示),年份

echart 折线图、柱状图、饼图、环形图颜色修改

之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy xAxis: { type: 'category', boundaryGap: false, data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上'] }, yAxis: { type: 'value' }, series: [ { name:'员工

Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&amp;&amp;两个echarts详细教程(柱状图,南丁格尔图)

Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化.   1.npm

写总结写报告 环形图的制作与应用

人一直追求完美,什么是美,文字的表现力不如语言,但是文图结合就不一样了,我想谁也不喜欢看着枯燥的文字,尤其是报告中,数字多了更让人觉得反感,作报告的时候PPT展示的时候,总不能就写个标题,或者全部都是一页页的文字吧,数据不仅仅是靠数字表现,因此伟大的人类发明了柱状图,圆饼图,折线图,环状图等等. 这样就可以一眼准确的看出系列总数和比例,这就又涉及到了一个词,"比例",比例如果只单调的罗列数据,当我们看到数字的时候并不会有什么感觉,或大或小,就好比我们花钱,为什么花人民币的时候心疼,而刷

Spark Structured Streaming框架(2)之数据输入源详解

Spark Structured Streaming目前的2.1.0版本只支持输入源:File.kafka和socket. 1. Socket Socket方式是最简单的数据输入源,如Quick example所示的程序,就是使用的这种方式.用户只需要指定"socket"形式并配置监听的IP和Port即可. val scoketDF = spark.readStream .format("socket") .option("host","

C语言数据输入与输出

1 概论 C语言提供了跨平台的数据输入输出函数scanf()和printf()函数,它们可以按照指定的格式来解析常见的数据类型,例如整数,浮点数,字符和字符串等等.数据输入的来源可以是文件,控制台以及网络,而输出的终端可以是控制台,文件甚至是网页. 2 数据输出 从第一个C语言程序中,就使用了跨平台的库函数printf实现将一段文字输出到控制台,而实际上,printf()不仅可以将数据按照指定的格式输出到控制台,还可以是网页或者是指定的文件中,printf()函数执行的返回结果是输出字符的个数.

PHP实现动态生成饼状图、柱状图和折线图(转载)

PHP在图像操作方面的表现非常出色,我们只需借助可以免费得到的GD库便可以轻松实现图.表勾画.下面将分别介绍PHP实现的饼状图.折线图和柱状图以 及他们的使用方法,这几段代码的特点就是不需要再把它们复制到你的代码之中,只需要把计算得到的数据作为参数传入,即可得到相应的图形效果 代码中所有使用的函数的说明,请参见php开发文档 饼状图 设计思路 饼状图表对于查看一个值占总值的百分比是一个好的方法.我们就用PHP来实现一个饼形图表. 它的设计思想是: 1 接受参数,得到所有数值的和,得到每一个值占数

数据输入输出格式

数据输入格式 数据输入格式(InputFormat)用于描述MR作业的输入规范,主要功能:输入规范检查(比如输入文件目录的检查).对数据文件进行输入切分和从输入分块中将数据记录逐一读取出来.并转化为Map的输入键值对. Hadoop中最常用的数据输入格式包括:TextInputFormat 和 KeyValueInputFormat. 1)TextInputFormat 是系统默认的数据输入格式,可以将文件的每一行解析成一个键值对.其中,Key是当前行在整个文件中的字节偏移量,而Value就是该

Web 软件测试 Checklist 应用系列,第 1 部分: 数据输入

Web 软件测试 Checklist 应用系列,第 1 部分: 数据输入 本文为系列文章"Web 软件测试 Checklist 应用系列"中的第一篇.该系列文章旨在阐述 Checklist(检查清单)在 Web 软件产品测试中的应用,以帮助您了解如何利用 Checklist 这种重要的测试手段,更高效的寻找 Web 产品中的 defect(缺陷).Checklist 汇集了有经验的测试人员总结出来的最有效的测试想法,可以直接有效的指导测试工作,开阔测试人员的思路,能够快速的发现产品的缺