[## 数据可视化
- 借助图形化的手段，清晰有效的沟通信息
- 数据可视化可以把数据从冰冷的数字转换为图形，揭示数据的规律和道理
可视化适配方案
- 使用less实现css编写
使用到less，可以在vscode中安装easy less插件，配合nodejs,然后安装less
npm i less -g
也可以使用下面下载:
cnpm i less -g
详情可以查看less官网，使用方法和sass差不多，官网是中文的，方便阅读
- 适配方案
- 使用flexible.js+rem实现自适应
下面是flexible.js文件代码
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);
检查页面的html标签是否有font-size即可验证是否引入
- 设计稿样式改变适配
案例中设计稿样式是1920像素的，flexible.js默认划分成10等分，那么1rem就是192px；我认为太大了，选择划分24等份,1rem为80像素
function setRemUnit(){
var rem =docEl.clientWidth/24;
docEl.style.fontStyle=rem+"px";
}
- 使用cssrem插件将rem设置为1rem的值
vscode中安装cssrem,将CssRem:Root Font Size值设置为80px即可（打开插件面板，点击设置logo进入后搜索关键词即可）
之后使用px会有转换为rem的提示，使用即可
可视化项目头部制作
- css
body {
background:url("") no-repeat top center;
min-width:1024px;
line-height:1.15;//根据父元素字体大小调节
}
//头部
header {
//width默认100%
height:1.25rem;
background:url("../images/head.png") no-repeat;
background-size:100% 100%;
position:relative;
//头部标题
h1 {
font-size:.475rem;
color:#fff;
text-align:center;
line-height:1rem;
}
//显示时间,h1占满整个盒子，所以使用定位
showTime {
position:absolute;
right:.375rem;
top:0;
line-height:0.9375rem;
color:rgba(255,255,255,,0.7);
font-size:0.25rem;
}
}
- html
//头部的盒子
<header>
<h1>数据可视化-Echarts</h1>
<div class="showTime"></div>
</header>
- js
var t =null;
t =setTimeout(time,1000);
function time(){
clearTimeout(t);
dt =new Date();
var y = dt.getFullYear();
var mt =dt.getMonth();
var day = dt.getDate();
var h =dt.getHours();
var m = dt.getMinutes();
var s =dt.getSeconds();
document.querySelector(".showTime").innerHTML ='当前时间'+y+'年'+mt+'月'+day+'日'+"-"+h+"时"+m+"分"+s+"秒";
t= setTimeout(time,1000)//设置定时器，循环运行
}
页面主体部分
- html
//页面主体盒子
<section class="mainbox">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</section>
- css
//页面主体盒子
.mainbox {
min-width:1024px;//这样手机端就看不了了，缩放底线
max-width:1920px;
margin:0 auto;//水平居中，不适用于浮动定位元素，还要内联元素
padding:0.125rem 0.125rem 0 ;
display:flex;
.column {
flex:3;//集体占据三分
}
&:ntjh-child(2){
flex:5;//第二个占据五分，不生效改权重
}
}
- js
公共盒子面板panel
作为所有表格的容器来使用
- html
<section class="mainbox>
<div class="column">
<div class="panel">
<div class="panel_footer"></div>
</div>
</div>
<div class="column"></div>
<div class="column"></div>
</section>
- css
.panel {
height:3.875rem;
border:1px solid rgba(25,186,139,0.17);
background:url("../images/line.jpg") rgba(255,255,255,0.04);
padding:0 0.1875rem 0.5rem;
margin-bottom；1.1875rem;
position:relative;
//使用伪元素加上面两个角样式
&::before {
content:"";
position:absolute;
top:0;
left:0;
width:10px;
height:10px;//这种小像素不需要转换
border-left:2px solid #02a6b5;
border-top:2px solid #02a6b5;
}
&::after {
content:"";
position:absolute;
top:0;
right:0;
width:10px;
height:10px;//这种小像素不需要转换
border-right:2px solid #02a6b5;
border-top:2px solid #02a6b5;
}
//下面两个角
.panel-footer {
position:absolute;
bottom:0;
left:0;
width:100%;
//使用伪元素加上面两个角样式
&::before {
content:"";
position:absolute;
left:0;
bottom:0;
width:10px;
height:10px;//这种小像素不需要转换
border-left:2px solid #02a6b5;
border-bottom:2px solid #02a6b5;
}
&::after {
content:"";
position:absolute;
bottom:0;
right:0;
width:10px;
height:10px;//这种小像素不需要转换
border-right:2px solid #02a6b5;
border-bottom:2px solid #02a6b5;
}
}
}
- js
柱形图
- html
<section class="mainbox>
<div class="column">
//里面加上了bar类
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<!--这里放图表-->
<div class="chart"></div>
<div class="panel_footer"></div>
</div>
</div>
<div class="column"></div>
<div class="column"></div>
</section>
- css
.panel {
//省略其他的样式代码
h2 {
height:.6rem;
color:#fff;
line-height:0.6rem;
text-align:center;
font-size:0.25rem;
font-weight:400;
}
.chart {
height:3rem;
}
}
- js
复制六份就是六个图表框
两侧图表中间的地图模块
no模块制作(数字模块制作)
- html
//页面主体盒子
<section class="mainboc>
<div class="column"></div>
<div class="column">
<!--上部数字模块-->
<div class="no">
<div class="no-hd">
<ul>
<li>123456</li>
<li>123456</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>前端需求人数</li>
<li>市场供应人数</li>
</ul>
</div>
</div>
</div>
<div class="column"></div>
</section>
- css
//去除ul样式
li {
list-style:none;
}
//声明图标字体
@font-size{
font-family:electronicFont;
src:url("./font/DS-DIGIT.TTF");
}
.panel {
//数字模块
.no {
background:rgba(101,132,226,0.1);
padding；0.1875rem;
//no-head制作
.no-hd {
position:relative;
border:1px solid rgba(25,186,139,0.17);
ul {
display:flex;
li {
position:relative;
flex:1;
line-height:1rem;
font-size:.875rem;
color:#ffeb7b;
//使用图标字体
font-family:electronicFont;
}
//li之间加上一个竖线
&:nth-child(1)::after{
content:"";
position:absolute;
top:25%;
right:0;
height:50%;
width:1px;
}
}
}
//给head加上小角
&::before{
position:absolute;
top:0;
left:0;
content:'',
width:30px;
height:10px;
border-top:2px solid #02a6b5;
border-left:2px solid #02a6b5;
}
&::after{
position:absolute;
bottom:0;
right:0;
content:'',
width:30px;
height:10px;
border-bottom:2px solid #02a6b5;
border-right:2px solid #02a6b5;
}
//no-bd设置
.no-bd {
ul{
display:flex;
li{
flex:1;
text-align:center;
color：rgba(255,255,255,0.7);
height:.5rem;
line-height:.5rem;
font-size:0.225rem;
padding-top:0.125rem;
}
}
}
}
//给中间大模块加上margin样式
.column:nth-child(2){
flex:5;
margin:0 .125rem .1875rem;
}
}
map模块
- html
<div class="column">
<div class="no"></div>
<!--地图模块-->
<div class="map">
<!--地球球体-->
<div class="map1"></div>
<!--球体旋转1-->
<div class="map2"></div>
<!--箭头旋转1-->
<div class="map3"></div>
<!--地图模块-->
<div class="chart"></div>
</div>
</div>
- css
.map {
hieght:10.125rem;
.map1 {
width:6.475rem;
height:6.475rem;
//定位到中央
position:absolute;
top:50%;
left:50%;
transform:translate(-50%，-50%);
background:url("../images/map.png");
opacity:.3;
//保证背景图跟着缩放
background-size:100% 100%;
}
.map2 {
//需要做动画，压住之前的球体
position:absolute;
top:50%;
left:50%;
transform:translate(-50%，-50%);
width:8.0375rem;
height:8.0375rem;
bakcground:url("../images/lbx.png");
//调用动画
animation:rotate1 15s linear infinite;
opacity:0.6;
background-size:100% 100%;
}
.map3 {
background-size:100% 100%;
//需要做动画，压住之前的球体
position:absolute;
top:50%;
left:50%;
transform:translate(-50%，-50%);
width:7.075rem;
height:7.075rem;
bakcground:url("../images/jt.png");
//调用动画逆时针旋转
animation:rotate2 15s linear infinite;
opacity:0.6;
}
//地图模块
.chart {
position:absolute;
top:0;
left:0;
background-color:pink;
width:100%;
height:10.125rem;
}
@keyframes rotate1 {
from {
transform:translate(-505 -50%) rotate(0deg);
}
to {
transform:translate(-505 -50%) rotate(360deg);
}
}
@keyframes rotate2 {
from {
transform:translate(-505 -50%) rotate(0deg);
}
to {
transform:translate(-505 -50%) rotate(-360deg);
}
}
}
echarts简介
- 常见的可视化库
- D3.js:目前web端评价最高的JavaScript可视化工具库(入手难)
- Echarts.js： 百度出品,apache托管的开源JavaScript可视化工具库
- HighCharts.js 国外大公司使用，非商用免费
- AntV 蚂蚁金服全新一代可视化方案
- HighCharts和Echarts关系像是WPS和Office
- echarts官网
点击进入echarts官网
点击示例可以看到很多图表
echarts使用五部曲
1. 下载并引入echarts.js文件
2. 准备一个具备大小的DOM容器
3. 初始化echarts实例对象
4. 指定配置项和数据(option)
5. 将配置项设置给echarts实例对象
官网五分钟上手有下载等信息
- 下面是基本使用
<html>
<head></head>
<style>
.box {
height:300px;
width:300px;
background-color:pink;
}
</style>
<body>
<div class="box"></div>
<script src="js/echarts.min.js" ></script>
<script>
//初始化实例对象
var myChart = echarts.init(document.querySelector(".box");
//指定配置项和数据
var option ={
title:{
text:"Echarts 入门示例"
},
toolTip:{
},
legend:{
}
...
}
//把配置项给实例对象
myChart.setOption(option);
</script>
</body>
</html>
Echarts基础配置
点击实例–》官网实例
option = {
//设置线条的颜色
color:["red","green",'yellow',"blue","black"]
//设置表格标题
title:{
"设置表格标题"
},
//图表的提示框组件
toolTip:{
//触发方式坐标轴||柱状图的柱体
trigger:'axis||item'
},
//图例组件，点击可以让图形（如折线图的一条线）显示消失
legend:{
//series里面有了name值，则legend里面的data可以删掉
data:["邮件营销","联盟广告"]
},
//工具箱组件，可以另存为等
toolBox:{
feature:{
//另存为图片配置
saveImage:{}
}
},
//直角坐标系相关配置
//网格配置（网格就是图形显示区域，不包含坐标轴），控制图表大小
grid:{
left:'3%',
right:'4%',
bottom:'3%',
//是否显示刻度标签
containLabel:true
},
//设置X轴相关配置
xAixs:{
//坐标轴显示类型，是子还是数字值，这里是类目
type:'category',
//图形开头是否紧贴坐标轴（是否有缝隙）
boundaryGap:false,
data:['周一','周二','周三','周四','周五','周六','周天']
},
yAxis:{
//这里是数值，可以和X轴调换
type:'value'
},
//决定显示哪种类型的图表，这里五条线
series:[
{
//图形对象名称(折线图当前这条线的名称)
name:'邮件营销',
//数据显示类型，这里是折线图，改为bar为柱形图
type:'line',
//数据堆叠，没什么用，线的起点不重叠，需要同一类，如这里为120起点，下面的起点为240，不是同样在120
stack:'总量',
data:[120,132,101,13490,230,210]
},
{
name:'广告联盟',
type:'line',
stack:'总量',
data:[120,132,101,13490,230,210]
},
{
name:'广告联盟2',
type:'line',
stack:'总量',
data:[120,132,101,13490,230,210]
},
{
name:'广告联盟3',
type:'line',
stack:'总量',
data:[120,132,101,13490,230,210]
},
{
name:'广告联盟4',
type:'line',
stack:'总量',
data:[120,132,101,13490,230,210]
}
]
}
柱状图bar引入HTML页面中
-
官网中找到类似实例，按照五部曲实现
另建index.js实现图形实例创建 -
使用自调用函数
防止变量污染，减少命名冲突，里面的变量都是局部变量
//index.js
(function(){
//实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
//指定配置项和数据
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
//把配置项给实例对象
myChart.setOption(option);
})();
定制柱状图
- 将柱子的颜色修改为#2f89cf
option = {
color:['#2f89cf']
}
- 将柱子修改为圆角和减小柱子宽度
option = {
series:[
{
name:'名字',
type:'bar',
//柱子宽度
barWidth:'35%',
data:[10,53,345,64,564,4],
itemStyle:{
//修改柱子圆角
barBorderRadius:5
}
}
]
}
- 添加柱体影子
option= {
toolTip:{
trigger:'axis',
axisPointer:{
//鼠标放上去显示影子或者线
type:"shadow||line"
}
}
}
- 修改图表大小
option={
grid:{
left:"0%",
top:"10%",
bottom:"4%"，
right:"0%",
containLabel:true
}
}
- 设置X轴相关信息：修改文字大小和颜色，X轴样式不显示
option ={
xAxis:{
//修改刻度标签样式
axisLabel:{
color:"rgba(255,255,255,.6)",
fontSize:"12"
},
//不显示x坐标轴样式
axisLine:{
show:false
}
}
}
- 设置y轴的线条样式
option ={
yAxis:{
axisLine:{
lineStyle:{
color:"rgba(255,255,255,.6)",
width:2
}
}
}
}
- y轴分隔线修改（就是x轴上面的几条横着的线）
option ={
yAxis:{
//修改Y轴分割线的颜色
splitLine:{
lineStyle:{
color:"rgba(255,255,255,.1)"
}
}
}
}
更换柱状图对应数据
//x轴中更换data数据
data:["旅游",'居家',"汽车游"]
//series中换数据（一般ajax中请求）
data:[100,200,344]
Echarts图表随着屏幕缩放适配
(function(){
window.addEventListener('resize',function(){
myChart.resize();
})
})()
Y轴显示我们想要的数据，X轴不显示（柱形图）
- 官网找实例
<div class="column">
<div class="panel bar2">
<h2>柱形图-就业行情</h2>
<div clsas="chart">图表</div>
<div class=-"panel-footer"></div>
</div>
</div>
- 引入样式
(function(){
//1. 实例化对象
var myChart =echarts.init(document.querySalector(".bar2 .chart"));
//2.配置
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
//3. 配置给对象
myChart.setOption(0option);
})()
- 定制
option = {
grid: {
left: '22%',
left: "22%"",
bottom: '10%'，
containLabel:true//grid大小是否将label包含在内，这里注释掉
},
xAxis: {
show:false//不显示X轴相关信息
},
yAxis: {
type: 'category',
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']，
//不显示y轴的线
axisLine:{
show:false
},
//不显示刻度
axisTick:{
show:false;
}
//Y轴文字颜色设置为白色(刻度标签设置为白色)
axisLabel:{
color:"#fff"
}
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
- 将上面两组柱子修改为一组，以进度条形式显示
(function(){
//定义第一组颜色数组
var myColor = ["#1089E7","#F57474","#56D0E3","f8b448","#8b78f6"]
option = {
grid: {
left: '22%',
left: "22%"",
bottom: '10%'，
containLabel:true//grid大小是否将label包含在内，这里注释掉
},
xAxis: {
show:false//不显示X轴相关信息
},
yAxis: [
{
type: 'category',
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']，
//不显示y轴的线
axisLine:{
show:false
},
//不显示刻度
axisTick:{
show:false;
}
//Y轴文字颜色设置为白色(刻度标签设置为白色)
axisLabel:{
color:"#fff"
}
},
//这是Y轴第二组数据（就是横向柱状图右边的Y轴）
{
//显示出来
show:true,
data:[1,2,3,4,5],
//不显示Y轴坐标
axisLine:{
show:false
}
//不显示刻度
axisTick:{
show:false
},
//刻度标签文本样式设置
axisLabel:{
textStyle:{
fontSize:12,
color:"#fff"
}
}
}
],
//series里面有两组柱子，所以有两组样式
series: [
//将第一组改为里面的条
{
name: '条',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]，
//修改第一组柱子的圆角
itemStyle:{
barBorderRadius:20，
//第一组都会变为粉色，注释掉不使用
color:'pink'
//下面设置使颜色不一致
//首先需要外面注册一个颜色数组
color:function(params){
console.log(params);//这一组的六个柱子对象
return myColor[params.dataIndex]
}
}
//修改柱子之间的距离
barCategoryGap:50,
//柱子的宽度
barWidth:10，
//设置第一组柱子里面的百分比数据
//显示柱子里面的文字
label:{
normal：{
show:true,
//
position：“inside",
//标签内容格式 {a}系列名 ，{b}数据名称,{c}数据值
formatter:"{c}%"//自动将第一组date解析出来加上百分比符号
}
}
},
//将第二组改为外面的框
{
name: '框',
type: 'bar',
borderCategoryGap；50，
barWidth:15,
itemStyle:{
//每个颜色消失
color:"none",
//给外面边框加上颜色
borderColor:"#00c1de",
//给边框加厚
borderWidth:3,
//边框加上圆角
barBorderRadius:15
},
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
- 将第二组柱子框包含第一组柱子条(使用yAxisIndex,相当于定位)
series: [
{
name: '条',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]，
//加上yAxisIndex定位
yAxisIndex:0,
itemStyle:{
barBorderRadius:20，
color:'pink'，
color:function(params){
console.log(params);
return myColor[params.dataIndex]
}
}
barCategoryGap:50,
barWidth:10，
label:{
normal：{
show:true,
position：“inside",
formatter:"{c}%"
}
}
},
{
name: '框',
type: 'bar',
borderCategoryGap；50，
//给第二组也加上yAxisIndex
yAxisIndex:1,
barWidth:15,
itemStyle:{
color:"none",
borderColor:"#00c1de",
borderWidth:3,
barBorderRadius:15
},
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
- 将坐标轴转过来
发现y轴数据和刻度标签和我们需要的不一样
yAxis里面的inverse:true,//将Y轴翻转，加到yAxis里面
注意第二组也需要改
折线图
- 找到相应的图形实例进行引用
//大致和上面步骤一致
(function(){
//1. 实例化对象
var myChart = echrts.init(document.querySelector(".line .chart"))
//2.引入配置
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
//3. 把配置给实例化对象
myChart.setOption(option);
})()
- 根据需求进行定制
//需求列表
1. 修改折线图大小，显示边框设置颜色：#012f4a，并显示刻度标签
grid :{
top:"20%",
left:"3%",
right:"4%",
bottom:"3%",
show:true,//显示边框
borderCOlor:"#012f4a",//边框颜色,
containLabel:true//包含刻度文字在内
}
2. 修改图例组件中的文字颜色#4c9bfd,距离右侧right为10%
legend:{
textStyle：{
color:"red"
},
//必须使用引号（定位）
right:"10%"
}
3. x轴相关配置
3.1 刻度去除
3.2 x轴刻度标签颜色
3.3 剔除坐标轴颜色（将来使用Y轴分割线就行了）
3.4 轴两端不需要内间距boundaryGap
xAxis:{
axisTick:{
show:false
},
axisLabel:{
color:"#4c9bfd"
},
axisLine:{
show:false
},
boundaryGap:false//去除轴内间距
}
4. y轴相关配置
4.1去除刻度
4.2 y轴刻度标签颜色
4.3 剔除坐标轴颜色
4.4 分割线颜色设置
前三个和上面一致，第四个
yAixs:{
splitLine:{
lineStyle:{
color:"#123f4a"
}
}
}
5. 定制两条线的样式
5.1颜色分别：#00f2f1 #ed3f35
5.2把折线图修饰为圆滑，series中添加smothsmooth为true
color:["#00f2f1","#ed3f35"],
series:[{
smooth:true
}]
6.折线图更换数据
将ajax请求到的数据渲染到表格中
后端返回给我们两个数组形式，上面的折线图新增功能，点击切换2020年数据和2021年数据（点击按钮放到title里面了）
//后端数据
var yearDate = [
{
year:"2020",
date:[
//一年的两条线
[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",
date:[、
//数据没改
[24,40,101,134,90,230,210,230,120,230,210,120],
[40,64,191,324,290,330,310,213,180,200,180,79]
]
}
]
//前端代码
$(".line h2").on("click","a",function(){
var obj = yearData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
//数据变了需要刷新配置
myCharts.setOption(option);
})
//页面一打开2020年数据
将series中data思数据换成yearData[0].data[0]，依次类推
带颜色的折线图（播放量模块的制作）
- 官网中找实例
//折线图2制作
(function(){
var myChart = echarts.init(document.querySelector(".line2 .chart"));
option = {
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
})()
- 定制
需求列表
1. 更换图例组件文字颜色rgba(255,255,255,.5)，文字大小为12
legend:{
top:"0%",
textStyle:{
color:"rgba(255,255,255,.5)",
fontSize:"12"
}
}
2. 修改图表大小
grid:{
left:"10",
top:"30",
right:"10",
bottom:"10",
containLabel:true
}
3. X轴相关配置
3.1 修改文本颜色，文字大小
3.2 X轴颜色修改
axisLabel:{
textStyle:{
color:“rgba(255,255,255,.6)",
fontSize:12
}
},
axisLine:{
lineStyle:{
color:"rgba(255,255,255,.2)"
}
}
4.y轴配置修改
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:"rgba(255,255,255,.3)"
}
},
axisLabel:{
textStyle:{
color:"rgba(255,255,255,.2)",
fontSize:12
}
},
splitLine:{
lineStyle:{
color:"rgba(255,255,255,.2)"
}
}
- 修改两个线模块配置（注意在series里面定制）
series:[
{
smooth:true,//圆滑
//单独修改当前图线的样式
lineStyle:{
color:"red",
width:"3"
},
//填充区域
areaStyle:{
//渐变色，只要复制即可
//color:“pink”,
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,.1)"//渐变色结束颜色
}
],false),
shadowColor:"rgba(0,0,0,.1)"
},
//设置拐点 小圆点,rect正方形，arrow三角
symbol:"circle",
//设置拐点大小
symbolSize:30
//是否显示拐点,false鼠标经过拐点显示
showSymbol:false,
//itemStyle可以设置拐点颜色和边框
itemStyle:{
color:"#354544"，
borderColor:"rgba(0,0,0,.1)",
borderWidth:12
}
}
]
饼形图（年龄分布模块的制作）
- 找实例引入
//删掉了series里面的ememphasis属性，将鼠标移入之后中间的提示给删掉了
(function(){
//实例化对象
var myChart =echarts.init(document.querySelector(".pie .chart"));
//配置
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
//3. 倒入配置
myChart.setOption(option)
})()
- 定制饼图
需求列表
1. 修改图例组件在底部并且居中显示
2. 每个图标的大小和高度修改为10px
3. 文字大小为12，颜色rgba(255,255,255,.5)
legend:{
//距离底部10%
bottom:"0%",
//小图标的宽度和高度
itemWidth:10,
itemHeight:10,
//修改图例组件的文字为12px
textStyle:{
color:"rgba(255,255,255,.5)",
fontSize:"12"
}
}
4. 修改饼形图
4.1修改水平居中、垂直居中
4.2修改内圆半径和外圆半径为["40%，60%"]，前面通过grid修改大小，这里使用radius
series:[
{
name:"年龄分布",
type:"pie",
//设置饼形图在容器中位置
center:["50%",50%"],
//修改内圆半径和外圆半径，百分比都是相对于容器宽度来说的
radius:["40%","60%"],
//不显示文字标签,position:"center"为显示时出现的位置，在圈中间，
//不加这个将show改为true,每个饼形图外面都有name文字提示
label:{show:false，position:"center"},
//不显示连接线，连接线就是链接上面显示时文字的线
labelLine:{
show:false
}
}
]
4.3 更换颜色和相应数据
//legend中data，因为下面series中有name了，这里省略
//series中数据
data:[
{value:1,name:'0岁以下'},
{value:4,name:"20-29岁"},
{value:2，name:"30-39岁"},
{value:1,name:"40-49岁"},
{value:5,name:"50岁及其以上"}
]
//color可以在series中和color中写
南丁格尔玫瑰图（地区分布）
- 官网找示例
//删除带有还原等功能的toolBox还有title
(function(){
//
var myChart =echarts.init(document.querySelector(".pie2"))
//
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [30, 110],
center: ['75%', '50%'],
roseType: 'area',
data: [
{value: 10, name: 'rose1'},
{value: 5, name: 'rose2'},
{value: 15, name: 'rose3'},
{value: 25, name: 'rose4'},
{value: 20, name: 'rose5'},
{value: 35, name: 'rose6'},
{value: 30, name: 'rose7'},
{value: 40, name: 'rose8'}
]
}
]
};
//
myChart.setOption(option)
})()
- 定制
需求列表
1. 颜色设置
color：["#111111"，“#222222”，“#333333”，"#444444","#555555","#666666"]
2. 修改饼形图大小
series:[
{
radius:["10%","70%"],
center:["75%"，"50%"]
]
3.将面积模式(area)改为半径模式(radius)
series:[{
roseType:"radius"
}]
4. series里面数据替换掉
{value:20,name:"云南"},按照这种格式编写
5. 修改文字大小和连接线长度
ser.es:[{
//图形的文字标签
label:{
fontSize:10
}
//修改连接线
labelLine:{
length:50,//第一段的线长
length2:40//第二段的线长
}
}]
5. 图例样式修改
legend:{
bottom:"0%",
itemWidth:10,
itemHeight:10,
textStyle:{
textStyle:{
color:"rgba(255,255,255,.5)",
fontSize:12
}
}
}
中国地图模拟飞行模块引入到html中
中国地图其实由很多的点组成的
进入到官网社区，点击gallery,里面也有筛选功能，点击本段文字跳转
从里面找到模拟飞机航线的案例，复制定制使用
我们想要使用中国地图需要使用china.js文件，提供中国地图的js文件
地图下城实现方式
//必须先引入china.js这个文件
<script src="./js/china.js></script>
//模拟飞行航线
(function(){
})()
约束屏幕缩放
//小于1024px
@media screen and (max-width:1024px){
html{
// 1024/24得来的字体大小，根据划分数量
font-size:42px ! important;
}
}
//大于1920px
@media screen and (min-width:1920){
html {
// 也是除以24得到
font-size:80px !important;
}
}
- 图片旋转超出：给外部容器加上overflow:hidden;这样滚动条就不会跳动了
图表自适应
window.addEventListener("resize", function() {
myChart.resize();
});
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
