前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- 1.HTML
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
"height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
backgroundColor: '#0E2A43',
tooltip: {
show: true,
formatter: "{b}:{c}"
},
grid: {
left: '5%',
top: '12%',
right: '1%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
"splitLine": { //网格线
"show": false
},
inverse: 'true', //排序
axisLine: {
show: false,
lineStyle: {
color: '#fff',
}
},
data: ['first', 'two', 'three', 'four']
},
yAxis: [{
type: 'value',
show: false,
position: 'top',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#fff',
}
},
splitLine: {
show: false
},
}],
series: [{
name: '能耗值',
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: {
color: 'white' //color of value
}
}
},
itemStyle: {
//通常情况下：
normal: {
barBorderRadius: 8,
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function(params) {
var colorList = [
['#b250ff', 'rgba(11,42,84,.3)'],
['#ff9717', 'rgba(11,42,84,.3)'],
['#61dbe8', 'rgba(11,42,84,.3)'],
['#1ace4a', 'rgba(11,42,84, 0.3)'],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
},
},
},
barGap: '0%',
barCategoryGap: '50%',
data: [60, 132, 89, 134]
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
