最近在做一个项目,开始使用的是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. Motorola C118修改滤波器组件

    所需工具: 热风枪.恒温焊台.镊子.助焊膏.锡丝.滤波器组件 关于怎么使用热风枪拆屏蔽盖将在后期更新视频,以下为修改滤波器流程.以下热风枪设置温度只针对快克957DW(不同品牌风枪和型号可能会有温差) ...

  2. php大力力 [027节] 被百度收录较好的几个视频网站示例

    php大力力 [027节] 被百度收录较好的几个视频网站示例 56网 很清晰 :2014 兄弟连高洛峰 PHP教程14.1.7 在PHP脚本中操作MySQL数据库4_视频在线观看 - 56.com 土 ...

  3. win7下环境搭建

    1.Python下载 https://www.python.org/downloads/windows/ 选择需要安装的版本,我偷懒装的可执行文件. 下载之后双击安装就OK啦,安装过程中有一项偷懒的选 ...

  4. Raising Modulo Numbers_快速幂取模算法

    Description People are different. Some secretly read magazines full of interesting girls' pictures, ...

  5. Selenium Grid原理

    转载: http://blog.csdn.net/five3/article/details/9428655 Selenium-Grid版本 selenium-grid分为版本1和版本2,其实它的2个 ...

  6. 第一个Sprint冲刺第二天

    讨论成员:邵家文.朱浩龙.陈俊金.李新 讨论地点:宿舍 讨论内容:安卓开发技术,与后续需要加强的内容 计时功能完成度:刚开始讨论实现的技术

  7. Android 学习第1课,JDK工具包的安装

    1. jdk 的下载 目前为止,jdk的最新版是jdk8,http://www.oracle.com/technetwork/java/javase/downloads/index.html 到这里下 ...

  8. mysql explain用法和结果的含义(转)

    重点是第二种用法,需要深入的了解. 先看一个例子: mysql> explain select * from t_order; +----+-------------+---------+--- ...

  9. The Implementation of Lua 5.0 阅读笔记(一)

    没想到Lua的作者理论水平这么高,这篇文章读的我顿生高屋建瓴之感.云风分享了一篇中译:http://www.codingnow.com/2000/download/The%20Implementati ...

  10. Single Number II ——位操作

    题意: 给定两个32位的整数 N 和 M,以及表示比特位置的 i 与 j .编写一个方法,将 M 插入 N,使得 M 从 N 的第 j 位开始,到第 i 位结束.假定从 j 位到 i 位足以容纳M. ...