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. Echars 6大公共组件详解

    Echars 六大组件详解 : title  tooltip toolbox legend  dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...

  3. Echars使用

    声明一个Echars: var myChart = echarts.init(document.getElementById(Id)); 给Echars添加参数: var option = {  参数 ...

  4. echars踩坑之图表缓存

    针对echars 在一个图表内渲染多次数据时,图表会缓存上一次的数据导致下一次的数据图表变形.使用clear()清除图表缓存. 不让页面缓存的方法 按F12打开Network在Disable cach ...

  5. Echars鼠标点击事件多次触发

    gChart.on('click', function (params) { if (params.componentSubType == "bar" && par ...

  6. echars关系图

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. Echars折线配置详解

    Echars折线配置详解 比如做成如下效果图: 所有的配置如下: var option = { tooltip: { // 提示框 trigger: 'axis', // 触发类型(坐标轴触发) al ...

  8. SNF快速开发平台MVC-集成了百度开源项目echars

    百度开源项目echars图表样式非常丰富,而且开源免费.非常好.所以在我们框架当中也进行了集成echars完成图表任务. 我们进行了两次封装,利于我们开发使用.我也看到过有些架构师 按echars里的 ...

  9. echars画折线图的一种数据处理方式

    echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  10. echars入门篇

    官网地址:echars. 官方实例:首次使用请点击. 官方文档以及第一次操作实例如下 我们生活中有很多统计图,举例一下,有:柱形图.饼图.折线图等一些可以统计数据的形式. 图有:X轴(横轴),Y轴(纵 ...

随机推荐

  1. C2 - Skyscrapers (hard version)

    前几天做的题,当时好像是超时了,这个博客写的超好https://blog.csdn.net/lucky52529/article/details/89155694 用单调站解决问题. 代码是从另外一篇 ...

  2. P1073 多选题常见计分法

    P1073 多选题常见计分法 转跳点:

  3. 201706 Ruby 基础 & 元编程

    yield yield self Proc yield带参数 rails中:yield 和 content_for methods.proc.lambda.block 闭包(用proc延长变量的生命周 ...

  4. dMd----攻防世界

    首先在Linux上查看题目,没有什么发现elf文件,之后使用ida打开看看,找到main函数,f5查看, 上图一些字符是char过的,便于查看,发现是一个if else语句,先经过了MD5加密然后判断 ...

  5. php导出合同模板到excel

    /** * [export_excel 合同导出] * [@param itemid:单号] * @return [type] */ public function export_excel() { ...

  6. Unity 打开其他exe文件

    using UnityEngine; using System.Collections; using System.Diagnostics;///// public class FeiYuZhu : ...

  7. [题解] LuoguP3768 简单的数学题

    Description 传送门 给一个整数\(n\),让你求 \[ \sum\limits_{i=1}^n \sum\limits_{j=1}^n ij\gcd(i,j) \] 对一个大质数\(p\) ...

  8. net.sf.json.JSONObject maven下载到了但是java后台一直用不了问题

    需求,实体转JSON,然后用到JSONObject转JSON,但是我向下面这样引入,后台就是用不了,还是报红, <dependency> <groupId>net.sf.jso ...

  9. MongoDB_02简介

    MongoDB简介 MongoDB是一个开源,高性能,无模式的文档型数据库. 它支持的数据结构非常松散,是一种类似于JSON的格式叫BSON,所以他既可以存储比较复杂的数据类型,又相当的灵活. Mon ...

  10. dango 常用 静态文件 中间件 admin管理 上传图片

    静态文件 项目中的CSS.图片.js都是静态文件.一般会将静态文件放到一个单独的目录中,以方便管理.在html页面中调用时,也需要指定静态文件的路径,Django中提供了一种解析的方式配置静态文件路径 ...