注意：一定要自己引入echarts库

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. #canvas-main{
  8. width: 600px;
  9. height: 400px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div id="canvas-main">
  15.  
  16. </div>
  17. </body>
  18. <script type="text/javascript" src="js/echarts.js"></script>
  19. <script type="text/javascript">
  20. /*echart数据报表*/
  21. function echarCreate() {
  22. var allData = {
  23. "lists":[{"name":"星期一","value":"456"},
  24. {"name":"星期二","value":"321"},
  25. {"name":"星期三","value":"226"},
  26. {"name":"星期四","value":"200"}
  27. ],
  28. "status":"1"
  29. }
  30. var fn = {};
  31. fn.init = function () {
  32. fn.drawEchart();
  33. };
  34. fn.drawEchart = function () {
  35.  
  36. if(allData.status){
  37. var option = fn.setOptions();
  38. var myChart = echarts.init(document.getElementById('canvas-main'));
  39. myChart.setOption(option);
  40. }
  41.  
  42. };
  43.  
  44. /*设置好echarts的option参数*/
  45. fn.setOptions = function () {
  46. var data = [];
  47. for (var i = 0; i < allData.lists.length; i++){
  48. data.push(fn.setData(allData.lists[i].value, allData.lists[i].name));
  49. };
  50. var option = {
  51. tooltip: {/*鼠标跟随效果*/
  52. trigger: 'item',
  53. formatter: "{b}: {d}%"
  54. },
  55. series: [
  56. {
  57. name: '',/*数据名称*/
  58. type: 'pie',
  59. radius: ['31.25%', '60%'], /*相对容器的大小*/
  60. data: data
  61. }
  62. ]
  63. };
  64. return option;
  65. };
  66.  
  67. /*设置echar的样式，主要是改变颜色
  68. value：option中data数据的value
  69. name:option中data数据的name
  70. * normal:正常状态下的样式
  71. * emphasis:鼠标移上的样式
  72. * */
  73. fn.setData = function (value, name, normal, emphasis) {
  74. var Style = {
  75. value: value,
  76. name: name,
  77. itemStyle: { /*设置扇形的样式*/
  78. normal: {
  79. color: normal
  80. },
  81. emphasis: {
  82. color: emphasis
  83. }
  84. },
  85. labelLine: {
  86. normal: {
  87. lineStyle: { /*设置线的样式*/
  88.  
  89. }
  90. },
  91. emphasis: {
  92. lineStyle: { /*设置线的样式*/
  93.  
  94. }
  95. }
  96. },
  97. label: {
  98. normal: {
  99. textStyle: {/*文本设置*/
  100.  
  101. }
  102. },
  103. emphasis: {
  104. textStyle: {
  105.  
  106. }
  107. }
  108. }
  109. }
  110. return Style;
  111. };
  112.  
  113. return fn;
  114. }
  115.  
  116. echarCreate().init();
  117. </script>
  118. </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. BZOJ1798[Ahoi2009]Seq 维护序列seq 题解

    题目大意: 有长为N的数列,有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列中的一段数全部加一个值; (3)询问数列中的一段数的和,由于答案可能很大,你只需输出这个数模P的值. ...

  2. AFNetworking 2.0 出现Use of undeclared identifier AFURLSessionManager错误

    当向下面使用时会出现错误 #import "AFNetworking.h" #import "AFURLSessionManager.h" AFURLSessi ...

  3. Codeforces Round #207 (Div. 1) A. Knight Tournament(STL)

    脑子又卡了...来一发set的,STL真心不熟. #include <stdio.h> #include <string.h> #include <iostream> ...

  4. Codeforces Round #160 (Div. 2) D. Maxim and Restaurant(DP)

    题目链接 想了挺久,枚举每一件物品,当做关键物品,假设再加这一件物品,就>=c了,把剩下的物品背一下包,dp[i][j]表示i个物品可以组成重量j的个数. 这样就可以知道前面放i件,后边肯定放n ...

  5. BestCoder Round #77

    T1 xiaoxin juju needs help 计算组合数然后多重集排列乱搞,注意判无解情况(TM我就判错然后FST了). #include<cstdio> #include< ...

  6. ThinkPHP3.2.3--相对路径的写法

    window.location.href='/index.php/Home/Manager/login' 以 / 开始,而不是 ./

  7. minicom使用

    http://blog.chinaunix.net/uid-9525959-id-2001815.html 创建log文件 : minicom -C my_capturefile

  8. 初识socket

    socket也叫套接字,用于通信的一个句柄,描述IP与端口信息,程序通过套接字可以向网络发出请求或者应答网络请求. socket起源与unix,而unix/Linux基本哲学之一就是”一切皆文件“,对 ...

  9. 淘宝玉伯引发Web前后端研发模式讨论

    淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...

  10. Maching Learning 学习资料

    A星(A*, A Star)算法详解 CSDN技术主题月----“深度学习”代码笔记专栏 UC Berkeley CS188 Intro to AI