注意：一定要自己引入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入门基础，画一个饼状图的更多相关文章

  1. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  2. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  3. extjs开发———用extJS简单写一个饼状图

    先上效果图: js编写部分简单如下,先插入一个模块,然后给模块中添加内容. var myChart1 = echarts.init(document.getElementById('myChart1' ...

  4. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  5. 【应用】SVG饼状图

    <!DOCTYPE html> <html> <head> <title></title> </head> <body o ...

  6. DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  7. HTML5-svg圆形饼状图进度条实现原理

    <svg width="440" height="440" viewbox="0 0 440 440"> <circle ...

  8. canvas学习之饼状图

    接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...

  9. 基于matplotlib的数据可视化 - 饼状图pie

    绘制饼状图的基本语法 创建数组 x 的饼图,每个楔形的面积由 x / sum(x) 决定: 若 sum(x) < 1,则 x 数组不会被标准化,x 值即为楔形区域面积占比.注意,该种情况会出现 ...

随机推荐

  1. ACM 阶乘之和

    阶乘之和 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 给你一个非负数整数n,判断n是不是一些数(这些数不允许重复使用,且为正数)的阶乘之和,如9=1!+2!+3! ...

  2. 《DON'T MAKE ME THINK》/《点石成金访客至上的网页设计秘笈》 读书笔记

    1.web页面要尽可能简单,让用户不用思考就能知道页面的功能,如果要进行一些崭新的.开拓性的或者非常复杂的页面设计时, 此时要利用页面元素的外观.精心选择的名称.页面布局以及少量仔细斟酌过的文字,使页 ...

  3. 【BZOJ】2277: [Poi2011]Strongbox

    题意 有一个密码箱,\(0\)到\(n-1\)中的某些整数是它的密码.如果\(a\)和\(b\)都是它的密码,那么\((a+b)%n\)也是它的密码(\(a,b\)可以相等).某人试了\(k\)次密码 ...

  4. IEqualityComparer<T>

    在linq中使用union和distinct都不起作用,结果发现必须传入一个实现了IEqualityComparer<T>的比较器 public class CompareUser : I ...

  5. Pop3_解决PKIX：unable to find valid certification path to requested target 的问题

    最近有公司pop3协议接收pp邮箱出现异常,连不上服务器,错误内容: e: sun.security.validator.ValidatorException: PKIX path building ...

  6. XML 参考：XML基础 XML 简介

    XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...

  7. XML CDATA节点

    术语CDATA指字符数据.CDATA定义为文本块,但识别为标记. 预定义实体的同位素;,密度,并且与放大器;需要打字并且通常难以阅读的标记.在这种情况下,CDATA部分都可以使用.通过使用CDATA节 ...

  8. 用java页面下载图片

    try { //根据String形式创建一个URL对象 String filePath = materialProductWorks.getDownloadImageUrl(); URL url = ...

  9. My租房网

    阶段一:采用分页top关键字进行查询 实现6条~~10条出租信息 阶段2:查询指定客户发布的租房信息 查询客户张三的信息,使用连接查询实现. 阶段3:按区县制作房屋出租清单

  10. html5语义标签