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 值即为楔形区域面积占比.注意,该种情况会出现 ...
随机推荐
- BZOJ1798[Ahoi2009]Seq 维护序列seq 题解
题目大意: 有长为N的数列,有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列中的一段数全部加一个值; (3)询问数列中的一段数的和,由于答案可能很大,你只需输出这个数模P的值. ...
- AFNetworking 2.0 出现Use of undeclared identifier AFURLSessionManager错误
当向下面使用时会出现错误 #import "AFNetworking.h" #import "AFURLSessionManager.h" AFURLSessi ...
- Codeforces Round #207 (Div. 1) A. Knight Tournament(STL)
脑子又卡了...来一发set的,STL真心不熟. #include <stdio.h> #include <string.h> #include <iostream> ...
- Codeforces Round #160 (Div. 2) D. Maxim and Restaurant(DP)
题目链接 想了挺久,枚举每一件物品,当做关键物品,假设再加这一件物品,就>=c了,把剩下的物品背一下包,dp[i][j]表示i个物品可以组成重量j的个数. 这样就可以知道前面放i件,后边肯定放n ...
- BestCoder Round #77
T1 xiaoxin juju needs help 计算组合数然后多重集排列乱搞,注意判无解情况(TM我就判错然后FST了). #include<cstdio> #include< ...
- ThinkPHP3.2.3--相对路径的写法
window.location.href='/index.php/Home/Manager/login' 以 / 开始,而不是 ./
- minicom使用
http://blog.chinaunix.net/uid-9525959-id-2001815.html 创建log文件 : minicom -C my_capturefile
- 初识socket
socket也叫套接字,用于通信的一个句柄,描述IP与端口信息,程序通过套接字可以向网络发出请求或者应答网络请求. socket起源与unix,而unix/Linux基本哲学之一就是”一切皆文件“,对 ...
- 淘宝玉伯引发Web前后端研发模式讨论
淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...
- Maching Learning 学习资料
A星(A*, A Star)算法详解 CSDN技术主题月----“深度学习”代码笔记专栏 UC Berkeley CS188 Intro to AI