最近在做一个项目,开始使用的是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简单使用的更多相关文章

  1. echarts简单用法快速上手

    1.html结构 简单说就是一个标签一个图表:2.初始化:var myEcharts = echarts.init(document.getElementById("xxx")): ...

  2. React+Echarts简单的封装套路

    今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install ech ...

  3. echarts简单使用案例

    先上效果图:

  4. echarts简单的折线图

    加jar包 <script src="<%=path %>/js/echarts.min.js"></script> 首先 在jsp页面中 选好 ...

  5. Echarts简单案例

    官网: http://echarts.baidu.com/index.html 文档:  http://echarts.baidu.com/echarts2/doc/doc.html <html ...

  6. Echarts 简单报表系列四:雷达图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. Echarts 简单报表系列三:饼状图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. Echarts 简单报表系列二:折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Echarts 简单报表系列一:柱状图

    见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. mysql存储过程笔记

    http://blog.csdn.net/wangchao0605/article/details/5935988 基本语法 创建存储过程 create procedure sp_name()begi ...

  2. 如何修改svn的密码或重新输入用户名密码

    在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用户名密码自动保存起来以便下次自动使用,不要再次手工输入,而此时(自动保存密码后),svn又不存在一个显式的登陆框了,但是有些时候 ...

  3. shell脚本入门教程(转)

    http://bbs.chinaunix.net/thread-391751-1-1.html http://www.cnblogs.com/suyang/archive/2008/05/18/120 ...

  4. SQL Server LEFT Functions

    LEFT(string, n)函数,是处理字符数据获取子字符串.第一个参数是将要处理的字符串,第二个参数,是从字符串的左边开始截取的字符个数. 例子: DECLARE @string NVARCHAR ...

  5. 自动获取UILabel的宽度高度

    在使用UILabel存放字符串时,经常需要获取label的长宽数据,本文列出了部分常用的计算方法. 1.获取宽度,获取字符串不折行单行显示时所需要的长度 CGSize titleSize = [aSt ...

  6. Linux----快速注释包含特定字符串的行

    常常会需要将程序中的输出语句注释,往往手工非常慢,而且容易漏. 今天研究了 linux  的 sed, 真心好用.. 例子: 将 包含 cout 的语句注释,也就是说包含cout 语句前加入字符串 / ...

  7. Redis - string类型操作

    以个人信息为例操作string类型 设置操作: set:     set key value            创建key-value名值对 setnx:      setnx key value ...

  8. 四则运算<3>

    //李妍 2015.3.12 //四则运算新 #include<iostream> #include<fstream> #include<iomanip> #inc ...

  9. 表视图控制器(TableViewController)(二)

    1 tableView的编辑模式 1.1 问题 表视图可以进入编辑模式,当进入编辑模式就可以进行删除.插入.移动单元等操作,本案例还是使用联系人界面学习如何进入编辑模式,以及进入编辑模式之后的删除.插 ...

  10. MySQL表名、列名区分大小写详解

    前言:出现的问题 在本地数据库上执行修改银行卡没有报错 但线上执行报错 发现是表找不到,发现表名不对应该是card_cardinfo,但本地上没有问题,能正常修改,然后在数据库里测试,发现本地库(wi ...