echarts -01 入门
1.效果图
2. code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript"> require.config({ // // 路径配置
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) { // 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量'] // 销量是黄颜色柱条， 不同的字显示不同的颜色！！！
},
xAxis : [ //x轴的 标记
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value' // y轴的数值是根据series数组中的data数组的最大值来定的
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 60, 10, 10, 20]
}
]
}; myChart.setOption(option); // 为echarts对象加载数据
}
);
</script>
</head>
<body>
<div id="main" style="height: 400px"></div>
</body>
</html>
echarts -01 入门的更多相关文章
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- [译]Vulkan教程(01)入门
[译]Vulkan教程(01)入门 接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...
- Echarts和Highcharts学习笔记01——入门了解
Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ECharts简单入门
图1和图2是手机上显示的效果, 图3是电脑浏览器显示的效果. 如何使用ECharts? 1.下载echarts.js 2.引入echarts.js <script type="text ...
- ECharts快速入门
一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...
- ECharts简单入门demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Echarts轻松入门，内附踩坑秘籍
首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
- Echarts快速入门---------v客学院技术分享
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
随机推荐
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-按钮设置
按钮设置是配置当前步骤的处理者可以执行哪些操作,每个按钮都有对应的执行脚本(javascript脚本). 从左边的按钮列表中选择当前步骤需要的按钮. 注意:如果是流程最后一步则要配置完成按钮而不是发送 ...
- JBPM4.4+SSH 整合配置及完整实例
整合jBPM4.4+ssh过程(spring接管struts2和hibernate,例中都整合在application.xml中,没有单独的jbpm.hibernate.cfg.xml): 1.在se ...
- Qt make clickable label 制作可点击的Label控件
Qt中的Label标签控件的作用绝不仅仅限于显示静态文本,其实它的功能很强大,由于其有setPixmap()成员函数,故而可以当显示图片窗口使用,而且还可以实时显示摄像头捕获的图片,然后它对鼠标事件的 ...
- 每用户订阅上的所有人SID 不存在
ArcEngine开发查询时出现异常 摘自:http://shaopengluo.blog.163.com/blog/static/1314464152011112144855776/ 检查发现是Qu ...
- cms 二级域名修改信息
\CMS\Collect\PageRes.cs _content = _content.Replace(r.orgurl, newurl); _content = _content.Replace(r ...
- WinEdt选项卡配置
不小心把选项卡(标签页.多tab)整没了.搜了一下: 在工具栏点击右键可以发现配置.
- Word 2013双引号的BUG
相信使用Word 2013的朋友大多碰到过这样一个双引号的bug: 问题详细描述: word2013中,打字时引号出现问题,在输入中文情况下,输入左引号为中文,输入右引号时会自动变成英文.微软自己的输 ...
- NVPerfHUD
http://www.cnblogs.com/cproom/archive/2006/11/13/559287.html NVPerfHUD是一个很好的3D程序调试工具,它是NVPerfKit的一部分 ...
- Apache Spark源码走读之20 -- ShuffleMapTask计算结果的保存与读取
欢迎转载,转载请注明出处,徽沪一郎. 概要 ShuffleMapTask的计算结果保存在哪,随后Stage中的task又是如何知道从哪里去读取的呢,这个过程一直让我困惑不已. 用比较通俗一点的说法来解 ...
- Linux 执行ThinkPHP 文件的计划任务
执行例如 http://192.168.1.32/index.php?s=/Home/Cron/yue 这样的 url 的计划任务 方式① */ * * * * curl http://192.168 ...