今天用想在后台首页做个图表，看到highcharts没用喜欢的样式

想起了Echarts，百度了下，发现不一样了呢，原来出了Echarts3

感觉这个比Echarts2好用多了

下载了个精简版，echarts.simple.min.js

使用起来也非常简单

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="echarts.simple.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        option = {

    tooltip: {

        trigger: 'item',

        formatter: "{a} <br/>{b}: {c} ({d}%)"

    },

    legend: {

        orient: 'vertical',

        x: 'left',

        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

    },

    series: [

        {

            name:'访问来源',

            type:'pie',

            radius: ['50%', '70%'],

            avoidLabelOverlap: false,

            label: {

                normal: {

                    show: false,

                    position: 'center'

                },

                emphasis: {

                    show: true,

                    textStyle: {

                        fontSize: '30',

                        fontWeight: 'bold'

                    }

                }

            },

            labelLine: {

                normal: {

                    show: false

                }

            },

            data:[

                {value:335, name:'直接访问'},

                {value:310, name:'邮件营销'},

                {value:234, name:'联盟广告'},

                {value:135, name:'视频广告'},

                {value:1548, name:'搜索引擎'}

            ]

        }

    ]

};

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

　　

但是和他给的示例不一样，于是去在线构建，组件那选择上，工具栏，下载

这样下载了echarts.min.js，

修改代码，引入的js文件处

<script src="echarts.min.js"></script>

完成，和官方的示例一样啦

Echarts3的更多相关文章

  1. Echarts3 关系图-力导向布局图

    因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...

  2. flask+sqlite3+echarts3 系统监控

    总的而言,分三部分: 1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率,存入数据库. 2.路由器(app.py): 响应页面的ajax,获取最新的一条或多条数据. 3.页面(in ...

  3. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  4. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  5. 关于echarts3地图下钻省市

    最近关于echarts3弄了个地图下钻,也许是因为运气不好,开始上来需要传递到的城市是成都,结果成都地图(js)加载下来总是挤到了一起,好尴尬,各方实验查找后发现原来是js文件中,成都市地图有个县市并 ...

  6. asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送

    先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...

  7. echarts3 中 热力图的属性大全

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. 在echarts3中使用字符云

    echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载: 下载地址:https://github.com/ecomfe/echar ...

  9. 【echarts3】--1 简单入门

    echarts3 相信大家都了解吧,是百度研发的 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8 ...

随机推荐

  1. 修改linux的最大文件句柄数限制

                   在当前session有效,用户退出或者系统重新后恢复默认值       2)修改profile文件:在profile文件中添加:ulimit -n 65535      ...

  2. hadoop怎么读？怎么发音

    hadoop不是一个英文单词,是作者发明的词,hadoop名称来源作者小孩的一个}h毛填充黄色大象玩具. 它的发音是:[hædu:p]

  3. Validate Binary Search Tree

    Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...

  4. iOS关于TableViewController和CollectionViewController中self.view心得记录

    之前写代码,不喜欢记录,导致很多做过的功能,时间久了都遗忘了. 以后要勤记录~~~ 一丶首先说一下TableViewController 大家都知道,如果直接创建一个继承于TableViewContr ...

  5. ORACLE 定时执行存储过程

    推荐用dbms_scheduler方式更好 (2012-11-19注) /* 查询: select job,broken,what,interval,t.* from user_jobs t; job ...

  6. vtk renderer / rendering 绘制

    1.在绘制窗口中绘制出物体(静态的)vtkRenderWindow * w=vtkRenderWindow::New();  w->AddRenderer(r);        for(int ...

  7. 软件工程(DBSD2016) Git Review

    说明:任何问题请在评论区说明,会集中更新回复. 连连看组 源码: git clone https://git.coding.net/jx8zjs/llk.git 提交日志 一共有20次commit日志 ...

  8. GitHub: Windows 下的简单使用

    这段时间在博客园多了很多关于GitHub的文章,但是我的确没怎么看懂.不过这几天简单的看了写资料,亲身操作之后也有了一点体会.这算是最简单的GitHub入门了吧,基本全是鼠标操作.这也是这几天的总结, ...

  9. stack overflow错误分析

    stack overflow(堆栈溢出)就是不顾堆栈中分配的局部数据块大小,向该数据块写入了过多的数据,导致数据越界,结果覆盖了老的堆栈数据. 或者解释为 在长字符串中嵌入一段代码,并将过程的返回地址 ...

  10. hbase-site.xml 配置详解

    hbase.rootdir 这个目录是region server的共享目录,用来持久化HBase.URL需要是'完全正确'的,还要包含文件系统的scheme.例如,要表示hdfs中的'/hbase'目 ...