今天用想在后台首页做个图表，看到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. 在VisualStudio2013，2015中如何安装自定义项目模板

    For example, I want to install EP prj template: AxWebProject.zip Copy AxWebProject.zip zip file into ...

  2. ESXi 6.0 配置

    ESXi 6.0 添加静态路由 首先打开ESXi的SSH服务, 在Configuration -> Security Profile -> Services , start SSH 用管理 ...

  3. Windows7 64位压缩包安装MySQL5.7.9

    官网下载64bit MySQL5.7.9压缩包, 解压至安装位置 1. 创建my.ini文件, 内容如下 [mysqld] # Remove leading # and set to the amou ...

  4. 建立mvc过程

    1.public class   dbContext:Dbcontext { private readonly static string CONNECTION_STRING="name=d ...

  5. Alpha阶段事后分析报告

    每个团队编写一个事后分析报告,对于团队在Alpha阶段的工作做一个总结. 请在2016年11月24日上课之前根据下述博客中的模板总结前一阶段的工作,发表在团队博客上,并在课上的事后分析会上进行汇报,并 ...

  6. swifttextfield代理方法

    //MARK:textfield delegate //键盘的高度 func textFieldShouldBeginEditing(textField: UITextField) -> Boo ...

  7. JSON拾遗

    最近开始翻<JavaScript高级程序设计>,其实很多大师级人物都推荐这本书为JavaScript入门级读物.因为第20章 JSON篇幅最小,而且以前也写过一篇JSON的总结JSON简介 ...

  8. <实训|第十一天>学习一下linux中的进程，文件查找，文件压缩与IO重定向

    [root@localhost~]#序言 在今后的工作中,运维工程师每天的例行事务就是使用free -m,top,uptime,df -h...每天都要检查一下服务器,看看是否出现异常.那么今天我们就 ...

  9. Myeclipse 2015 stable 2.0 完美破解方法

    2015-08-21  以前写了一篇<Myeclipse 2015 stable 1.0 完美破解方法>,现 在跟新一下Myeclipse 2015 stable 2.0 破解方法,此方法 ...

  10. snr ber Eb/N0之间的区别与联系

    信噪比(S/N)是指传输信号的平均功率与加性噪声的平均功率之比,载噪比(C/N)指已经调制的信号的平均功率与加性噪声的平均功率之比,它们都以对数的方式来计算,单位为dB. 对同一个传输系统而言,载噪比 ...