ECharts图表联动Demo

最新推荐文章于 2020-12-27 14:31:34 发布

阿杰杰杰

最新推荐文章于 2020-12-27 14:31:34 发布

阅读量4.9k

点赞数 1

1、下载ECharts

地址：http://echarts.baidu.com/download.html

2、引入ECharts

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="echarts.min.js"></script>

<script src="jquery-3.1.1.min.js"></script>
</head>
</html>

3、图表联动显示数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="echarts.common.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<style>
</style>
</head>
<body>
<div id="main-area" style="height: 500px;"></div>
</body>
</html>
<script>
$(document).ready(function() {
// 基于准备好的dom，初始化echarts实例
var dom = document.getElementById('main-area');
var myChart = echarts.init(dom);
//数据模拟
var date_array = ["2018-04-01","2018-04-02","2018-04-03","2018-04-04","2018-04-05","2018-04-06","2018-04-07","2018-04-08","2018-04-09","2018-04-10","2018-04-11","2018-04-12","2018-04-13","2018-04-14","2018-04-15","2018-04-16","2018-04-17"];
var submit_success=[11,222,333,444,55,33,22,34,57,64,27,171,193,424,85,197,176];
var submit_fail=[62,76,67,66,65,64,36,26,45,96,54,66,42,19,25,16,23];
var report_success=[33,444,55,66,33,444,43,22,54,57,27,164,167,397,819,115,149];
var report_fail =[166,266,36,46,55,65,67,86,366,76,6,35,55,66,96,26,36];
var report_waiting = [3,4,5,5,3,2,3,2,3,3,4,5,6,7,2,1,2];

var option = {
//左边的标题
title: [{
//标题内容
text: '提\n交\n总\n数',
//上边距
top: "15%",

}, {
text: '状\n态\n报\n告\n数',
top: '42%'

}, {
text: '状\n态\n报\n告\n等\n待\n数',
top: '70%'
}],
tooltip: {
//坐标轴触发
trigger: 'axis'
},
//联动图表显示数据
axisPointer: {
link: {xAxisIndex: 'all'}
},
//图例组件
legend: {
data:['提交成功数量','提交失败数量','状态报告成功数量','状态报告失败数量','状态报告等待数'],
},
//x轴的配置信息
xAxis: [
//第一个x轴的配置信息
{
//是否显示x轴，false为隐藏,默认为展示
show: true,
//x轴数据
data: date_array,
//x轴所在的grid的索引
gridIndex: 0,
//坐标轴轴线相关设置。
axisLine:{
lineStyle:{
//x轴线宽度
width:1,
//x轴线的类型，dashed:虚线 solid:实线 dotted:虚线
type: 'dashed'
}
},
//坐标轴刻度标签的相关设置
axisLabel: {
//隐藏x轴文字:true为展示
show:false
},
//坐标轴刻度相关设置。
axisTick:{
//隐藏x轴刻度
show:false
}
},
//第二个x轴的配置信息
{
show: true,
data: date_array,
gridIndex: 1,

axisLine:{
lineStyle:{
width:1,
type: 'dashed'
},
},
axisLabel: {
show:false
},
axisTick:{
show:false
}
},
//第三个x轴的配置信息
{
data: date_array,
gridIndex: 2,
axisTick: {
//刻度线和标签对齐,即刻度线居中显示
alignWithLabel: true
}
}],
//y轴配置信息
yAxis: [{
//坐标轴名称
name: '数量',
//坐标轴type类型：
//'value' 数值轴，适用于连续数据。
//'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
//'time' 时间轴，适用于连续的时序数据
//'log' 对数轴。适用于对数数据。
type : 'value',
//坐标轴在 grid 区域中的分隔线，true为显示，默认为显示
splitLine: {show: false}
},{
type : 'value',
splitLine: {show: false},
gridIndex: 1
},{
type : 'value',
splitLine: {show: false},
gridIndex: 2
}
],
//控制图表大小、位置
grid: [
//第一个图表配置信息
{
//左边距
left: 90,
//右边距
right: 70,
//上边距
top: '10%',
//高度
height: '25%',
},
//第二个图表配置信息
{
left: 90,
right: 70,
top: '38%',
height: '25%'
},
//第三个图表配置信息
{
left: 90,
right: 70,
top: '66%',
height: '25%'
}],

series: [
{
//系列名称
name :'提交成功数量',
//图表类型：line 折线 bar 柱状
type: 'bar',
color:'#6edaee',
//图表数据
data: submit_success,
//设置柱子之间的宽度
barCategoryGap:1,
barGap:'0%',
//数据堆叠，stack配置相同后则柱子叠加显示
stack:'提交'
},{
name :'提交失败数量',
type: 'bar',
color:'#f8a8a5',
data: submit_fail,
barCategoryGap:1,
barGap:'0%',
stack:'提交'
},{
name :'状态报告成功数量',
type: 'bar',
color:'#8ef4c6',
data: report_success,
barCategoryGap:1,
barGap:'0%',
//跟上面配置的gridIndex相对应
xAxisIndex: 1,
yAxisIndex: 1,
stack:'状态报告'
},{
name :'状态报告失败数量',
type: 'bar',
color:'#d4d4d3',
data: report_fail,
barCategoryGap:1,
barGap:'0%',
xAxisIndex: 1,
yAxisIndex: 1,
stack:'状态报告'
},{
name :'状态报告等待数',
type: 'bar',
color:'#fd9274',
data: report_waiting,
barGap:'0%',
barCategoryGap:1,
xAxisIndex: 2,
yAxisIndex: 2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//自适应窗口
$(dom).sizeChanged(myChart.resize);
});

//自适应窗口
(function ($) {
$.fn.sizeChanged = function (handleFunction) {
var element = this;
//获取图表div的宽度
var lastWidth = element.width();
//获取图表div的高度
var lastHeight = element.height();
//每100毫秒执行一次
setInterval(function () {
//如果图表div的宽度和高度没有变化则不执行操作
if (lastWidth === element.width() && lastHeight === element.height())
return;
//重置图表大小
if (typeof (handleFunction) == 'function') {
element.height(500);
handleFunction();
//记录重置后的图表宽度和高度，用于下次对比
lastWidth = element.width();
lastHeight = element.height();
}
}, 100);
return element;
};
}(jQuery));
</script>

4、ECharts详细配置项

地址：http://echarts.baidu.com/option.html#title

5、效果预览

5、Demo完整代码

EchartsDemo.rar

阿杰杰杰

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
ECharts图表联动Demo

1、下载ECharts地址：http://echarts.baidu.com/download.html2、引入ECharts&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script src="echar
复制链接

扫一扫