最近论文需要一些比较直观的图表, 发现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表示内圆,是外面环的总和,从上到下要按顺序排列即可(见上图),当然你也可以不这样排列,但是这样就得不到对应的效果图。

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

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

    上一篇文章介绍了:堆积柱状图.扇形图.嵌套环形图,现在来介绍一下:世界地图和气泡图 1.世界地图 http://echarts.baidu.com/examples/editor.html?c=map ...

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

    之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...

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

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  4. Qt编写自定义控件41-自定义环形图

    一.前言 自定义环形图控件类似于自定义饼状图控件,也是提供一个饼图区域展示占比,其实核心都是根据自动计算到的百分比绘制饼图区域.当前环形图控件模仿的是echart中的环形图控件,提供双层环形图,有一层 ...

  5. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

  6. C语言实现数据机构链表的基本操作(从键盘输入生成链表、读取数组生成链表)

    利用头插法实现逆置 下面简单介绍一下,算法思想结合图示看 算法思想:"删除"头结点与链表其他结点的原有联系(即将头结点的指针置空),再逐个插入逆置链表的表头(即"头插&q ...

  7. 模拟Select-Options对象实现多项数据输入功能

       模拟Select-Options对象实现多项数据输入功能 Select-Options对象可以同时输入多项值并将所输入数据存入内表以供程序使用,不过Select-Options的功能有一定的局限 ...

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

    Web 软件测试 Checklist 应用系列,第 1 部分: 数据输入 本文为系列文章"Web 软件测试 Checklist 应用系列"中的第一篇.该系列文章旨在阐述 Check ...

  9. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

随机推荐

  1. IntelliJ IDEA 2017版 开发SpringBoot的全局配置文件使用

    一.全局配置文件 描述:     Spring Boot项目使用一个全局的配置文件application.properties或者是application.yml,在resources目录下或者类路径 ...

  2. GitHub 安装配置

    1:到 Github 注册 页面中注册,填写用户名.邮箱和密码 选择免费服务 步骤三可以根据自身喜好勾选或者直接跳过 2.1.2 创建远程仓库 创建完账号后,可以开始创建仓库 但是这里我们还没有验证邮 ...

  3. Word图片上传控件(WordPaster)更新-2.0.15版本

    更新说明: 1.   增加对webp图片的支持,支持微信公众号图片的下载. 效果参考:http://www.ncmem.com/doc/view.aspx?id=9761f8ce4fe04d0ab0f ...

  4. 下拉菜单  - - css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. Americans are usually tolerant (Listen speak of Unit 2)

    Americans are usually 1) tolerant of non-native speakers who have some 2) trouble understanding Engl ...

  6. Windows Server 2008 R2远程桌面服务配置和授权激活

    远程桌面服务安装好之后使用的是120天临时授权,所以会跳出以下提示,我们介绍远程桌面授权的激活. 现在我们使用命令 mstsc /admin 强制登录服务器 需要在“远程桌面服务”--安装“远程桌面授 ...

  7. 在AbpZero中hangfire后台作业的使用——hangfire的调度

    在abpzero框架中,hangfiire通过依赖注入来进行接口的调用 hangfire的事件处理分为以下几种: 1.基于队列的任务处理(Fire-and-forget jobs) var jobId ...

  8. 使用ABP框架踩过的坑系列3

    从架构角度来讲,ApplicationService究竟应该如何定位,一种说法是直接对应用例UseCase, 也就是直接对应UI, 这个UI是广义的,不仅仅是浏览器的页面,也包括API调用.还是从我曾 ...

  9. MVC中使用Hangfire执行定时任务

    需求描述 项目中有一个通知公告的功能,在后台管理员添加公告后需要推送消息给所有注册用户,让其查看消息.消息推送移动端采用极光推送,但是消息在何时发送是个问题,比如说有一个重要的会议通知,可能希望在会议 ...

  10. 网易云复盘:云计算前端这一年(AngularJS粉慎入)

    本文由  网易云发布. 作者:赵雨森 2017年的前端已然没有剧烈的变动,但发展势头仍然不减.语言.标准.框架和库逐渐稳定和完善,各团队再也不用花大把精力放在造轮子上,而更多的是去积累所需的组件库.开 ...