认识Echarts(网址:http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D)
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)的更多相关文章
- Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据，可视化结果
感谢下面的博主,我学习的博客有: https://blog.csdn.net/ITBigGod/article/details/81023802 Jsp+Servlet+Echarts实现动态数据可 ...
- 回归测试_百度百科 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
- 转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？
一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...
- echarts之bootstrap选项卡不能显示其他标签echarts图表
在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: ...
- Entity Framework Tutorial Basics（20）：Persistence in Entity Framework
Persistence in Entity Framework There are two scenarios when persisting an entity using EntityFramew ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- eCharts基础知识
eCharts插件介绍 http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D
- CSS魔法堂：再次认识font
一.前言 文字承载着站点内涵,而良好的字体.排版则为用户提供舒适的阅读体验.本文打算对字体稍微深入一下子网页字体的内容,若有纰漏请大家指正,谢谢! 目录一坨: 二, 字体分类 1. 衬线体(Serif ...
- JQuery选择器转义说明
JQuery选择器 JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 ...
随机推荐
- RSA 每次公钥加密不同结果
今天服务器端一哥们突然跑过来跟我说:我发现公钥每次加密都不同结果啊? 我说:怎么可能?不同的话,私要怎么解密和验证啊? 然后我屁颠屁颠的试了下,结果发现不论在在线RSA的还是自己公司 利用同一个明文加 ...
- caddy server && caddyfile
This page describes how to configure Caddy using the Caddyfile. Introduction The term "Caddyfil ...
- 坚持c++，真正掌握c++（4）
这几天复习了c++primer的第12章类的解说,尽管之前这一章也看了几遍.可是我终究认为书读百遍其义自现,如今我给出一些我学习的心得,欢迎大家一起探讨. 首先,类能够说是c++的灵魂,正由于c++中 ...
- #define用法
1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,如果在程序里面写 if(i<MAXTIME) { // } 编译器在处理 ...
- filter添加水印
1filter写法 先定义自己的responseWrapper chain.doFilter(request,responseWrapper); responseWrapper来输出 package ...
- vim删除空行和注释
vim删除空行和注释 来源: http://jpuyy.com/2015/06/vim-delete-lines-using-regexp.html 删除空行 :g/^$/d 删除空行以及只有空格的 ...
- RK3288 摄像头左右镜像
系统:Android 5.1 设置摄像头左右镜像 diff --git a/frameworks/av/services/camera/libcameraservice/api1/CameraClie ...
- 函数参数个数不确定时使用va_start
今天在网上看程序时忽然发现别人的函数参数中有省略号,甚是吃惊,发现其函数中使用了va_start,经过查资料大概明白其用法,个人觉得很好用! #include <stdio.h> #inc ...
- Cannot read property 'setState' of undefined
You're using function() in your Promise chain, this will change the scope for this. If you're using ...
- linux 下apache 停止、重启等操作
基本的操作方法:本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令:推荐/usr/local/apache2/bin/apachectl ...