今天用想在后台首页做个图表，看到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. 多线程进行http请求

    昨天需要一个线下脚本进行单播推送,大约有1kw个用户,考虑到推送速度就临时搞了个请求线上的一个脚本 /** * 临时支持invoke单播推送 */ #include <stdio.h> # ...

  2. Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例

    概要 上一章,我们学习了Collection的架构.这一章开始,我们对Collection的具体实现类进行讲解:首先,讲解List,而List中ArrayList又最为常用.因此,本章我们讲解Arra ...

  3. Openjudge 1.12-04

    04:最匹配的矩阵 查看 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个m*n的矩阵A和r*s的矩阵B,其中0 < r ≤ m, 0 < s ≤ n,A.B所有 ...

  4. iOS SDWebImage使用详解

    这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. 使用示范的代码:UITableView使用UIImageView ...

  5. .NET Core）的ZooKeeper异步客户端

    支持断线重连.永久watcher.递归操作并且能跨平台(.NET Core)的ZooKeeper异步客户端   阅读目录 什么是ZooKeeper? 项目介绍 提供的功能 使用说明 FAQ 在公司内部 ...

  6. 程序开发使用docker部署

    我们公司自己研发了一套 grand-line 系统,使用 docker 来部署项目. 我是第一批小白鼠,一开始网络差,build 一次要半个小时,连接进入 web shell 也很慢,部署一个微信项目 ...

  7. struts2使用Convention Plugin在weblogic上以war包部署时，找不到Action的解决办法

    环境: struts 2.3.16.3 + Convention Plugin 2.3.16.3 实现零配置 现象:以文件夹方式部署在weblogic(10.3.3)上时一切正常,换成war包部署,运 ...

  8. [MetaHook] BaseUI hook

    Hook IBaseUI function. #include <metahook.h> #include <IBaseUI.h> IBaseUI *g_pBaseUI = ; ...

  9. ubuntu-12.10-server安装图形界面

    1.首先你需要确定你的源文件中 /etc/apt/sources.list 已经使用Universe和Multiverse库.然后使用下面的命令来进行更新源列表和安装图形桌面. sudo apt-ge ...

  10. Adobe Reader & PDF 护眼设置

    1.首先选择“编辑”--->“首选项” 选择其他颜色,把RGB如下设置