可视化小案例ლ
（文件index.html,stytle.css实现，数据仅测试使用不准确）
-
导入下载过的js，css
<script src="../js/flexible.min.js"></script>
<script src="../js/echarts.min.js"></script>
<link rel="stylesheet" href="../css/style.css">
在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
index.html
<!DOCTYPE html>
<html style="font-size:300px;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
</style>
<script src="../js/flexible.min.js"></script>
<script src="../js/echarts.min.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="demo"></div>
<div class="header">大数据可视化后台</div>
<!-- 中间的盒子 -->
<div class="box">
<div class="l echarts">
<div class="panel">
<div class="line"></div>
<div class="box_charts" id="demo1"></div>
</div>
<div class="panel">
<div class="line"></div>
<div class="box_charts" id="demo2"></div>
</div>
</div>
<!-- 中间 -->
<div class="l info">
<div class="blight">
<!-- 访问数量 -->
<ul class="num">
<li>8</li><li>6</li><li>0</li><li>5</li><li>1</li><li>4</li>
</ul>
<div class="ball "></div>
<!-- <img src="../img/bg_ball.png" alt=""> -->
<!-- <img src="../img/bg_light_line.png" alt=""> -->
<div class="ball balline"><!-- 垫图的上下层关系 --></div>
<!-- 底部信息 -->
<div class="panel news">
<div class="l li_news">
<ol class="li_news l">
<li >     歌曲名称<span>Q音♡值</span></li>
<li><img src="../img/icon_1.png" alt="">《雅俗共赏》
<span>999w+</span>
</li>
<li><img src="../img/icon_2.png" alt="">《有何不可》
<span>999w+</span>
</li>
<li><img src="../img/icon_3.png" alt="">《乌鸦》
<span>100w+</span>
</li>
<li><img src="../img/icon_4.jpg" alt="">《科幻》
<span>10w+</span>
</li>
</ol>
</div>
<div class="news_r r">
<div class="box_charts" id="demo5"></div>
</div>
</div>
</div>
</div>
<!-- 右边 -->
<div class="l echarts">
<div class="panel">
<div class="line"></div>
<div class="box_charts" id="demo3"></div>
</div>
<div class="panel">
<div class="line"></div>
<div class="box_charts" id="demo4"></div>
</div>
</div>
<div class="c echarts">
</div>
</div>
<script>
var echarts1 = echarts.init(document.getElementById('demo1'));
// 第四步：指定容器的图表的配置项 饼状图还是柱状图 还有图里面的数据
var option1 = {
// 改变标题的数据与样式
title: {
left: 'center',
text: '奶茶店饮品销售数量',
show:true,//标题组件是否显示，默认显示
textStyle:{
color:'white',//标题变为红色
},
backgroundColor:'rgba(170,170,255,0.5)',
borderColor:'green',
},
//提示框属性
tooltip: {
// show:false,
},
legend: {
data: ['']
},
xAxis: {
axisLabel:{interval: 0},
data: ['四季春', '奶绿', '柠檬水', '果茶', '可乐', '冰淇淋'],
axisLine:{
lineStyle:{
color:'blue',
},
},
// 负责的文本的样式
axisLabel:{
// color:'white',
interval: 0,
textStyle: {
color: "white",
fontSize: "13",
},
// //设置文本值，不超过5个长度
formatter: function (value) {
return value.length >5 ? value.slice(0, 5) + "..." : value;
},
}
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [25, 20, 36, 17, 19, 20],
// 更改每一项的样式
itemStyle:{
color:function(params){
// 1单个颜色
// var colorList = ['#28adfd','#ea43a3', '#BBFFAA', '#ca8622', '#BBFFAA','#749f83', '#ca8622'];
// return colorList[params.dataIndex%4];//四个颜色一个循环
// 2渐变的颜色
// 总共颜色的一个调色版
var colorList = [
['#ffaaaa', '#aaaaff'],
['#aaaaff', '#00ff7f'],
['#92ffef', '#2398ff'],
['#712fff', '#1567ff'],
['#ff5599', '#ffaa00'],
];
//当前的颜色的变量
var colorItem = colorList[params.dataIndex%5];
return new echarts.graphic.LinearGradient(0, 0, 0,1, [{
offset: 0,
color: colorItem[0]},
{
offset: 1,
color: colorItem[1]},
], false);
},
}
}
]
};
echarts1.setOption(option1);
//第一个图标END
// 第二个饼状图
var echarts2 = echarts.init(document.getElementById("demo2"));
var option2 = {
title: {
text: '单饮品客户喜好',
textStyle:{
color:'white',
fontSize:14,
},
},
//触发提示
tooltip: {
trigger: 'item'
},
legend: {
top: '11%',
left: 'center',
textStyle:{
color:'#fff',
}
},
series: [
{
name: '喜爱值',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius:2,
// borderColor: '#fff',
borderWidth: 2,
color:function(params){
var colorList = [
['#55ffff', '#2398ff'],
['#712fff', '#1567ff'],
['#ff5599', '#ffaa00'],
];
//当前的颜色的变量
var colorItem = colorList[params.dataIndex%3];
return new echarts.graphic.LinearGradient(0, 0, 0,1, [{
offset: 0,
color: colorItem[0]},
{
offset: 1,
color: colorItem[1]},
], false);
},
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 17, name: '咖啡' },
{ value: 33, name: '奶茶' },
{ value: 50, name: '果茶' },
]
}
]
};
echarts2.setOption(option2);
//第二个饼状图END
// 第三个折线图
var echarts3 = echarts.init(document.getElementById("demo3"));
option3 = {
title: {
text: 'Stacked Line',
textStyle:{
color:'white',
fontSize:14,
},
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Video Ads', 'Search Engine'],
left: 'right',
textStyle:{
color:'#fff',
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{
lineStyle:{
color:'#1a4bff',
},
},
axisLabel:{
color: "white",
fontSize: "13",
},
},
yAxis: {
type: 'value',
axisLabel:{
color: "white",
fontSize: "13",
},
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
echarts3.setOption(option3);
// 第三个折线图END
// 第四个柱形图
var echarts4 = echarts.init(document.getElementById("demo4"));
option4 = {
legend: {
left: 'right',
textStyle:{
color:'#fff',
}
},
tooltip: {},
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{ product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
{ product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
{ product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
{ product: 'Walnut', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
]
},
xAxis: { type: 'category' ,
axisLabel:{
interval: 0,
color: "white",
fontSize: "13",
},},
yAxis: {
axisLabel:{
color: "white",
fontSize: "13",
},
},
series: [{ type: 'bar' ,
color:'#ff5599'}, { type: 'bar' }, { type: 'bar' }]
};
echarts4.setOption(option4);
// 第四个图END
// 第五个中间的折线图
// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
return item[0];
});
const valueList = data.map(function (item) {
return item[1];
});
var echarts5=echarts.init(document.getElementById('demo5'))
option5 = {
// Make gradient line here
visualMap: [
{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
},
],
grid: {
left: '3%',
right: '4%',
top: '11%',
bottom:'3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dateList,
axisLine:{
lineStyle:{
color:'#1a4bff',
},
},
axisLabel:{
color: "white",
fontSize: "13",
},
},
yAxis: {
type: 'value',
axisLabel:{
color: "white",
fontSize: "13",
},
},
series: [
{
type: 'line',
data: valueList
},
]
};
echarts5.setOption(option5);
// 第五个折线图END
// 浏览器的窗口发生变化时，echarts大小自适应
window.onresize = function() {
echarts1.resize();
echarts2.resize();
echarts3.resize();
echarts4.resize();
echarts5.resize();
};
</script>
</body>
</html>
styl.css
/* 页面初始化样式 */
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
a{
/* text-align: center; */
text-decoration: none;}
.l{float:left;}
.r{float: right;}
.c{clear: both;}
/* 页面主题样式 */
div{
box-sizing: border-box;
/* 不影响宽度了 */
}
/* .demo{
width: 200px;
height: 200px;
background: #fff;
padding: 20px; */
/* 不改变padding情况下,压缩content */
/* box-sizing: border-box;
} */
body{
background: #091220;
min-width: 1200px;
}
.box{
width: 100%;
min-width: 1200px;
padding:0 0.078125rem;
}
.header{
/* background-color: red; */
padding-top: 0.260417rem;
color: #fff;
font-size: 0.291667rem;
font-weight: bold;
text-align: center;
/* box-shadow: 0px 0px 10px 10px #fff; */
/* x,y偏移量,倍数, */
text-shadow: 0 0 2px #fff,
0 0 2px #fff,
0 0 2px #fff,
0 0 14px #1f395c,
0 0 19px #1f395c,
0 0 16px #1f395c,
0 0 15px #1f395c,
0 0 11px #1f395c;;
}
.echarts{
width: 25%;
margin-top: 0.520833rem;
/* 100px外边距 */
/* background-color: green; */
}
.info{
width: 50%;
/* background-color: blue; */
padding: 0.15625rem;
padding-top: 0;
/* 先后顺序有影响 */
}
.panel {
height: 1.822917rem;
/* 350px */
/* background: #0b1428; */
background: rgba(11, 20, 40,0.7);
/* 25px */
margin-bottom: 0.130208rem;
/* color: #fff; */
border-radius: 10px;
border:1px solid #263d60;
position: relative;
}
.panel .line{
width: 100%;
height: 1px;
top: 0px;
border-top: 1px solid;
border-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #00BBF2 50%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
}
.blight{
width: 100%;
height: 4.296875rem;
/* 100+350+25+350 825 */
background: url("../img/bg_light.jpg");
background-size: 100%;
position: relative;
}
.ball{
width: 3.90625rem;
height: 2.989583rem;
background: url("../img/bg_ball.png") no-repeat;
background-size: 100% 100%;
position: absolute;
/* top:10%;
left: 7%; */
top:0.413542rem;
left:50%;
transform: translateX(-50%);
animation: move4 20s linear infinite;
}
.balline{
background: url("../img/bg_light_line.png") no-repeat;
background-size: 100% 100%;
animation: move3 50s linear infinite;
}
.num{
text-align: center;
margin-top: 0.208333rem;
}
.num li{
display: inline-block;
width: 0.19rem;
height: 0.3125rem;
background: rgba(21, 39, 69,0.5);
color: #f7fbff;
font-size: 0.197917rem;
text-align: center;
border-radius: 10px;
margin: 0px 0.015625rem;
}
.news{
position:absolute;
width: 100%;
height: 1.119792rem;
bottom: 0.070083rem;
padding: 0.078125rem;
}
.li_news{
width: 2.494583rem;
/* background:red; */
}
.li_news li{
height: 0.192708rem;
line-height: 0.192708rem;
color: #fff;
font-size: 0.09375rem;
position: relative;
border-bottom: 1px dashed #1a3257;
/* background: #00BBF2; */
}
.li_news li img{
position: relative;
top: 0.015625rem;
margin-right: 10px;
}
.li_news li span{
display: block;
position: absolute;
width: 0.520833rem;
right: 0px;
top:0px
}
.news_r{
width: 1.858333rem;
height: 0.9935rem;
}
@keyframes move{
from{
transform: translateX(-100%) rotate(0deg);
}
to{
transform: translateX(-0%) rotate(360deg);
}
}
@keyframes move2{
0%{
transform: translateX(-50%) rotate(0deg);
}
50%{
transform: translateX(-50%) rotate(100deg);
}
100%{
transform: translateX(-50%) rotate(0deg);
}
}
@keyframes move3{
0%{
transform: translateX(-50%) rotate(0deg);
}
100%{
transform: translateX(-50%) rotate(-360deg);
}
}
@keyframes move4{
0%{
transform: translateX(-50%) rotate(0deg);
}
100%{
transform: translateX(-50%) rotate(360deg);
}
}
.box_charts{
width: 100%;
height: 100%;
/* margin: 6% 2%; */
/* padding-top: 4%; */
padding: 0.052083rem;
color: #fff;
margin-top: 0.078125rem;
}
1.为echarts对象加载数据
echarts4.setOption(option4);
// 不执行该语句，图表无显示
2.在option的lengend组件里可改变标签的位置和颜色
legend: {
left: 'right',
textStyle:{
color:'#fff',
}
},
3.在xAxis和yAxis中可以通过axisLine、axisLabel更改边框线条及坐标轴文字的颜色
axisLine:{
lineStyle:{
color:'#1a4bff',
},
},
axisLabel:{
color: "white",
fontSize: "13",
},
设置点击可将图表保存为图片
toolbox: {
feature: {
saveAsImage: {}
}
},
echarts 里系列类型就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
echarts示例
如下图，右侧的 option 中声明了三个 系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（series.data）。
数据从 dataset 中取
组件（component）
在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...
option 中声明了各个组件（包括系列），各个组件就出现在图中。
和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。
