echarts简单使用
最近在做一个项目,开始使用的是acharts,在电脑端访问的效果还真不错,但是放到手机端访问就惨了,尤其是iOS系统上,各种不兼容,后来准备换收费的hightcharsts,无意间发现有个免费的echarts,后来研究了一下,效果还可以,可是用使用。手机端访问也没问题。下面是一些简单的设置参数,仅供参考:在http://echarts.baidu.com/doc/example/pie1.html上可以直接执行。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
option = { //是否可拖动 calculable: false, //设置数据颜色 color: ['#fc694b', '#7179cb', '#79c850', '#14b8f6', '#ffb65d', '#ffd967', '#78d9fe', '#9a9792', '#a6c96a'], series: [ { name: '访问来源', type: 'pie', radius: '60%', //半径 center: ['50%', '50%'], selectedMode: 'single', //单选,突出 selectedOffset: 10, //选中扇区偏移量 //设置lable长度 itemStyle: { normal: { labelLine: { length: 3 } } }, data: [ { value: 335, name: '直接访问', selected: true }, { value: 310, name: '邮件营销', selected: false }, { value: 234, name: '联盟广告', selected: false }, { value: 135, name: '视频广告', selected: false }, { value: 1548, name: '搜索引擎', selected: false } ] } ]}; |
echarts简单使用的更多相关文章
- echarts简单用法快速上手
1.html结构 简单说就是一个标签一个图表:2.初始化:var myEcharts = echarts.init(document.getElementById("xxx")): ...
- React+Echarts简单的封装套路
今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install ech ...
- echarts简单使用案例
先上效果图:
- echarts简单的折线图
加jar包 <script src="<%=path %>/js/echarts.min.js"></script> 首先 在jsp页面中 选好 ...
- Echarts简单案例
官网: http://echarts.baidu.com/index.html 文档: http://echarts.baidu.com/echarts2/doc/doc.html <html ...
- Echarts 简单报表系列四:雷达图
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Echarts 简单报表系列三:饼状图
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Echarts 简单报表系列二:折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Echarts 简单报表系列一:柱状图
见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- Jdk配置串在profile中
JAVA_HOME=/home/will/appSource/jdk1.7.0_25PATH=$JAVA_HOME/bin:$PATHCLASSPATH=.:$JAVA_HOME/lib/dt.jar ...
- python3爬虫再探之豆瓣影评数据抓取
一个关于豆瓣影评的爬虫,涉及:模拟登陆,翻页抓取.直接上代码: import re import time import requests import xlsxwriter from bs4 imp ...
- 【LeetCode OJ】Binary Tree Maximum Path Sum
Problem Link: http://oj.leetcode.com/problems/binary-tree-maximum-path-sum/ For any path P in a bina ...
- 【LeetCode OJ】Linked List Cycle
Problem link: http://oj.leetcode.com/problems/linked-list-cycle/ We set two pointers: the faster poi ...
- 在config文件输入特殊字符
今天遇到要在config文件中配置一个包含引号,尖括号的特殊字符的问题,config文件不支持转义字符,我开始发动自己的脑子想,想出一个蹩脚的方法,用其他的字符替换比如&,?,!,问题倒是解决 ...
- 自定义NavigationBar
[self.navigationController.navigationBarsetHidden:YES]; CGRect screenRect = [[UIScreen mainScreen] b ...
- 20145210 《Java程序设计》第08周学习总结
第十四章 NIO与NIO2 14.1 认识NIO •NIO概述 •NIO使用频道来衔接数据结点 •在处理数据时,NIO可以让你设定缓冲区容量 •Channel架构与操作 •isOpen():确认Cha ...
- 8、C#基础整理(数组和冒泡排序)
数组 概念:定义一组同类型的指定个数的变量,索引从0开始 例: ];//定义一组有10个数据的数组 shuname[] = ; Console.WriteLine(shuname[]);//打印出1 ...
- 9、网页制作Dreamweaver(jQuery基础:事件)
事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...
- 4、网页制作Dreamweaver(样式表CSS)
样式表style 制作一个风格统一的网页,需要样式表对颜色.字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的. 样式表有两种引用的方法:一种是直接写在html的< ...