最近在做一个项目,开始使用的是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. R.java不能自动更新

    1. The type R is already defined. (很多时候我们在导入其他人的程序的时候,会遇到这个错误) 通常在project里有两个R.java,一个在src,一个在gen,通常 ...

  2. openstack context

    之前一直不知道context模块中存储的是什么东西,这回看一下代码: 其中最主要的类是:RequestContext: class RequestContext(object):   "&q ...

  3. php5.2 连接 SQL Server2008

    如果你见到下面这一段输出的话,那么你有福了!!!! Array ( [0] => Array ( [0] => IMSSP [SQLSTATE] => IMSSP [1] => ...

  4. 第一个PHP程序

    <html> <head> <title><?php echo"这是第一个php程序"?></title> <st ...

  5. explicit用法

    explicit用来防止由构造函数定义的隐式转换. 要明白它的作用,首先要了解隐式转换:可以用单个实参来调用的构造函数定义了从形参类型到该类类型的一个隐式转换. 例如: class things { ...

  6. ajax 向后台传对象

    $.ajax({ url : "accreditSurveyInfo.action", data : $("form").serialize(), dataTy ...

  7. dos快速通道

    要在文件夹的右键菜单中添加“命令提示符”选项.在注册表HKEY_CLASSES_ROOT\Directory\shell分支下新建一项“CommandPrompt”,修改右侧窗格中的“默认”键值为“命 ...

  8. 配置Hadoop的Eclipse开发环境

    前言 在先前的文章中,已经介绍了如何在Ubuntu Kylin操作系统下搭建Hadoop运行环境,而现在将在之前工作的基础上搭建Eclipse开发环境. 配置 开发环境:Eclipse 4.2 其他同 ...

  9. mysql in和or查询效率

    http://blog.chinaunix.net/uid-20639775-id-3416737.html 上面链接博主的文章分析结论: or在没有索引的情况下呈指数增长,in则是正常递增. or的 ...

  10. Codeforces Round #126 (Div. 2)

    A. Cinema 假设当前要的位置为\((x, y)\),如果枚举答案的横坐标,那么每次找离\(y\)最近的纵坐标. 如果占用了位置\((x,y)\),需要要更新第\(x\)行的信息,而占用位置\( ...