最近在做一个项目,开始使用的是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. powershell命令大全

    Name Category Synopsis ---- -------- -------- ac Alias Add-Content asnp Alias Add-PSSnapin clc Alias ...

  2. (function($){...})(jQuery) 含义

    最近在项目js文件末端中发现这样的代码,对于前端技术比较薄弱的我,着实还是有点晕,好在查阅到了相关资料,现解释如下: (function($){  $.plugin = new org.plugin. ...

  3. 未来WEB程序员

    作为一名程序员,如果你想在这个领域内继续向前进步或者在当前的经济形势下保持不被炒鱿鱼,那么你就决不应当自满自足,你需要继续学习.近日,著名IT评论员Justin James在他的博客中列出了未来五年程 ...

  4. BZOJ 3251 树上三角形

    NOIP的东西回成都再说吧... 这题暴力. #include<iostream> #include<cstdio> #include<cstring> #incl ...

  5. BZOJ 1271 秦腾与教学评估

    二分. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...

  6. 拆解一个简单的KeyFile保护

    系统 : Windows xp 程序 : abexcrackme3 程序下载地址 :http://pan.baidu.com/s/1mh3TiqO 要求 : 伪造Keyfile 使用工具 :IDA 可 ...

  7. HDU 1300

    http://acm.hdu.edu.cn/showproblem.php?pid=1300 这题大一就看到过,当时没读懂题目,今天再做就容易多了 题意:升序给出n个珍珠的的数量和价值,问买这些珍珠的 ...

  8. LeetCode Median of Two Sorted Arrays 找中位数(技巧)

    题意: 给两个有序(升or降)的数组,求两个数组合并之后的中位数. 思路: 按照找第k大的思想,很巧妙.将问题的规模降低,对于每个子问题,k的规模至少减半. 考虑其中一个子问题,在两个有序数组中找第k ...

  9. android webview如何加载asset目录里的页面

    在asset里的页面都可以这样获得 file:///android_asset/index.html

  10. for each 循环

    前言 在C++中,经常用到类似 for (int i=0; i<n; i++); 这样的循环控制结构. 然而,如果要求循环变量的改变方式不是简单的+1递增,而是依次取某个数组里面的元素,那么C+ ...