# 综合应用
******
* 实现灵活应用
* [在线演示](http://demo.sgfoot.com/ECharts/mix.html)
>[info] 完整代码
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合</title>
<script type="text/javascript" src="../asset/js/echarts.common.min.js"></script>
<style>
div{
display: inline-block;
}
</style>
</head>
<body>
<div id="bar" style="width: 2000px;height:400px;"></div>
<script>
bar();
function bar() {
var myChart = echarts.init(document.getElementById("bar"));
// 指定图表的配置项和数据
var data = new Array();
var data1 = new Array();
var data2 = new Array();
var num = new Array();
for(var i = 1;i < 1000; i++) {
data.push(Math.ceil(Math.random()*100));
data1.push(Math.ceil(Math.random()*90));
data2.push(Math.ceil(Math.random()*80));
num.push(i);
}
var option = {
title: {
text: 'ECharts 矩形图',
subtext: '来自时光演示网',
sublink: 'http://demo.sgfoot.com',
left: 'center',
textStyle: {
color: '#2E3299'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'slider',
show: true,
start: 94,
end: 100,
handleSize: 40
},
{
type: 'inside',
start: 94,
end: 100
},
{
type: 'slider',
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 12,
height: '70%',
handleSize: 8,
showDataShadow: false,
left: '93%'
}
],
legend: {
orient: 'vertical',
left:'right',
data:['浏览量', '销量', 'view'],
textStyle: {
color: '#000'
}
},
xAxis: {
data: num
},
yAxis: {},
series: [{
name: '浏览量',
type: 'line',
data: data,
label: {
normal: {
show: true,
position: 'top'
}
}
},{
name: '销量',
type: 'bar',
data: data1,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
},{
name: 'view',
type: 'bar',
data: data2,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
</body>
</html>
~~~
- 总导航
- 第一章 前端
- 1.0 js自定义模板
- 第二章 PHP
- 1.0 推荐博客
- 2.0 基础理论
- 0.1 require和include区别
- 0.2 php运行机制
- 0.3 Http请求与响应
- 0.4 http响应状态
- 3.0 Laravel框架
- 0.1 Eloquent ORM
- 0.2 时间处理
- 0.3 数据迁移
- 0.4 填充数据
- 4.0 composer安装
- 5.0 缓存
- 0.1 Opcache
- 0.2 Memcache
- 0.3 Redis
- 0.4 Output buffer
- 第三章 MYSQL
- 1.0 新增和重置密码
- 第四章 前端插件集
- 1.0 PreloadJS
- 0.1 LoadQueue
- 0.2 加载单个文件
- 0.3 加载进度显示
- 0.4 加载指定目录图片
- 0.5 加载json图片
- 2.0 Swiper
- 3.0 ECharts
- 0.1 简单实例
- 0.2 title操作
- 0.3 tooltip操作
- 0.4 top显示数字
- 0.5 双数据显示
- 0.6 大数据缩放显示
- 0.7 综合
- 4.0 Vue
- 0.1 模板语法
- 0.2 条件与循环
- 0.3 处理用户输入
- 0.4 计算属性
- 0.5 事件绑定
- 0.6 动态渲染列表
- 5.0 layui
- 0.1 动态渲染nav
- 0.2 layer使用
- 6.0 IScroll
- 7.0 AlloyTouch
- 8.0 jquery.tagsinput
- 9.0 Editormd
- 第五章 应用软件
- 1.0 Xshell
- 一螺集
- PHP
- 打印一天的区间时间
- 友好时间输出
- 导出Excel
- JAVASCRIPT
- js回车事件