ECharts可视化大屏学习笔记【4】（折线图）

本章节记录折线图写法
图1：

图2：

一、折线图1

1.学习点

grid配置（网格样式）
legend配置（图例）
x轴、y轴的定制：刻度+坐标轴线+轴标签+轴内间距+分割线
两条线修饰为圆滑（series 中添加 smooth 为 true）
数据交互（模拟了json数据）

2.详细步骤

找一个模板（后面一个也是基于这个修改的）：

需求1：修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。

    // 设置网格样式grid: { top: '20%',left: '3%',right: '4%',bottom: '3%',show: true,// 显示边框borderColor: '#012f4a',// 边框颜色containLabel: true // 包含刻度文字在内},

需求2：修改图例组件中的文字颜色 #4c9bfd，距离右侧 right 为 10%

 // 图例组件legend: {textStyle: {color: '#4c9bfd' // 图例文字颜色},right: '10%' // 距离右边10%},

需求3： x轴相关配置

刻度去除
x轴刻度标签字体颜色：#4c9bfd
剔除x坐标轴线颜色（将来使用Y轴分割线)
轴两端是不需要内间距 boundaryGap

    xAxis: {type: 'category',data: ["周一", "周二"],axisTick: {show: false // 去除刻度线},axisLabel: {color: '#4c9bfd' // 文本颜色},axisLine: {show: false // 去除轴线},boundaryGap: false  // 去除轴内间距},

需求4： y轴的定制

刻度去除
字体颜色：#4c9bfd
分割线颜色：#012f4a

    yAxis: {type: 'value',axisTick: {show: false  // 去除刻度},axisLabel: {color: '#4c9bfd' // 文字颜色},splitLine: {lineStyle: {color: '#012f4a' // 分割线颜色}}},

需求5：两条线形图定制

颜色分别：#00f2f1 #ed3f35
把折线修饰为圆滑 series 数据中添加 smooth 为 true

    color: ['#00f2f1', '#ed3f35'],series: [{name:'新增粉丝',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',// 折线修饰为圆滑smooth: true,},{name:'新增游客',data: [100, 331, 200, 123, 233, 543, 400],type: 'line',smooth: true,}]

需求6：配置数据

// x轴的文字
xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

// 图标数据series: [{name:'新增粉丝',data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],type: 'line',smooth: true},{name:'新增游客',data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     type: 'line',smooth: true}}]

需求7：新增需求点击 2020年 2021年数据发生变化

以下是后台送过来数据（ajax请求过来的）

 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]]}];

tab栏切换事件
点击2020按钮需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
点击2020按钮需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
2021 按钮同样道理

完整代码：

// 折线图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(".line .chart"));// 2.指定配置var option = {// 通过这个color修改两条线的颜色color: ["#00f2f1", "#ed3f35"],tooltip: {trigger: "axis"},legend: {// 如果series 对象有name 值，则 legend可以不用写data// 修改图例组件 文字颜色textStyle: {color: "#4c9bfd"},// 这个10% 必须加引号right: "10%"},grid: {top: "20%",left: "3%",right: "4%",bottom: "3%",show: true, // 显示边框borderColor: "#012f4a", // 边框颜色containLabel: true // 包含刻度文字在内},xAxis: {type: "category",boundaryGap: false,data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],axisTick: {show: false // 去除刻度线},axisLabel: {color: "#4c9bfd" // 文本颜色},axisLine: {show: false // 去除轴线}},yAxis: {type: "value",axisTick: {show: false // 去除刻度线},axisLabel: {color: "#4c9bfd" // 文本颜色},axisLine: {show: false // 去除轴线},splitLine: {lineStyle: {color: "#012f4a" // 分割线颜色}}},series: [{name: "新增粉丝",type: "line",// true 可以让我们的折线显示带有弧度smooth: true,data: yearData[0].data[0]},{name: "新增游客",type: "line",smooth: true,data: yearData[0].data[1]}]};// 3. 把配置给实例对象myChart.setOption(option);// 4. 让图表跟随屏幕自动的去适应window.addEventListener("resize", function() {myChart.resize();});// 5.点击切换效果$(".line h2").on("click", "a", function() {// alert(1);// console.log($(this).index());// 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象// console.log(yearData[$(this).index()]);var obj = yearData[$(this).index()];option.series[0].data = obj.data[0];option.series[1].data = obj.data[1];// 需要重新渲染myChart.setOption(option);});
})();

3.效果

（点击2020和2019，图表发生相应变化）

二、折线图2

1.学习点

两个线的样式：下方渐进色填充+拐点设置

2.详细步骤

需求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轴相关配置

修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
x轴线的颜色为 rgba(255,255,255,.2)

     // 文本颜色为rgba(255,255,255,.6)  文字大小为 12axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: 12}},// x轴线的颜色为   rgba(255,255,255,.2)axisLine: {lineStyle: {color: "rgba(255,255,255,.2)"}},

需求4：修改y轴的相关配置

        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)"}}

需求5：修改两个线模块配置(注意在series 里面定制)

       //第一条 线是圆滑smooth: true,// 单独修改线的样式lineStyle: {color: "#0184d5",width: 2 },// 填充区域areaStyle: {// 渐变色，只需要复制即可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)"},// 设置拐点 小圆点symbol: "circle",// 拐点大小symbolSize: 8,// 设置拐点颜色以及边框itemStyle: {color: "#0184d5",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12},// 开始不显示拐点， 鼠标经过显示showSymbol: false,

       name: "转发量",type: "line",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",// 拐点大小symbolSize: 5,// 设置拐点颜色以及边框itemStyle: {color: "#00d887",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12},// 开始不显示拐点， 鼠标经过显示showSymbol: false,

需求6：更换数据

// 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"],
// series  第一个对象data数据data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
// series  第二个对象data数据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],

3.效果

ECharts可视化大屏学习笔记【4】（折线图）相关推荐

阿里云大数据认证——使用DataV制作实时销售数据可视化大屏-课堂笔记
原文链接:https://juejin.im/post/5c735004e51d45454b62dad5 阿里云Clouder认证五.使用DataV制作实时销售数据可视化大屏 1. 课程目标 (1) ...
数据大屏|基于Flask搭建数据可视化大屏1
项目概述本文主要基于Flask,ECharts等,利用疫情数据搭建可视化大屏,供加深印象学习.学习案例来源网上开源项目,这里进行逐一拆分复现. 应用技术:Python,Flask,ECharts,M ...
数据可视化：利用Python和Echarts制作“用户消费行为分析”可视化大屏
数据可视化:利用Python和Echarts制作"用户消费行为分析"可视化大屏前言实验目的: 准备工作: 一.创建项目: 二.建立数据库连接获取数据: 三.页面布局: 四.下载 ...
【可视化大屏设计学习1】正式开始建设可视化平台了，学习路径写下来！大家一起沟通呀！～
可视化大屏主要参考书籍:<写给ui设计师的数据可视化设计> 文章目录可视化大屏目前市面上的可视化大屏方式如何学习数据可视化设计产品能力交互能力设计能力数据能力可视化设计 ...
整理全网最全大屏，可视化大屏，可视化方案，可视化参考，报表，大屏设计，大屏资源，大屏学习，高保真大屏
整理全网最全大屏设计资源,包括各类智慧大屏,axure高保真大屏原型,大屏设计参考思路,大屏设计可视化图片,如何学习设计大屏等. Gitee仓库地址:https://gitee.com/AiShiYu ...
前端笔记：可视化大屏
数据可视化,可以让我们的眼睛对数据有一个更加直观的感知.而可视化大屏,更会给人带来一种高大上的.酷炫的.有科技感的感觉.尤其是在科技行业.投资行业.上市企业,可视化大屏用得比较多.下图是我制作的一份可 ...
数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)
数据可视化大屏电商数据展示平台一.前言二.项目介绍三.项目展示四.项目经验分享 4.1 翻牌器 4.1.1 翻牌器-今日实时交易 4.1.2.翻牌器后端统计SUM函数的使用 4.2 不同时间指 ...
27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心
目录效果展示 1. 效果动图 2. 多种主题效果一. 确定需求方案 1. 屏幕分辨率 2. 部署方式二. 整体架构设计三. 编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1. 前端 ...
用python，flask，echarts实现豆瓣读书top250的爬取及可视化大屏
好的,我来为你讲解如何使用 Python.Flask 和 Echarts 实现豆瓣读书 Top250 的爬取和可视化大屏. 首先,你需要在你的电脑上安装 Python 和 Flask,并使用 pip ...

ECharts可视化大屏学习笔记【4】（折线图）

一、折线图1

1.学习点

2.详细步骤

3.效果

二、折线图2

1.学习点

2.详细步骤

3.效果

ECharts可视化大屏学习笔记【4】（折线图）相关推荐

最新文章

热门文章