<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<header>
<h1>可视化展板-ECharts</h1>
<div class="showTime"></div>
</header>
<section class="mainbox">
<div class="column">
<div class="panel bar">
<h2>
柱状图-就业行业 <a href="javascript:;">2019</a>
<a href="javacript:;"> 2020</a>
</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line">
<h2>折线图-人员变化</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie">
<h2>饼形图-年龄分布</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
<div class="column">
<div class="no">
<div class="no-hd">
<ul>
<li>125811</li>
<li>104563</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>前端需求人数</li>
<li>市场供应人数</li>
</ul>
</div>
</div>
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
</div>
<div class="column">
<div class="panel bar1">
<h2>柱状图-技能掌握</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line1">
<h2>折线图-播放量</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie1">
<h2>饼形图-地区分布</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
</section>
<script>
function getTime() {
var date = new Date();
var year = date.getFullYear(); //获取年份
var month = date.getMonth() + 1; //获取月份
var day = date.getDate(); //获取日期
var hour = date.getHours(); //获取小时
hour = hour < 10 ? '0' + hour : hour;
var minute = date.getMinutes(); // 获取分
minute = minute < 10 ? '0' + minute : minute;
var seconds = date.getSeconds(); //获取秒
seconds = seconds < 10 ? '0' + seconds : seconds;
return '当前时间 : ' + year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + seconds +
'秒';
}
setInterval(function() {
document.querySelector('.showTime').innerHTML = getTime();
}, 1000)
</script>
<script src="js/flexible.js"></script>
<script src="js/jquery.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
<script src="js/myMap.js"></script>
</body>
</html>
index.js
// 柱状图1模块
(function() {
// 基于准备好的dom 实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和数据
var option = {
color: ["#2f89cf"],
tooltip: {
trigger: "axis", //通过坐标轴触发
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true //防止标签溢出
},
xAxis: [{
type: "category",
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业"
],
// 设置坐标轴刻度
axisTick: {
alignWithLabel: true //刻度居中
},
axisLabel: { //轴标签
textStyle: { //标签样式
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisLine: { //是否显示坐标轴
show: false
}
}],
yAxis: [{
type: "value",
axisLabel: { //轴标签
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisLine: { //轴样式
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
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 //圆角柱状
}
}]
};
// 把配置给实例对象
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
// 数据变化
var dataAll = [{
year: "2019",
data: [200, 300, 300, 900, 1500, 1200, 600]
},
{
year: "2020",
data: [300, 400, 350, 800, 1800, 1400, 700]
}
];
$(".bar h2 ").on("click", "a", function() {
option.series[0].data = dataAll[$(this).index()].data;
myChart.setOption(option);
});
})();
// 折线图定制
(function() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector(".line .chart"));
// 1.准备数据
var data = {
year: [
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
};
// 2. 指定配置和数据
var option = {
color: ["#00f2f1", "#ed3f35"],
tooltip: {
// 通过坐标轴来触发
trigger: "axis"
},
legend: {
// 距离容器10%
right: "10%",
// 修饰图例文字的颜色
textStyle: {
color: "#4c9bfd"
}
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
show: true,
borderColor: "#012f4a", //网格颜色
containLabel: true //防止标签溢出
},
xAxis: {
type: "category",
boundaryGap: false, //x轴两端留白
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
// 去除刻度
axisTick: {
show: false
},
// 修饰刻度标签的颜色
axisLabel: {
color: "rgba(255,255,255,.7)"
},
// 去除x坐标轴的颜色
axisLine: {
show: false
}
},
yAxis: {
type: "value",
// 去除刻度
axisTick: {
show: false
},
// 修饰刻度标签的颜色
axisLabel: {
color: "rgba(255,255,255,.7)"
},
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#012f4a"
}
}
},
series: [{
name: "新增粉丝",
type: "line",
stack: "总量",
// 是否让线条圆滑显示
smooth: true,
data: data.year[0]
},
{
name: "新增游客",
type: "line",
stack: "总量",
smooth: true,
data: data.year[1]
}
]
};
// 3. 把配置和数据给实例对象
myChart.setOption(option);
// 重新把配置好的新数据给实例对象
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 饼形图定制
// 折线图定制
(function() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector(".pie .chart"));
option = {
tooltip: { //设置弹窗
trigger: "item", //数据项触发
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function(p) {
//其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
}
},
legend: { //图例组件
top: "90%",
itemWidth: 10, //图形宽度
itemHeight: 10, //图形高度
data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
textStyle: { //文字样式
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [{
name: "年龄分布",
type: "pie",
center: ["50%", "42%"], //圆心
radius: ["40%", "60%"], //半径
color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", "#06b4ab", "#06c8ab", "#06dcab", "#06f0ab"],
label: {
show: false
},
labelLine: {
show: false
},
data: [ //设置数据的具体值
{
value: 1,
name: "0岁以下"
},
{
value: 4,
name: "20-29岁"
},
{
value: 2,
name: "30-39岁"
},
{
value: 2,
name: "40-49岁"
},
{
value: 1,
name: "50岁以上"
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 学习进度柱状图模块
(function() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector(".bar1 .chart"));
var data = [70, 34, 60, 78, 69];
var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
var valdata = [702, 350, 610, 793, 664];
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
option = {
//图标位置
grid: {
top: "10%",
left: "22%",
bottom: "10%"
},
xAxis: {
show: false
},
yAxis: [{
show: true,
data: titlename,
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff",
rich: {
lg: {
backgroundColor: "#339911",
color: "#fff",
borderRadius: 15,
// padding: 5,
align: "center",
width: 15,
height: 15
}
}
}
},
{
show: true,
inverse: true,
data: valdata,
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
}
}
],
series: [{
name: "条",
type: "bar",
yAxisIndex: 0,
data: data,
barCategoryGap: 50,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 20,
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num];
}
}
},
label: {
normal: {
show: true,
position: "inside",
formatter: "{c}%"
}
}
},
{
name: "框",
type: "bar",
yAxisIndex: 1,
barCategoryGap: 50,
data: [100, 100, 100, 100, 100],
barWidth: 15,
itemStyle: {
normal: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 折线图 优秀作品
(function() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector(".line1 .chart"));
option = {
tooltip: {
trigger: "axis", //设置提示框的触发方式
axisPointer: {
lineStyle: {
color: "#dddc6b"
}
}
},
legend: { //配置图例组件
top: "0%",
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true //防止标签溢出
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
},
data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "11", "12", "13", "14", "15",
"16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"
]
},
{
axisPointer: {
show: false
},
axisLine: {
show: false
},
position: "bottom",
offset: 20
}
],
yAxis: [{
type: "value",
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}],
series: [ //配置数据系列
{
name: "播放量",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
color: "#0184d5",
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(1, 132, 213, 0.4)"
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
itemStyle: {
normal: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
}
},
data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40,
30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40
]
},
{
name: "转发量",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
color: "#00d887",
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
itemStyle: {
normal: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
}
},
data: [50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 80, 30, 50,
60, 10, 50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10, 40
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 点位分布统计模块
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie1 .chart"));
// 2. 指定配置项和数据
var option = {
legend: {
top: "90%",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
tooltip: {
trigger: "item", //设置触发方式
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 注意颜色写的位置
color: ["#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"],
series: [{
name: "点位统计",
type: "pie", //南丁格尔玫瑰图属于饼图的一种
// 如果radius是百分比则必须加引号
radius: ["10%", "70%"], //设置半径
center: ["50%", "42%"], //设置圆心
roseType: "radius", //设置南丁格尔玫瑰图参数：半径模式
data: [ //设置数据的具体值
{
value: 20,
name: "云南"
},
{
value: 26,
name: "北京"
},
{
value: 24,
name: "山东"
},
{
value: 25,
name: "河北"
},
{
value: 20,
name: "江苏"
},
{
value: 25,
name: "浙江"
},
{
value: 30,
name: "深圳"
},
{
value: 42,
name: "广东"
}
],
// 修饰饼形图文字相关的样式 label对象
label: {
fontSize: 10
},
// 修饰引导线样式
labelLine: {
// 连接到图形的线长度
length: 10,
// 连接到文字的线长度
length2: 10
}
}]
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option);
// 4. 当我们浏览器缩放的时候，图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
})();