【Echarts项⽬】前端就业数据可视化（HTML+Less+JavaScript+jQu。。。技术栈
项⽬展⽰
在线体验(推荐）
源码
笔记教程
⽂件架构以及部分源码展⽰
⽂件架构
架构其实就是简单的前端三剑客
部分源码展⽰
核⼼代码index.js，主要包含对echarts的配置
// 柱状图模块1 左边纵向
(function(){// ⽴即执⾏函数
// 1实例化对象
var myChart = echarts.init(document.querySelector(".bar1 .chart")); // 2. 指定配置项和数据
var option ={
color:["#2f89cf"],
tooltip:{
trigger:"axis",
axisPointer:{
/
/ 坐标轴指⽰器，坐标轴触发有效
type:"shadow"// 默认为直线，可选为：'line' | 'shadow' }
},
// 修改图表的⼤⼩
grid:{
left:"0%",
top:"10px",
right:"0%",
bottom:"4%",
containLabel:true
},
/
/ x轴
xAxis:[{
type:"category",
data:[
"旅游⾏业",
"教育培训",
"游戏⾏业",
"医疗⾏业",
"电商⾏业",
"社交⾏业",
"⾦融⾏业"
]
,
axisTick:{
alignWithLabel:true
},
// 修改刻度标签相关样式
fontSize:10
},
// 不显⽰x坐标轴的样式
axisLine:{
show:false
}
textstyle}],
// y轴
yAxis:[{
type:"value",
// 修改刻度标签相关样式
axisLabel:{
color:"rgba(255,255,255,.6) ",
fontSize:12
},
// y轴的线条改为了 2像素
axisLine:{
lineStyle:{
color:"rgba(255,255,255,.1)",
width:2
}
},
// y轴分割线的颜⾊
splitLine:{
lineStyle:{
color:"rgba(255,255,255,.1)"
}
}
}],
series:[{
name:"直接访问",
type:"bar",
barWidth:"35%",
data:[200,300,300,900,1500,1200,600],
itemStyle:{
// 修改柱⼦圆⾓
barBorderRadius:5
}
}]
};
// 3. 把配置项给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕⾃动的去适应
window.addEventListener("resize",function(){
});
})();
// 柱状图2 横向
(function(){
var myColor =["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"]; // 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. 指定配置和数据
var option ={
grid:{
top:"10%",
left:"22%",
bottom:"10%"
// containLabel: true
},
// 不显⽰x轴的相关信息
xAxis:{
/
/ 两组y轴数据左右
{
type:"category",
inverse:true,// 反转坐标轴
data:["HTML5","CSS3","javascript","VUE","NODE"], // 不显⽰y轴的线
axisLine:{
show:false
},
// 不显⽰刻度
axisTick:{
show:false
},
// 把刻度标签⾥⾯的⽂字颜⾊设置为⽩⾊
axisLabel:{
color:"#fff"
}
},
{
data:[702,350,610,793,664],
inverse:true,
// 不显⽰y轴的线
axisLine:{
show:false
},
// 不显⽰刻度
axisTick:{
show:false
},
// 把刻度标签⾥⾯的⽂字颜⾊设置为⽩⾊
axisLabel:{
color:"#fff"
}
}
]
,
series:[
// 两组数据重叠成⼀个
{
name:"条",
type:"bar",
data:[70,34,60,78,69],
yAxisIndex:0,// 类似z-index
// 修改第⼀组柱⼦的圆⾓
itemStyle:{
barBorderRadius:20,
/
/ 此时的color 可以修改柱⼦的颜⾊
color:function(params){
// params 传进来的是柱⼦对象
// console.log(params);
// dataIndex 是当前柱⼦的索引号
return myColor[params.dataIndex];
}
},
// 柱⼦之间的距离
barCategoryGap:50,
//柱⼦的宽度
barWidth:10,
// 显⽰柱⼦内的⽂字
label:{
show:true,
position:"inside",
// {c} 会⾃动的解析为数据  data⾥⾯的数据
{
name:"框",
type:"bar",
barCategoryGap:50,
barWidth:15,
yAxisIndex:1,
data:[100,100,100,100,100],
itemStyle:{
color:"none",
borderColor:"#00c1de",
borderWidth:3,
barBorderRadius:15
}
}
]
};
/
/ 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕⾃动的去适应
window.addEventListener("resize",function(){
});
})();
// 折线图1模块制作左边
(function(){
// 年份数据
var yearData =[{
year:"2020",// 年份
data:[
// 两个数组是因为有两条线
[24,40,101,134,90,230,210,230,120,230,210,120],
[40,64,191,324,290,330,310,213,180,200,180,79]
]
},
{
year:"2021",// 年份
data:[
// 两个数组是因为有两条线
[123,175,112,197,121,67,98,21,43,64,76,38],
[143,131,165,123,178,21,82,64,43,60,19,34]
]
}
];
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".line1 .chart")); // 2.指定配置
var option ={
// 通过这个color修改两条线的颜⾊
color:["#00f2f1","#ed3f35"],
tooltip:{
trigger:"axis"
},
legend:{
// 如果series 对象有name 值，则 legend可以不⽤写data
// 修改图例组件⽂字颜⾊
textStyle:{
color:"#4c9bfd"
},
// 这个10% 必须加引号
right:"10%"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。