ECharts数据可视化折线图
2024-04-18 18:06:11
销售统计( sales )-线形图
实现步骤：
- 寻找官方的类似示例，给予分析, 引入到HTML页面中
- 按照需求来定制它。
第一步：寻找官方的类似示例，给予分析。
官方参考示例：
链接: Examples - Apache ECharts.
旧版本官方参考示例：
链接: Documentation - Apache ECharts
完整js代码
// 销售统计模块
(function() {// (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]],quarter: [[23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],[43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]],month: [[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]],week: [[43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],[32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]]};// 1. 实例化对象var myChart = echarts.init(document.querySelector(".line"));// 2. 指定配置和数据var option = {color: ["#00f2f1", "#ed3f35"],tooltip: {// 通过坐标轴来触发trigger: "axis"},legend: {// 距离容器10%right: "10%",// 修饰图例文字的颜色textStyle: {color: "#4c9bfd"}// 如果series 里面设置了name，此时图例组件的data可以省略// data: ["邮件营销", "联盟广告"]},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"},// 去除x坐标轴的颜色axisLine: {show: false}},yAxis: {type: "value",// 去除刻度axisTick: {show: false},// 修饰刻度标签的颜色axisLabel: {color: "#4c9bfd"},// 修改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);// 4. tab切换效果制作// (2) 点击切换效果$(".sales .caption").on("click", "a", function() {// 此时要注意这个索引号的问题index = $(this).index() - 1;// 点击当前a 高亮显示 调用active$(this).addClass("active").siblings("a").removeClass("active");// 拿到当前a 的自定义属性值// console.log(this.dataset.type);// 根据拿到的值 去找数据// console.log(data.year);// console.log(data["year"]);// console.log(data[this.dataset.type]);var arr = data[this.dataset.type];// console.log(arr);// 根据拿到的数据重新渲染 series里面的data值option.series[0].data = arr[0];option.series[1].data = arr[1];// 重新把配置好的新数据给实例对象myChart.setOption(option);});// 5. tab栏自动切换效果// 开启定时器每隔3s，自动让a触发点击事件即可var as = $(".sales .caption a");var index = 0;var timer = setInterval(function() {index++;if (index >= 4) index = 0;as.eq(index).click();}, 1000);// 鼠标经过sales，关闭定时器，离开开启定时器$(".sales").hover(function() {clearInterval(timer);},function() {clearInterval(timer);timer = setInterval(function() {index++;if (index >= 4) index = 0;as.eq(index).click();}, 1000);});// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();
**第二步：**按照需求来定制它。
需求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
- 剔除坐标轴线颜色（将来使用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}}]
总结：现在给的是年份数据，还需要切换效果
实现步骤：
准备切换需要依赖的数据 4组
绑定点击事件
切换激活 tab 的样式
切换图表依赖的数据（重新渲染图表）开启定时器，进行切换， 鼠标经过sales停止定时器，离开开启定时器
第一步：准备数据，使用数据
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]],quarter: [[23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],[43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]],month: [[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]],week: [[43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],[32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]]}
series: [{name:'预期销售额',data: data.year[0],type: 'line',smooth: true,itemStyle: {color: '#00f2f1'}},{name:'实际销售额',data: data.year[1],type: 'line',smooth: true,itemStyle: {color: '#ed3f35'}}]
第二步：点击后切换
// 切换$('.sales').on('click', '.caption a', function(){// 样式$(this).addClass('active').siblings().removeClass('active')// currData 当前对应的数据 // this.dataset.type 标签上的data-type属性值，对应data中的属性 var currData = data[this.dataset.type]// 修改图表1的数据option.series[0].data = currData[0]// 修改图表2的数据 option.series[1].data = currData[1]// 重新设置数据 让图标重新渲染 myChart.setOption(option)})
第三步：tab栏自动切换效果
- 开启定时器每隔3s，自动让a触发点击事件即可
- 鼠标经过sales，关闭定时器，离开开启定时器
var as = $(".sales .caption a");var index = 0;var timer = setInterval(function() {index++;if (index >= 4) index = 0;as.eq(index).click();}, 1000);// 鼠标经过sales，关闭定时器，离开开启定时器$(".sales").hover(function() {clearInterval(timer);},function() {clearInterval(timer);timer = setInterval(function() {index++;if (index >= 4) index = 0;as.eq(index).click();}, 1000);});
自动缩放
// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
vue项目 - 实现自适应部分
// vue - 实现自适应部分this.resizefun = () => {// echarts.init(document.getElementById('myChart')).resize()this.myChart.resize()}// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener('resize', this.resizefun)
ECharts数据可视化折线图相关推荐
- Vue+Echarts数据可视化(面积图)
Vue+Echarts数据可视化(面积图) 最近公司开发需要使用Echarts来进行数据展示,稍微记录一下.先看效果图: 话不多说,直接上代码: 1.使用npm下载安装Echarts依赖(下载速度慢可 ...
- 数据可视化——折线图、地图、动态柱状图案例
目录 前提: 一.折线图可视化案例 二.地图可视化案例 三.动态柱状图可视化案例 前提: 如果想要做出数据可视化效果图, 可以借助pyecharts模块来完成. 安装pyecharts模块步骤: 1. ...
- python画柱状图和折线图-Python数据可视化–折线图–柱状图
from matplotlib import pyplot import random x = list(range(0,100)) y = [random.randint(0,100) for r ...
- python 柱状图折线图共用一个图例_Python数据可视化–折线图–柱状图
from matplotlib import pyplot import random x = list(range(0,100)) y = [random.randint(0,100) for r ...
- 数据处理-数据可视化-折线图的绘制/柱状图绘制（指数级坐标轴）（python版）
一:折线图的绘制 #encoding=utf-8 import matplotlib.pyplot as plt plt.rcParams['font.sans-serif'] = ['Arial U ...
- Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色 柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
- echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- 三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
- Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
最新文章
- nokia s40 java软件_Nokia S40主题制作 v1.0
- 人月神话阅读笔记之一
- javascript之作用域与预解析
- oracle什么时候需要commit
- 第一次团队内部比赛总结
- 解决笔记本重装问题（VISTA系统改为XP系统）
- Java使用Apache CXF开发Web Service
- 数列分块入门 3（LibreOj-6279）
- IT男的”幸福”生活续8
- js动态创建元素和删除
- 思考题1（雇员、部门、领导）
- /etc/resolv.conf
- return可以返回多个值_JDK10的新特性：var泛型和多个接口实现
- 锁相环环路滤波器计算公式_锁相环和射频振荡器简介
- Scratch妙笔生花
- 2022年中国数字孪生城市市场分析：孪生城市产业经济全域协作
- 网络管理与维护基本知识
- 汉字字形码是计算机用来实现对汉字的输出,汉字编码字形码
- TalkingData
- 使用canvas实现贪吃蛇