引入js

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

记住是这个文件夹下的

E:\Firefox\incubator-echarts-4.1.0\incubator-echarts-4.1.0\dist

话不多说直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/echarts.js" ></script>
<!-- <script type="text/javascript" src="js/echarts.min.js" ></script> -->
</head>
<body>

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

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

$(function(){
$.ajax({
type:"post",
url:"echarsData",
async:true,
data:{},
dataType:'json',
success:function(data){
console.log(data);
var data1=[];
var data2=[];
for(var i=0;i<data.length;i++){
data1[i]=data[i].name;
data2[i]=data[i].count;
}
//指定图标的配置和数据
var option = {
toolbox:{
feature:{
saveAsImage:{
title:'保存'
}
}
},
title:{
text:'ECharts 数据统计'
},
tooltip:{},

xAxis:{
data:data1
},
yAxis:{

},
series:[{
type:'line',
data:data2
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));

//使用制定的配置项和数据显示图表
myChart.setOption(option);


}
});

})

</script>
<script type="text/javascript">

option = {
toolbox:{
feature:{
saveAsImage:{
title:'保存'
}
}
},
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart = echarts.init(document.getElementById('bingtu'));

//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>

效果图

数据就自己动态渲染吧，每个人都有不一样的需求。。。。

echars简单使用的更多相关文章

  1. HCharts随笔之简单入门

    此处可以对比我的另一个Echars简单入门 直接上源码 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  2. 简单echars说明和使用

    官方API:http://echarts.baidu.com/echarts2/doc/doc.htm 1.AMD规范的加载器——esl.js,这是什么? 答:关于AMD规范可以参考阮一峰的这篇文章 ...

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

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

  4. jquery中的插件EChars的使用

    首先,进入EChars的官网下载页面:http://echarts.baidu.com/download.html    下载自己需要的版本. 引入jquery包和echars,进入官网的实例:htt ...

  5. 【造轮子】打造一个简单的万能Excel读写工具

    大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...

  6. Fabio 安装和简单使用

    Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...

  7. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  9. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  10. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. linux忘记密码-进入单用户模式修改密码

    1.重启系统 重启可以使用命令 reboot.init 6.shutdown -r now 或点击VMware-虚拟机-电源-重新启动客户机 2.进入GRUB界面 重启后,在启动界面按上下方向键选择第 ...

  2. T137233 魔术增幅

    设答案为$g$,那么肯定有$g\mid M$. 再设$M=\sum\limits_{i=1}^N a_i=g\times \sum\limits_{i=1}^N t_i$. 因为$t_i$都是正整数, ...

  3. 快速排序（QuiteSort）

    快速排序算法(QuiteSort)是基于分治策略的一个算法.其基本算法是,对于输入的子数组a[p,r],按以下3个步骤进行排序: (1)分解(divide):以 a[p]为基准元素将a[p:r]划分成 ...

  4. 正整数n型方阵

    正整数n型方阵(不用数组完成) 一般呢这种n型方阵很多人都是用数组完成,今天呢小编就用简单的循环控制结构来完成,不需用到数组.题目:从键盘输入一个正整数n,根据n形成一个方阵.方阵最外层是第一层,每层 ...

  5. DC约束笔记

    关于get_pins get_cells get_ports等的定义 关于建立保持与max/min的关系 2.setup time和hold time 建立时间(setup time)是指在触发器的时 ...

  6. ClickHouse 使用

    最近mysql报表数据太多,要转移数据到 clickHouse ,顺便学学该数据仓库的使用 中文文档:https://clickhouse.com/docs/zh/ B站学习视频 : https:// ...

  7. 处理uniapp激励广告

    使用uniapp查看广告 激励视频广告组件.激励视频广告组件是一个原生组件,并且是一个全局单例.层级比上屏 Canvas 高,会覆盖在上屏 Canvas 上.激励视频 广告组件默认是隐藏的,需要调用 ...

  8. FPGA 原理、结构、开发流程简述

    简介本文主要介绍了博主在阅读天野英晴主编的<FPGA 原理和结构>一书时的读书笔记,方便更好的了解和入门 FPGA.本博客图片均来自于参考文献 [1]. FPGA 特性和粒度FPGA 是一 ...

  9. matlab数操作

    随循环填充(更新)矩阵 不断更新矩阵,填充矩阵,可用cat函数: C = cat(dim,A,B); 向量重复扩充矩阵 将相同的向量或矩阵进行重复扩充时,matlab有两种方法:(第二种方法的效率更高 ...

  10. 生态学建模：增强回归树（BRT）预测短鳍鳗生存分布和影响因素|附代码数据

    全文下载链接: http://tecdat.cn/?p=22482 最近我们被客户要求撰写关于增强回归树(BRT)的研究报告,包括一些图形和统计输出. 在本文中,在R中拟合BRT(提升回归树)模型.我 ...