【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制
折线图2引入html页面
一、需求
在右边的框架中填入新的折线图
设计稿
插入点
二、代码实现
(1)官网找到类似实例
(2)删掉不需要的内容:
(3)找到第三列,第二个图标
(4)将panel line 修改为panel line2
index.html
<div class="column">
<div class="panel bar2">
<h2>柱形图-就业行情</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div> <div class="panel line2">
<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></selection>
(5)新建一个立即执行函数
index.js
// 折线图2 模块制作
(function() {
// 1. 实例化对象
// 2.指定配置
// 3. 把配置给实例对象
})();
(6)实例化对象
// 折线图2 模块制作
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".line2 .chart"));
// 2.指定配置
(7)指定配置(从官网实例中拷贝option)到代码中
// 折线图2 模块制作
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".line2 .chart"));
// 2.指定配置
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
// 3. 把配置给实例对象
(8)把配置给实例对象
myChart.setOption(option);
效果
折线图2定制1-x,y轴及legend配置
一、需求
- 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12
- 修改图表大小
- 修改x轴相关配置: 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
- x轴线的颜色为 rgba(255,255,255,.2)
- 修改y轴的相关配置
二、代码实现
需求1: 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12
(1)在option中找到 legend,增加以下代码
index.js
// 2.指定配置
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
top: "0%",
data: ['Email', 'Union Ads'],
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
需求2: 修改图表大小
// 2.指定配置
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
top: "0%",
data: ['Email', 'Union Ads'],
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
},
},
grid: {
left: "5",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
效果
需求3: 修改x轴相关配置: 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
grid: {
left: "5",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 文本颜色为rgba(255,255,255,.6) 文字大小为 12 axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
}
],
需求4: x轴线的颜色为 rgba(255,255,255,.2)
grid: {
left: "5",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 文本颜色为rgba(255,255,255,.6) 文字大小为 12 axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// x轴线的颜色为 rgba(255,255,255,.2) axisLine: {
lineStyle: {
color: "rgba(255,255,255,.6)"
}
}
}
],
效果
需求5: 修改y轴的相关配置
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)"
}
}
}
],
效果
折线图2定制2-填充渐变区域
一、需求
- 修改两个线模块配置(注意在series 里面定制)
二、代码实现
需求1: 修改两个线模块配置(注意在series 里面定制)
(1)找到series,删除掉 stack: ‘Total’,
series: [
{
name: 'Email',
type: 'line',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
效果
(2)让线条变圆滑
smooth: true,
series: [
{
name: 'Email',
type: 'line',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true,
},
{
name: 'Union Ads',
type: 'line',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310],
smooth: true,
}
]
(3)单独修改线的样式
series: [
{
name: 'Email',
type: 'line',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true,
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
},
{
name: 'Union Ads',
type: 'line',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310],
smooth: true,
}
]
(4)到官网示例中,查看相关的配置
Documentation - Apache ECharts
(5)修改填充区域为渐变色
series: [
{
name: 'Email',
type: 'line',
areaStyle: {},
emphasis: {
focus: 'series'
},
// 填充区为渐变色
areaStyle: {
color: 'pink',
},
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true,
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
},
(6)增加影子颜色
series: [
{
name: 'Email',
type: 'line',
emphasis: {
focus: 'series'
},
// 填充区为渐变色
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, 0.1)" // 渐变线的结束颜色
}
],
false ),
//影子颜色
shadowColor: "rgba(0, 0, 0, 0.1)"
},
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true,
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
},
折线图2定制3-拐点定制
一、需求
设计稿
二、代码实现
(1)查阅官方示例
Documentation - Apache ECharts
(2)设置拐点为小圆点
(3)设置拐点大小为8
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
},
效果
// 设置拐点 小圆点
symbol: "circle",
// 点大小
symbolSize: 18,
切换为8
(4)开始不显示拐点, 鼠标经过显示
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
// 设置拐点 小圆点
symbol: "circle",
// 点大小
symbolSize: 8,
// 开始不显示拐点, 鼠标经过显示
showSymbol: false,
},
(5)设置拐点颜色以及边框
Documentation - Apache ECharts
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
// 设置拐点 小圆点
symbol: "circle",
// 点大小
symbolSize: 8,
// 开始不显示拐点, 鼠标经过显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
},
折线图2定制4-数据更换
一、需求
- 需求1:设置第二条线的拐点
- 需求2: 更换数据
二、代码实现
需求1:设置第二条线的拐点
找到 series: 的第二个对象,在第二个对象里面设置
(1)设置第二条线为圆滑
(2)设置第二条线的样式
(3)渐变色填充
{
name: 'Union Ads',
type: 'line',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310],
//第二条 线是圆滑
smooth: true,
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)"
}
},
},
(4)设置拐点 小圆点
(5)设置拐点大小为5
(6)设置拐点颜色以及边框
(7)开始不显示拐点, 鼠标经过显示
{
name: 'Union Ads',
type: 'line',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310],
//第二条 线是圆滑
smooth: true,
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)"
}
},
// 设置拐点 小圆点
symbol: "circle",
// 设置拐点大小为8
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 开始不显示拐点, 鼠标经过显示
showSymbol: false,
},
需求2: 更换数据
(1)更换x轴更换数据
(2)更换series 第一个对象data数据
(3)更换series 第二个对象data数据
xAxis: [
{
type: 'category',
boundaryGap: false,
// x轴更换数据
data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
// 文本颜色为rgba(255,255,255,.6) 文字大小为 12 axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// x轴线的颜色为 rgba(255,255,255,.2) axisLine: {
lineStyle: {
color: "rgba(255,255,255,.6)"
}
}
}
],
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: 'Email',
type: 'line',
emphasis: {
focus: 'series'
},
// 填充区为渐变色
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, 0.1)" // 渐变线的结束颜色
}
],
false ),
//影子颜色
shadowColor: "rgba(0, 0, 0, 0.1)"
},
data: [ "16","17","18","19","20","06","07","08","09","10","16","17","18","19","20","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
smooth: true,
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
// 设置拐点 小圆点
symbol: "circle",
// 点大小
symbolSize: 8,
// 开始不显示拐点, 鼠标经过显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
},
{
name: 'Union Ads',
type: 'line',
emphasis: {
focus: 'series'
},
data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
//第二条 线是圆滑
smooth: true,
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)"
}
},
// 设置拐点 小圆点
symbol: "circle",
// 设置拐点大小为8
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 开始不显示拐点, 鼠标经过显示
showSymbol: false,
},
]
需求3:让图表跟随屏幕自动的去适应
// 3. 把配置给实例对象
myChart.setOption(option);
//4. 让图标跟随屏幕去自动适应
window.addEventListener("resize",function(){
myChart.resize();
});
可视化大屏项目参考链接
【可视化大屏开发】1.基础开发环境准备_pblh123的博客-CSDN博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-CSDN博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-CSDN博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-CSDN博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-CSDN博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-CSDN博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-CSDN博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-CSDN博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-CSDN博客
17.可视化大屏配置之代码整理资源-CSDN文库
可视化大屏项目动态数据样例资源-CSDN文库