1、首先引入echars的js文件 该文件可从echars官网下载

在某些图表中可能会引用ecStat.js文件 如线性回归散点图 我们直接下载引用即可

<head>

    <title></title>

    <script type="text/javascript" src="js/echarts.js"></script>

</head>

　　

2、创建一个容纳和显示echars图表的div容器

<body>

        <div id="ech" style="width: 600px;height: 500px"></div>

</body>

　　

3、编写js显示echars图

	至于要是用那个图标我们直接从官网复制其option格式就行，其用法都一样

	我们仅仅复制下来是不能够显示的

	我们还需要使用 echarts的init方法得到echars的div容器

	然后就是复制官网的数据格式

        最后将option数据使用myChart.setOption(option);将数据放到对象中

<script type="text/javascript">

    window.onload=function (){

        var myChart = echarts.init(document.getElementById("ech"));

        alert("jj");

        var option = {

            tooltip : {

                trigger: 'axis',

                axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

                }

            },

            legend: {

                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']

            },

            grid: {

                left: '3%',

                right: '4%',

                bottom: '3%',

                containLabel: true

            },

            xAxis : [

                {

                    type : 'category',

                    data : ['周一','周二','周三','周四','周五','周六','周日']

                }

            ],

            yAxis : [

                {

                    type : 'value'

                }

            ],

            series : [

                {

                    name:'直接访问',

                    type:'bar',

                    data:[320, 332, 301, 334, 390, 330, 320]

                },

                {

                    name:'邮件营销',

                    type:'bar',

                    stack: '广告',

                    data:[120, 132, 101, 134, 90, 230, 210]

                },

                {

                    name:'联盟广告',

                    type:'bar',

                    stack: '广告',

                    data:[220, 182, 191, 234, 290, 330, 310]

                }

            ]

        };

        myChart.setOption(option);

    }

　　



												


											
echars的使用的更多相关文章
	

    
						
  1. EChars学习-2
		
    上海的echars学习 <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu ...
    
		
    2. 
						
  2. Echars  6大公共组件详解
		
    Echars 六大组件详解 : title  tooltip toolbox legend  dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...
    
		
    3. 
						
  3. Echars使用
		
    声明一个Echars: var myChart = echarts.init(document.getElementById(Id)); 给Echars添加参数: var option = {  参数 ...
    
		
    4. 
						
  4. echars踩坑之图表缓存
		
    针对echars 在一个图表内渲染多次数据时,图表会缓存上一次的数据导致下一次的数据图表变形.使用clear()清除图表缓存. 不让页面缓存的方法 按F12打开Network在Disable cach ...
    
		
    5. 
						
  5. Echars鼠标点击事件多次触发
		
    gChart.on('click', function (params) { if (params.componentSubType == "bar" && par ...
    
		
    6. 
						
  6. echars关系图
		
    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
    
		
    7. 
						
  7. Echars折线配置详解
		
    Echars折线配置详解 比如做成如下效果图: 所有的配置如下: var option = { tooltip: { // 提示框 trigger: 'axis', // 触发类型(坐标轴触发) al ...
    
		
    8. 
						
  8. SNF快速开发平台MVC-集成了百度开源项目echars
		
    百度开源项目echars图表样式非常丰富,而且开源免费.非常好.所以在我们框架当中也进行了集成echars完成图表任务. 我们进行了两次封装,利于我们开发使用.我也看到过有些架构师 按echars里的 ...
    
		
    9. 
						
  9. echars画折线图的一种数据处理方式
		
    echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
    
		
    10. 
						
  10. echars入门篇
		
    官网地址:echars. 官方实例:首次使用请点击. 官方文档以及第一次操作实例如下 我们生活中有很多统计图,举例一下,有:柱形图.饼图.折线图等一些可以统计数据的形式. 图有:X轴(横轴),Y轴(纵 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 题解 P2801 【教主的魔法】
			
    分块入门题,不错的,建议大家做一做 开始学习 先看一下数列分块入门 2 这道题想让我们求区间[l,r]>=c的个数,然后我们可以看到"数列分块入门 2"是求区间[l,r]&l ...
    
			
    2. 
						
  2. D - Recommendations
			
    就是有n组,每组的数量是num,只能增加数字,增加的代价为t,求能使所有组的数量都不同的最小代价. #include<bits/stdc++.h> #define N 200005 #de ...
    
			
    3. 
						
  3. JVM配合IDEA远程调试
			
    前言 如果测试环境中运行的jar包项目报错,需要排错时,会不太方便,这个时候就可以通过远程调试的方式,在本地打断点的方式进行调试 正文 一.首先,运行测试环境的jar包需要加以下参数: java -j ...
    
			
    4. 
						
  4. 桌面右键没有新建txt文本文档的快捷方式、
			
    先新建一个word文档,然后将后缀名改为 TXT. 在里面输入:Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.txt] @=&quo ...
    
			
    5. 
						
  5. 刷题53. Maximum Subarray
			
    一.题目说明 题目是53. Maximum Subarray,求最长连续子序列最大和.难度是Easy! 二.我的解答 Easy的题目,居然没做出来. 后来看了用dp方法,其中dp[i]表示以第i个元素 ...
    
			
    6. 
						
  6. python2.7编译安装升级python3并安装Scrapy
			
    一.安装python3 1.wget https://www.python.org/ftp/python/3.5.1/Python-3.5.1.tgz 2.编译安装,在编译安装前需要构建编译环境,安装 ...
    
			
    7. 
						
  7. Win10下数据增强及标注工具安装
			
    Win10下数据增强及标注工具安装 一．   数据增强利器—Augmentor 1.安装 只需在控制台输入:pip install Augmentor 2.简介 Augmentor是用于图像增强的软件 ...
    
			
    8. 
						
  8. oracle，uuid为主键，插入时直接更新id
			
    uuid为主键,插入时自动更新 -- Create table create table TECHNOLOGYCOMPANY ( ID VARCHAR2(32) default SYS_GUID()  ...
    
			
    9. 
						
  9. 记录：JAVA抽象类、接口、多态
			
    JAVA抽象类.接口.多态 1. 多态 定义 多态是同一个行为具有多个不同表现形式或形态的能力.(多态就是同一个接口,使用不同的实例而执行不同操作) 如何实现多态 继承和接口 父类和接口类型的变量赋值 ...
    
			
    10. 
						
  10. 使用 Exchange 命令行管理程序查看动态通讯组的成员
			
    本示例返回名为 "全职员工" 的动态通讯组的成员列表. 第一个命令将动态通讯组对象存储在变量$FTE中. 第二个命令使用 Get-Recipient cmdlet 列出与为动态通讯 ...
    
			
    11.