此项目是根据黑马课程实现的ECharts数据可视化项目
项目地址： https://gitee.com/destiny-wind/data-visualization.git
1、Echarts简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html
1.ECharts 使用步骤
1、下载并引入Charts.js文件
<script src="./js/echarts.min.js"></script>
2、准备一个具备大小的DOM容器
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
3、初始化echarts实例对象
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
4、指定配置项和数据(option)
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
5、将配置项设置给echarts实例对象
myChart.setOption(option);
2.Echarts基础配置
1、series（系列）
每个系列通过 series.type 决定自己的图表类型（图表数据，指定什么类型的图表，可以多个图表重叠）。
2、xAxis：直角坐标系 grid 中的 x 轴
3、yAxis：直角坐标系 grid 中的 y 轴
4、grid：直角坐标系内绘图网格
5、title：标题组件
6、tooltip：提示框组件
7、legend：图例组件
8、color：调色盘颜色列表
9、boundaryGap:
坐标轴两边留白策略，类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，可以保证刻度线和标签对齐。这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
10、数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
示例：
let option = {
// color设置线条的颜色 注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
// 设置图表的标题
title: {
text: '折线图堆叠123'
},
// 图表的提示框组件
tooltip: {
// 触发方式
trigger: 'axis',
// 坐标轴指示器，坐标轴触发有效
axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// 图例组件
legend: {
// series里面有了 name值，则 legend里面的data可以删掉
},
// 网格配置 grid可以控制线形图 柱状图 图表大小
grid: {
top: "10%",
left: "22%",
bottom: "10%"，
// 是否显示刻度标签 如果是true 就显示， false则不显示
containLabel: true
},
// 工具箱组件 可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 设置x轴的相关配置
xAxis: {
show:false
},
// 设置y轴的相关配置
yAxis: [
{
type: 'category',
inverse: true,
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
//不显示y轴线条
axisLine: {
show: false
// 如果想要设置单独的线条样式
// lineStyle: {
// color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
// }
},
// 不显示刻度
axisTick: {
show: false
},
Y轴的文字颜色和大小
axisLabel:{
color:"#fff"，
fontSize: "12"
}，
// y 轴分隔线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
},
{
type: 'category',
inverse: true,
data: [702, 350, 610, 793, 664],
//不显示y轴线条
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
axisLabel:{
color:"#fff",
fontSize:12
}
},
],
// 系列图表配置 它决定着显示那种类型的图表
series: [
{
name: 'bar',
type: 'bar',
// 柱子之间的距离
barCategoryGap:50,
// 修改柱子宽度
barWidth:10,
itemStyle:{
// 修改柱子圆角
barBorderRadius:20,
//给 itemStyle 里面的color 属性设 置一个 返回值函数
// params 传进来的是柱子对象
color:function(params){
// dataIndex 是当前柱子的索引号
return myColor[params.dataIndex];
}
},
data: [70, 34, 60, 78, 69],
// 图形上的文本标签
label:{
normal:{
show: true,
// 图形内显示
position: "inside",
// 文字的显示格式 {c} 会自动的解析为 数据 data里面的数据
formatter: "{c}%"
}
},
yAxisIndex: 0, //层级关系
},
{
name: 'box',
type: 'bar',
barCategoryGap: 50,
barWidth: 15,
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
},
data: [100, 100, 100, 100, 100],
yAxisIndex: 1, //层级关系
}
]
};
2、项目步骤
1、flexible插件内将屏幕改为划分24份
1920/42=80
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
2、cssrem插件基准值修改为80
3、把屏幕宽度约束在1024-1920之间有适配（媒体查询）
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
html {
font-size: 42.66px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
4、图片边框
盒子大小不一，但是边框样式相同，此时就需要边框样式来完成
border-image
1、border-image-source：定义边框图像的路径；
2、border-image-slice：定义边框图像从什么位置开始分割；上右下左顺序
3、border-image-width：定义边框图像的厚度（宽度）；
4、border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；
5、border-image-repeat：定义边框图像的平铺方式。
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;
5、字体图标
通过类名调用字体图标
1、HTML页面引入字体图标中css文件
2、标签直接调用图标对应类名即可
6、无缝滚动
1、先克隆marquee里面所有的行
2、通过CSS3动画滚动marquee
3、鼠标经过marquee就停止动画
animation-play-state:paused;
通过CSS3动画滚动,marquee
@keyframes move {
0% {
}
100%{
transform: translateY(-50%);
}
}
调用的时候
animation: move 15s linear infinite;
7、南丁格尔玫瑰图
1、先到官网找到类似的图
2、根据需求修改具体的配置
option = {
title: {
text: 'Nightingale Chart',
subtext: 'Fake Data',
left: 'center'
},
//图形触发
tooltip: {
trigger: 'item',
//格式化提示内容
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: [
'rose1',
'rose2',
'rose3',
'rose4',
'rose5',
'rose6',
'rose7',
'rose8'
]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Radius Mode',
type: 'pie',
radius: [20, 140],
center: ['25%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 33, name: 'rose 2' },
{ value: 28, name: 'rose 3' },
{ value: 22, name: 'rose 4' },
{ value: 20, name: 'rose 5' },
{ value: 15, name: 'rose 6' },
{ value: 12, name: 'rose 7' },
{ value: 10, name: 'rose 8' }
]
},
{
name: 'Area Mode',
type: 'pie',
// 图的半径
radius: [20, 140],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 30, name: 'rose 1' },
{ value: 28, name: 'rose 2' },
{ value: 26, name: 'rose 3' },
{ value: 24, name: 'rose 4' },
{ value: 22, name: 'rose 5' },
{ value: 20, name: 'rose 6' },
{ value: 18, name: 'rose 7' },
{ value: 16, name: 'rose 8' }
]
}
]
};
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
