官网学习链接：http://echarts.baidu.com/tutorial.html#5%20分钟上手%20ECharts

案例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图标案例</title>

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

</head>

<body>

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

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

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

</body>

<script type="text/javascript">

    var myChart1 = echarts.init(document.getElementById('main1'));

    var option1 = {

        title: {

            text:'ECharts 入门示例'

        },

        tooltip:{},

        legend:{

            data:['销量']

        },

        xAxis:{

            data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']

        },

        yAxis:{},

        series: [

            {

                name:'销量',

                type:'bar',

                data:[5,20,36,10,10,20]

            }

        ]

    };

    myChart1.setOption(option1);

    var myChart2 = echarts.init(document.getElementById('main2'));

    myChart2.setOption(

        {

            series:[

                {

                    name:'访问来源',

                    type:'pie',

                    radius:'55%',

//                    roseType:'angle',  //南丁格儿图

                    data:[

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

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

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

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

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

                    ]

                }

            ]

        }

    );

    var myChart3 = echarts.init(document.getElementById('main3'));

    var option3 = {

    backgroundColor: '#2c343c',

    series : [

        {

            name: '访问来源',

            type: 'pie',

            radius: '55%',

            data:[

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

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

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

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

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

            ],

            roseType: 'angle',

            label: {

                normal: {

                    textStyle: {

                        color: 'rgba(255, 255, 255, 0.3)'

                    }

                }

            },

            labelLine: {

                normal: {

                    lineStyle: {

                        color: 'rgba(255, 255, 255, 0.3)'

                    }

                }

            },

            itemStyle: {

                normal: {

                    color: '#c23531',

                    shadowBlur: 200,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        }

    ]

};

    myChart3.setOption(option3)

</script>

</html>

js 图表处理之Echar的更多相关文章

  1. 13个JavaScript图表（JS图表）图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  2. Atitit.js图表控件总结

    Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...

  3. 一个朋友js图表开发遇到的问题 解决思路c和js

    引言            不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ...  ...

  4. chart.js图表库案例赏析，饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  5. Vis.js图表插件

    Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时 ...

  6. 求剁手的分享，如何简单开发js图表

    前段时间做的一个项目里需要用到js图表,在网上找了下,大概找到了highcharts.fusioncharts这些国外产品. 因为都收费,虽然有盗版,我也不敢用,万一被找上们来就砸锅卖铁了要.自己写j ...

  7. 一个朋友 js图表开发问题 用 c和 js 解决

    引言            不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ...  ...

  8. Highcharts纯js图表库，以后可以跟客户说，你跟阿里云ECS用的图表库是同款

    Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...

  9. 手绘风格的 JS 图表库：Chart.xkcd

    本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...

随机推荐

  1. 【BZOJ1135】[POI2009]Lyz 线段树

    [BZOJ1135][POI2009]Lyz Description 初始时滑冰俱乐部有1到n号的溜冰鞋各k双.已知x号脚的人可以穿x到x+d的溜冰鞋. 有m次操作,每次包含两个数ri,xi代表来了x ...

  2. 解决多指操作放大缩小 指针错误 java.lang.IllegalArgumentException: pointerIndex out of range

    /** Custom your own ViewPager to extends support ViewPager. java source: */ /** Created by azi on 20 ...

  3. json写入到excel表

    1. 拼接返回的json数据 // 拼接需要下载报表的HTML,并返回html;reportHtml(reporttData) { let html = `<html xmlns:o=" ...

  4. 170426、centos6.5安装 Zookeeper注册中心

    注册中心服务器(192.168.3.71)配置,安装 Zookeeper: 1. 修改操作系统的/etc/hosts 文件中添加: # zookeeper servers 192.168.3.71 r ...

  5. vue通信

    组件实例的作用域是孤立的. 一.父子通信 父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息. 要让子组件使用父组件的数据,我们需要通过子组件的props选项.prop是 ...

  6. CSS Sprites 原理技术介绍及其优化方法

    先期的准备工作 应对一个项目后期维护成本大的问题,我们最好的解决方案就是在开始前制定一系列的规范来限制问题的产品.好的开始是成功的一半.对于CSS Sprites,在项目开始前,我们要充分认识一个产品 ...

  7. ubuntu14下创建软件的快捷启动方式

    下载软件,使用softname/bin/softname.sh即可启动,但是很麻烦,每次都要打开terminal 为了方便,我们需要创建desktop文件指向这个启动软件的shell文件(以创建Pyc ...

  8. 初识Java集合框架（Iterator、Collection、Map）

    1. Java集合框架提供了一套性能优良.使用方便的接口和类,它们位于java.util包中 注意: 既有接口也有类,图中画实线的是类,画虚线的是接口 使用之前须要到导入java.util包 List ...

  9. 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景

    开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...

  10. python学习笔记（二十四）继承与封装

    继承(extends)就是把多个类中相同的成员给提取出来定义到一个独立的类中,然后让这多个类和该独立的类产生一个关系,这多个类就具备了这些类容,这个关系就叫做继承. 实现继承的类称为子类,也叫派生类, ...