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. Vue-cli3与springboot项目整合打包
			
    一.需求        使用前后端分离编写了个小程序,前端使用的是vue-cli3创建的项目,后端使用的是springboot创建的项目,部署的时候一起打包部署,本文对一些细节部分进行了说明.   二 ...
    
			
    2. 
						
  2. CRM：异步加载下拉列表，三个列表出现同样的下拉框
			
    异步加载下拉列表,三个列表出现同样的下拉框,原因如下: Spring默认单例,如果Action是单例,那么上一次查询的结果就可能被下一次的查询所调用.所以必须配置action为多例, 如果采用单例模式 ...
    
			
    3. 
						
  3. git使用问题二删除远程仓库文件，本地保留不动
			
    git rm --cached filename/-r directory git commit "xxxx" git push
    
			
    4. 
						
  4. fuseki远程访问方法
			
    ./fuseki-server启动服务后,我们的服务只能是localhost访问,无法被其他人访问,那么 要怎么修改呢.很简单,把apche-jena-fuseki-3.10.0/run 下面的shi ...
    
			
    5. 
						
  5. Codeforces 590 A：Median Smoothing
			
    A. Median Smoothing time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
    
			
    6. 
						
  6. 安卓10GB内存旗舰手机的普及，能成为拯救DRAM厂商的救命稻草吗？
			
    你对2019年手机即将展现出的全新变化,有哪些期待?是全新的处理器.更名副其实的全面屏,还是愈发强大的拍照功能,抑或折叠屏幕?但不管你有怎样的期待,手机厂商似乎总是"不解风情".常 ...
    
			
    7. 
						
  7. jpa自定义sql语句
			
    /** * 查询还没生成索引的帖子 * @return */ @Query(value = "SELECT * FROM t_article WHERE index_state=0" ...
    
			
    8. 
						
  8. GDI4
			
    前几篇我已经向大家介绍了如何使用GDI+来绘图,并做了一个截图的实例,这篇我向大家介绍下如何来做一个类似windows画图的工具.个人认为如果想做一个功能强大的绘图工具,那么单纯掌握GDI还远远不够, ...
    
			
    9. 
						
  9. Nifi简介及核心概念整理
			
    简介 Apache NiFi 是一个易于使用.功能强大而且可靠的数据拉取.数据处理和分发系统,用于自动化管理系统间的数据流. 它支持高度可配置的指示图的数据路由.转换和系统中介逻辑,支持从多种数据源动 ...
    
			
    10. 
						
  10. spring boot引入外部jar包
			
    两种方法: 一:使用project-properties-java build path-Libraries 此方法的问题时不能使用mav打包. 二:写到POM里 首先在新建libs文件夹(根目录或者 ...
    
			
    11.