first.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First ECharts</title>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="charts" style="width: 600px;height: 400px"></div>
</body>
<script type="text/javascript">
var charts = echarts.init(document.getElementById("charts"));

var config = {
title: {
text:'销量信息',
show:true,
textStyle:{
color:'red'
},
left:"center"
},
tooltip: {
triggerOn:'mousemove',
formatter:'{b}的销量为：{c}'
},
legend: {
left:'left',
orient:'vertical',
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
series: [{
name: '销量',
type: 'pie',
radius:['30%','60%'],
data:[
{value:0,name:'衬衫'},
{value:10,name:'羊毛衫'},
{value:50,name:'雪纺衫'},
{value:5,name:'裤子'},
{value:30,name:'高跟鞋'},
{value:12,name:'袜子'}
]
}]
};
charts.setOption(config);

charts.on('click',function(data){
console.log(data.name);
console.log(data.value);
});

</script>
</html>

pie.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First ECharts</title>
<script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div id="charts" style="width: 400px;height: 300px"></div>
<input type="button" onclick="test()" value="Click">
</body>
<script type="text/javascript">
var charts = echarts.init(document.getElementById("charts"));

var config = {
title: {
text:'销量信息',
show:true,
textStyle:{
color:'red'
},
left:"50px"
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [0, 0, 0, 0, 0, 0]
}]
};
charts.showLoading();
charts.setOption(config);

function test(){
charts.hideLoading();
charts.setOption({
series:[{
data : [5, 20, 36, 10, 10, 20]
}]
})
}
</script>
</html>

认识Echarts(网址:http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D)的更多相关文章

  1. Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据，可视化结果

    感谢下面的博主,我学习的博客有: https://blog.csdn.net/ITBigGod/article/details/81023802  Jsp+Servlet+Echarts实现动态数据可 ...

  2. 回归测试_百度百科 https://baike.baidu.com/item/%E5%9B%9E%E5%BD%92%E6%B5%8B%E8%AF%95

    回归测试_百度百科https://baike.baidu.com/item/%E5%9B%9E%E5%BD%92%E6%B5%8B%E8%AF%95

  3. 转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？

    一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...

  4. echarts之bootstrap选项卡不能显示其他标签echarts图表

    在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: ...

  5. Entity Framework Tutorial Basics（20）：Persistence in Entity Framework

    Persistence in Entity Framework There are two scenarios when persisting an entity using EntityFramew ...

  6. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  7. eCharts基础知识

    eCharts插件介绍 http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D

  8. CSS魔法堂：再次认识font

    一.前言 文字承载着站点内涵,而良好的字体.排版则为用户提供舒适的阅读体验.本文打算对字体稍微深入一下子网页字体的内容,若有纰漏请大家指正,谢谢! 目录一坨: 二, 字体分类 1. 衬线体(Serif ...

  9. JQuery选择器转义说明

    JQuery选择器 JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 ...

随机推荐

  1. javascript把json串转成对象

    // 这个是待转的json串 var jstr = "{'a':100,'b':'aaa'}"; // 经过下面语句把这个语句描述的对象数据,赋给这个m对象了 eval (&quo ...

  2. 再谈zabbix 邮件通知配置(不用脚本，简单配置就可以了)

    备注: 安装过zabbix 的人,大家都应该了解,后者查询网上的资料邮件通知一般是编写一个脚本,即报警媒介类型,创建一个script类似的 然后编写脚本,进行发送,但是实际上,系统内置的邮件发送还是比 ...

  3. Linux之 手动释放内存

    我们在进程中要怎样去描述一个文件呢?我们用目录项(dentry)和索引节点(inode).它们的定义如下: 所谓"文件", 就是按一定的形式存储在介质上的信息,所以一个文件其实包含 ...

  4. Oracle 之 配置HugePages内存

    HugePages是通过使用大页内存来取代传统的4kb内存页面,使得管理虚拟地址数变少,加快了从虚拟地址到物理地址的映射以及通过摒弃内存页面的换入换出以提高内存的整体性能.尤其是对于8GB以上的内存以 ...

  5. centos6.6升级安装MySQL5.5（2015/3/4）

    使用系统CentOS 6.6本来已经系统自带安装了mysql 5.1,但是奈何5.1不支持utf8mb4字符集(详见:http://blog.csdn.net/shootyou/article/det ...

  6. SharePoint2010基于表单验证方法总结(转载)

    系统环境: win2008r2+ sql2008r2 +Visual Studio2010+sharepoint 2010 A.如果已经建立了web application  例如名字为: http: ...

  7. "Could not find the main class: org.apache.catalina.startup.Boostrap. Program will exit."

    尝试将 myeclipse中的编译版本修改(如,将1.5修改为1.6)

  8. 关于FFT的硬件实现

    DFT在实际应用中非常重要,可以计算信号的频谱,功率谱和线性卷积等. 离散傅里叶变换的公式: 其中:  称为旋转因子. 由欧拉公式可得: 直接按DFT变换进行计算,当序列长度N很大时,计算量非常大,所 ...

  9. 北京师范大学第十六届程序设计竞赛决赛 I 如何办好比赛

    链接:https://www.nowcoder.com/acm/contest/117/I来源:牛客网 如何办好比赛 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他 ...

  10. python学习 (三十二) 异常处理

    1 异常: def exceptionHandling(): try: a = b = d = a / b print(d) except ZeroDivisionError as ex: print ...