发布于 2015-12-30 11:47:14 | 390 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程,程序狗速度看过来!

ECharts Javascript免费图表库

ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。


最近在做一个项目,开始使用的是acharts,在电脑端访问的效果还真不错,但是放到手机端访问就惨了,尤其是iOS系统上,各种不兼容,后来准备换收费的hightcharsts,无意间发现有个免费的echarts,后来研究了一下,效果还可以,可是用使用。手机端访问也没问题。下面是一些简单的设置参数,仅供参考:在http://echarts.baidu.com/doc/example/pie1.html上可以直接执行。

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 }
            ]
        }
    ]
};


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务