最近在做一个项目,开始使用的是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. 扩展jQuery easyui datagrid增加动态改变列编辑的类型

    $.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $. ...

  2. Android Priority Job Queue (Job Manager)(一)

     Android Priority Job Queue (Job Manager)(一) 一.为什么要引入Android Priority Job Queue (Job Manager)?如今的A ...

  3. HDU 4386

    http://acm.hdu.edu.cn/showproblem.php?pid=4386 题意:给四条边长,问能否组成四边形,如果能,求最大面积 求最大面积用海伦公式的四边形推广,p=(a+b+c ...

  4. 查看linux版本时32位的还是64位的

    一. [root@wuy2 etc]# getconf LONG_BIT [root@wuy2 etc]# getconf WORD_BIT (32位的系统中int类型和long类型一般都是4字节,6 ...

  5. 第二个Sprint冲刺第五天

    讨论地点:qq 讨论成员:邵家文.李新.朱浩龙.陈俊金 今天工作:测试了数据的传输,总共用了三个方案,其中两个失败了,一个成功了. 开发感悟:今天吃完饭就赶着发博客了,最近有几个朋友令我特别的烦,翻脸 ...

  6. KSM剖析——Linux 内核中的内存去耦合

    简介: 作为一个系统管理程序(hypervisor),Linux® 有几个创新,2.6.32 内核中一个有趣的变化是 KSM(Kernel Samepage Merging)  允许这个系统管理程序通 ...

  7. lanuchy快捷操作

    down arrow: display history shift+delete: remove the item from the distory

  8. 安装GD库解决ThinkPHP 验证码Call to undefined function Think\imagecreate()出错

    在php中imagecreate函数是一个图形处理函数,主要用于新建一个基于调色板的图像了,然后在这个基础上我们可以创建一些图形数字字符之类的,但这个函数需要GD库支持,如果没有开启GD库使用时会提示 ...

  9. android获取inflater

    LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 获取LayoutInflater的方法有如下三种: ? LayoutInflater inflater=(La ...

  10. AttributeError: 'NoneType' object has no attribute 'bytes' python3.4 win64

    解决方法: easy_install -U pip 详见: https://github.com/pypa/pip/issues/2669