使用echarts绘制条形图和扇形图

简单举例说明下echarts如何绘制条形图和扇形图

代码示例

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>echarts绘制条形图和扇形图</title>

	<script src="echarts.js"></script>

</head>

<body>

	<div id="chart1" style="width: 500px;height:500px;float: left;"></div>

	<div id="chart2" style="width: 500px;height:500px;float: right;"></div>

	<script>

		var mychart1=echarts.init(document.getElementById('chart1'),'light');

		// 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [40, 20, 36, 10, 10, 20]

            }]

        };

        // 使用指定的配置项和数据显示条形图表1。

        mychart1.setOption(option);

        //显示扇形图表2

        var mychart2=echarts.init(document.getElementById('chart2'),'light');

        var option2 = {

            title: {

                text: 'ECharts 扇形图示例'

            },

            tooltip: {},

            series: [{

                type: 'pie',

                data: [

                    {value:1, name:'视频广告'},

                    {value:2, name:'联盟广告'}

                ]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        mychart2.setOption(option2);

	</script>

</body>

</html>

展示的效果如下图

注意

扇形图的数据中,value值和图形百分比的关系是，单个value/所有value的综合*100%

使用echarts绘制条形图和扇形图的更多相关文章

  1. 百度echarts扇形图每个区块增加点击事件

    效果图:操作人员要求 :我想看这个扇形图对应的 页面信息,给我加个链接跳转:原先的chart.js发现没有api,后来改用百度的echart.js <!DOCTYPE html> < ...

  2. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  3. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  4. Echarts生成饼状图、条形图以及线形图 JS封装

    1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...

  5. 前端 | 使用 ECharts 绘制关系图

    0 需求 做的项目需要画一个关系图,主要需求如下: 需要展示6种对象之间的关系:数据机构 数据 合约 模型 计算机构 应用 支持突出显示6种对象中的某一种的所有对象 支持Top x子图功能.top x ...

  6. 使用ECharts绘制网址径向树状图

    an.rustfisher.com有很多内容,很多页面.如果用一个树状图把所有页面展示出来会是什么效果? 第一时间想到了ECharts. 最后效果: https://an.rustfisher.com ...

  7. 【基于WinForm+Access局域网共享数据库的项目总结】之篇二：WinForm开发扇形图统计和Excel数据导出

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  8. 分析实现Android自定义View之扇形图

    继承View基类,画了这样的扇形图 直接来步骤吧 (参考了GcsSloop的教程) 1.分析 自定义View需要认真的分析下,里面还是会用到一些数学知识 首先是扇形该怎么表现 1. 扇形的外观是个圆弧 ...

  9. Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

随机推荐

  1. 优化sql技巧

    当表很大的时候可以设计冗余字段,避免与大表连表查询造成性能低下 比如日志表和用户表,日志表通常到后期会相当的大可以做一个username的冗余字段,避免查看username的时候去和user表关联 当 ...

  2. XCOPY——目录复制命令

    XCOPY——目录复制命令 1．功能:复制指定的目录和目录下的所有文件连同目录结构. 2．类型:外部命令 3．格式:XCOPY [源盘:]〈源路径名〉[目标盘符:][目标路径名][/S][/V][/E ...

  3. asyncapi 指南

    asyncapi 是可以用来创建异步机器可读定义api的指南,我们可以用来创建事件驱动的架构. 说明 asyncapi 的定义类似openapi,目前指南版本为2.0,很值得学习下 参考资料 http ...

  4. benchmarkdotnet dotnet 基准测试类库试用(一)

    使用基准测试对于我们应用的性能优化是比较好的方式,可以快速看出优化的结果同时可以给出报告结果 benchmarkdotnet 是dotnet 版本的一个工具,以下是一个简单的试用 环境准备 我使用的是 ...

  5. ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备

    前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...

  6. 关于golang-mod的使用方法

    简单粗暴仅需要三步即可 $ go mod download $ go mod tidy $ go build -v 这里保持默认什么都不用添加,项目无需在 gopath里面 Vendoring mod ...

  7. nginx 访问控制之 限速

    nginx限速可以通过 ngx_http_limit_conn_module 和 ngx_http_limit_req_module 模块来实现限速的功能. 一.ngx_http_limit_conn ...

  8. pandas把'<m8[ns]'类型转换为int类型进行运算

    工作中经常碰到两列数据为date类型,当这两列数据相减或者相加时,得到天数,当运用这个值进行运算会报错:ufunc true_divide cannot use operands with types ...

  9. Jmeter(四十七)_性能测试统计超时率

    概述 今天做一个性能测试的案例.需求中给出并发人数和业务时间段.根据2,5,8原则,统计响应超时率 实际场景 1:登录--考勤打卡--退出 2:并发人数200人,业务持续时间5分钟 3:要求登录响应时 ...

  10. SpringBoot(十五)：SpringBoot2.x集成eureka实现注高可用册中心，高可用的服务器提供者，以及消费者示例

    本文代码请参考<https://github.com/478632418/springcloud-eureka-server-client/tree/master/mall>.<ht ...