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. Appium+python（1）简单的介绍环境搭建

    环境搭建其实并不难,只不过安装的东西有点多,要加的环境变量有点多. 链接:https://pan.baidu.com/s/1nwLhNIT 密码:56wn 这个压缩包里要用的都有了,只需要下载,然后安 ...

  2. Java Garbage Collection

    在C/C++中,需要自己负责object的creation 和 destruction. 如果忘记了destruction, 就容易出现OutOfMemoryErrors. Java中会有GC直接处理 ...

  3. 百度编辑器ueditor更改图片默认编辑工具

    点击图片编辑器默认出现的工具 需求是点击图片不出现默认样式,而是在编辑器外出现图片属性编辑框,需求效果如下 我的做法是在css里面将默认出现的工具隐藏,然后直接在ueditor.all.js里面修改S ...

  4. spec.template.spec.initContainers[1].securityContext.privileged: Forbidden: disallowed by policy 问题解决

    主要是执行系统特权应用解决方法: api server   controller-manager 加上  --allow-privileged=true 即可 之后重启服务  

  5. ORACLE 12C RMAN 功能增强

    在ORACLE 12C中对rman的功能有了不少增强,在以前的文章中写过RMAN RECOVER TABLE功能,这里另外补充rman增强的两个小功能(sql语句和数据文件分割)数据库版本 SQL&g ...

  6. bzoj 1001 [BeiJing2006]狼抓兔子——最小割转最短路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1001 #include<cstdio> #include<cstring& ...

  7. Oracle在线新增索引

    Oracle新增索引语法很简单,如果是普通索引的话: create Index IDX_T_WLF on T_WLF(ACTIVITYID,ACTIVETIME) tablespace TBS_VCO ...

  8. Unit02： JDBC核心API

    Unit02: JDBC核心API db.properties 注意:如果使用连接池,可以在这个文件中增加对连接池的相关设置: 连接池参数,常用参数有: 初始连接数 最大连接数 最小连接数 每次增加的 ...

  9. STM32F4XX启动文件分析

    STM32F4XX启动文件分析 - STM32F4XX启动文件下载地址 导读:STM32F4XX启动文件的作用 初始化设置SP,即栈指针 初始化设置PC指针指向复位中断处理函数,即PC = Reset ...

  10. C#String地址、拼接性能学习

    String类型不可变.定义string变量时会在堆上分配存储空间,而对该变量进行值变更时会重新分配一个存储空间,且保留原存储空间. 测试思路:获取string类型变量值变更前后的存储空间地址,判断地 ...