echarts入门基础，画一个饼状图
注意：一定要自己引入echarts库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas-main{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="canvas-main"> </div>
</body>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
/*echart数据报表*/
function echarCreate() {
var allData = {
"lists":[{"name":"星期一","value":"456"},
{"name":"星期二","value":"321"},
{"name":"星期三","value":"226"},
{"name":"星期四","value":"200"}
],
"status":"1"
}
var fn = {};
fn.init = function () {
fn.drawEchart();
};
fn.drawEchart = function () { if(allData.status){
var option = fn.setOptions();
var myChart = echarts.init(document.getElementById('canvas-main'));
myChart.setOption(option);
} }; /*设置好echarts的option参数*/
fn.setOptions = function () {
var data = [];
for (var i = 0; i < allData.lists.length; i++){
data.push(fn.setData(allData.lists[i].value, allData.lists[i].name));
};
var option = {
tooltip: {/*鼠标跟随效果*/
trigger: 'item',
formatter: "{b}: {d}%"
},
series: [
{
name: '',/*数据名称*/
type: 'pie',
radius: ['31.25%', '60%'], /*相对容器的大小*/
data: data
}
]
};
return option;
}; /*设置echar的样式，主要是改变颜色
value：option中data数据的value
name:option中data数据的name
* normal:正常状态下的样式
* emphasis:鼠标移上的样式
* */
fn.setData = function (value, name, normal, emphasis) {
var Style = {
value: value,
name: name,
itemStyle: { /*设置扇形的样式*/
normal: {
color: normal
},
emphasis: {
color: emphasis
}
},
labelLine: {
normal: {
lineStyle: { /*设置线的样式*/ }
},
emphasis: {
lineStyle: { /*设置线的样式*/ }
}
},
label: {
normal: {
textStyle: {/*文本设置*/ }
},
emphasis: {
textStyle: { }
}
}
}
return Style;
}; return fn;
} echarCreate().init();
</script>
</html>
echarts入门基础，画一个饼状图的更多相关文章
- JavaScript+svg绘制的一个饼状图
结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...
- ECharts学习（2）--饼状图之南丁格尔图
1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
- extjs开发———用extJS简单写一个饼状图
先上效果图: js编写部分简单如下,先插入一个模块,然后给模块中添加内容. var myChart1 = echarts.init(document.getElementById('myChart1' ...
- D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- 【应用】SVG饼状图
<!DOCTYPE html> <html> <head> <title></title> </head> <body o ...
- DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- HTML5-svg圆形饼状图进度条实现原理
<svg width="440" height="440" viewbox="0 0 440 440"> <circle ...
- canvas学习之饼状图
接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...
- 基于matplotlib的数据可视化 - 饼状图pie
绘制饼状图的基本语法 创建数组 x 的饼图,每个楔形的面积由 x / sum(x) 决定: 若 sum(x) < 1,则 x 数组不会被标准化,x 值即为楔形区域面积占比.注意,该种情况会出现 ...
随机推荐
- 常用JS正则表达式
常用JS正则表达式 收集一些常用的JavaScript正则表达式匹配规则,比如匹配电话号码.Email.中文字符.身份证号.邮编.QQ号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水 ...
- Topcoder SRM 626 DIV2 FixedDiceGameDiv2
典型的条件概率题目. 事件A在另外一个事件B已经发生条件下的发生概率.条件概率表示为P(A|B),读作“在B条件下A的概率”. 若只有两个事件A,B,那么, P(A|B)=P(AB)/P(B) 本题的 ...
- [Cocos2D-x For WP8]ParallaxNode视差
视差就是从有一定距离的两个点上观察同一个目标所产生的方向差异.从目标看两个点之间的夹角,叫做这两个点的视差角,两点之间的距离称作基线.只要知道视差角度和基线长度,就可以计算出目标和观测者之间的距离.游 ...
- [BZOJ2792][Poi2012]Well
2792: [Poi2012]Well Time Limit: 40 Sec Memory Limit: 64 MBSubmit: 137 Solved: 61[Submit][Status][D ...
- 李洪强漫谈iOS开发[C语言-051]-判断整数位数
- 关于iOS多线程的总结
关于iOS多线程的总结 在这篇文章中,我将为你整理一下 iOS 开发中几种多线程方案,以及其使用方法和注意事项.当然也会给出几种多线程的案例,在实际使用中感受它们的区别.还有一点需要说明的是,这篇 ...
- Hibernate+Struts2进行数据的修改
1.先把userid传给修改的页面 2.跳转到修改的页面 3.用request接收传入输入需改信息的页面 传到action Action, 通过request获取id service层 DAO层 & ...
- R中list对象属性以及具有list性质的对象
R语言list的特点:It has length, [[ and [ methods, and is recursive because list can contain other list!上图显 ...
- ACM Steps 2.1.4
Largest prime factor Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 导入excle数据将excle数据插入到数据库
实现功能是,用户可以直接导入对应数据,或者用户下载模板,填写数据,导入模板数据.easyui实现 前台页面 { text : '日清导入', iconCls : 'icon-print', handl ...