今天用想在后台首页做个图表，看到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. java 之前的安全的类回顾，以及以后需要线程安全时使用哪些类

    之前所学习到的线程安全的类: StringBuffer:线程安全的可变字符序列.一个类似于 String 的字符串缓冲区,但不能修改. Vector:Vector 类可以实现可增长的对象数组. Has ...

  2. poj[1185]炮兵阵地

    Description 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用&quo ...

  3. input file美化，文件上传

    此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...

  4. css实现省略号

    样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: ...

  5. PAT 1022. D进制的A+B (20)

    输入两个非负10进制整数A和B(<=230-1),输出A+B的D (1 < D <= 10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D. 输出格式: 输出A+B的D ...

  6. Hilbert-Huang Transform: matlab 希尔伯特-黄变换: matlab实现

    关于Hilbert-Huang的matlab实现,材料汇总,比较杂...感谢所有网络上的贡献者们:) 核心:以下代码计算HHT边际谱及其对应频率 工具包要求:G-Rilling EMD Toolbox ...

  7. LOG4NET日志配置及使用

    Log4net的安装 Install-Package log4net 1.先弄个日志记录的类 /// <summary> /// 使用LOG4NET记录日志的功能,在WEB.CONFIG里 ...

  8. MVC 多级目录（控制器） 路由重写 及 多级Views目录 的寻找视图的规则

    转自:[原]Asp.net Mvc   多级控制器 路由重写 及 多级Views目录 的寻找视图的规则 asp.net mvc 为了更好的控制views的页面存放,和控制器的可读性,需要分开多级目录来 ...

  9. (原创)AD账户误删导致Exchange邮箱被删 莫苦恼

    由于人员变动,离职人员AD账户和邮箱经常要删除.但是在删除AD账户的时候难免会犯错,将在用的用户给删除了,这是个痛苦的事情, 然后你会发现Exchange邮箱也会跟着删除,抓狂了..,还好,幸亏这里进 ...

  10. 清北学堂2017NOIP冬令营入学测试P4749 C’s problem(c)

    P4746 C's problem(c) 时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试 描述 题目描述 小C是一名数学家,由于它自制力比较差 ...