本文介绍ECharts，一个强大的JavaScript图表库，适用于各种场景。文章详细讲解了ECharts的安装与基本用法，并通过实战案例展示了如何创建复杂的饼图和条形图，包括数据加载和动态更新。
ECharts
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
echarts的下载：
https://github.com/apache/incubator-echarts/tree/4.8.0 下载好后，在dist - echarts.js
导入js：
<script src="echarts.min.js"></script>
第一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
应用：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="../../../static/css/public.css" media="all"/>
<link rel="stylesheet" href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="childrenBody">
<form class="layui-form">
<blockquote class="layui-elem-quote quoteBox">
<form class="layui-form">
<div class="layui-inline" has-permission="000500000020">
<label class="layui-form-label">员工</label>
<div class="layui-input-block">
<select name="eid" id="eid" lay-search class="searchVal">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">日期</label>
<div class="layui-input-block">
<input type="text" class="layui-input searchVal" name="date" id="date">
</div>
</div>
</form>
<a class="layui-btn search_btn" data-type="reload">搜索</a>
<table id="list" lay-filter="list"></table>
<div class="list-page" id="page"></div>
</blockquote>
</form>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="income" style="width: 800px;height:500px;"></div>
<div id="out" style="width: 800px;height:500px;"></div>
<div id="tiaoxing" style="width: 800px;height:500px;"></div>
<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../../static/layui/layui.js"></script>
<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
<script type="text/javascript" src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
<script src="../../../static/echart/echarts-all-3.js"></script>
<script type="text/javascript">
layui.use(['form', 'layer', 'table', 'laypage', 'laytpl', 'laydate'],
function () {
// 基于准备好的dom，初始化echarts实例
var income = echarts.init(document.getElementById('income'));
var out = echarts.init(document.getElementById('out'));
// 指定图表的配置项和数据
var incomeopt = null;
var outopt = null;
// http://127.0.0.1:28052/ossjk-oa//api/fmth/countbytype?cptacount=-1&cptdate=2020
loadAjax("../../../api/fmth/countbytype", "get", {
cptacount: -1,
cptdate: 2020
}, function (response) {
baseCallBack(response, function (response) {
var name = [];
for (var i = 0, l = response.data.length; i < l; i++) {
var typec = null;
for (var key in response.data[i]) {
typec = response.data[i]["typec"];
}
name.push(typec);
}
// console.log(name);
var dataM = [];
for (var i = 0, l = response.data.length; i < l; i++) {
var datajs = null;
datajs = {value: response.data[i].cptacount, name: response.data[i].typec}
dataM.push(datajs);
}
// console.log(dataM);
// console.log(response);
incomeopt = {
title: {
text: '2020年总收入类型分布',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: name
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: dataM,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//
income.setOption(incomeopt);
});
});
// http://127.0.0.1:28052/ossjk-oa//api/fmth/countbytype?cptacount=-1&cptdate=2020
loadAjax("../../../api/fmth/countbytype", "get", {
cptacount: 1,
cptdate: 2020
}, function (response) {
baseCallBack(response, function (response) {
var name = [];
for (var i = 0, l = response.data.length; i < l; i++) {
var typec = null;
for (var key in response.data[i]) {
typec = response.data[i]["typec"];
}
name.push(typec);
}
// console.log(name);
var dataM = [];
for (var i = 0, l = response.data.length; i < l; i++) {
var datajs = null;
datajs = {value: response.data[i].cptacount, name: response.data[i].typec}
dataM.push(datajs);
}
// console.log(dataM);
// console.log(response);
outopt = {
title: {
text: '2020年总收入类型分布',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: name
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: dataM,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
out.setOption(outopt);
});
});
//条形图：：：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('tiaoxing'));
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 1; i < 13; i++) {
xAxisData.push(i + "月");
data1.push((Math.random() * 2).toFixed(2));
data2.push(-Math.random().toFixed(2));
data3.push((Math.random() * 5).toFixed(2));
data4.push((Math.random() + 0.3).toFixed(2));
}
var emphasisStyle = {
itemStyle: {
barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
option = {
backgroundColor: '#eee',
legend: {
data: ['支出', '收入', 'bar3', 'bar4'],
left: 10
},
brush: {
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
xAxisIndex: 0
},
toolbox: {
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
name: 'X Axis',
axisLine: {onZero: true},
splitLine: {show: false},
splitArea: {show: false}
},
yAxis: {
inverse: true,
splitArea: {show: false}
},
grid: {
left: 100
},
visualMap: {
type: 'continuous',
dimension: 1,
text: ['High', 'Low'],
inverse: true,
itemHeight: 200,
calculable: true,
min: -2,
max: 6,
top: 60,
left: 10,
inRange: {
colorLightness: [0.4, 0.8]
},
outOfRange: {
color: '#bbb'
},
controller: {
inRange: {
color: '#2f4554'
}
}
},
series: [
{
name: '支出',
type: 'bar',
stack: 'one',
emphasis: emphasisStyle,
data: data1
},
{
name: '收入',
type: 'bar',
stack: 'one',
emphasis: emphasisStyle,
data: data2
},
{
name: 'bar3',
type: 'bar',
stack: 'two',
emphasis: emphasisStyle,
data: data3
},
{
name: 'bar4',
type: 'bar',
stack: 'two',
emphasis: emphasisStyle,
data: data4
}
]
};
myChart.on('brushSelected', renderBrushed);
function renderBrushed(params) {
var brushed = [];
var brushComponent = params.batch[0];
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
var rawIndices = brushComponent.selected[sIdx].dataIndex;
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
}
myChart.setOption({
title: {
backgroundColor: '#fff',
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
bottom: 0,
right: 0,
width: 100,
textStyle: {
fontSize: 12,
color: '#fff'
}
}
});
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//-----end
})
</script>
</body>
</html>
接口返回的数据：
{
"code": 1000,
"data": [
{
"cptacount": 666.00,
"typec": "学员补贴"
},
{
"cptacount": 201.00,
"typec": "应收款项"
},
{
"cptacount": 478.20,
"typec": "项目款"
}
],
"msg": "操作成功"
}
效果图：
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
