Echarts绘制折线图，超简单，源码点击即可运行！【文末源码地址】 |
您所在的位置：网站首页 › excel绘制多种风格折线图怎么做 › Echarts绘制折线图，超简单，源码点击即可运行！【文末源码地址】 |
Echarts绘制折线图，超简单，源码点击即可运行！【文末源码地址】
|
文章目录
前言Apache Echarts绘制基础折线图绘制带标记的折线图绘制多条折线图绘制带标签的折线图完整源码地址
前言
本文包含的代码仅为部分片段，完整源码有详细注释，可在文末领取！ 在当今数字化时代，数据可视化已成为一种必不可少的工具。它可以帮助我们更好地理解数据，从而做出更明智的决策。以下是数据可视化的一些重要性： 帮助我们更好地理解数据通过将数据可视化，我们可以更轻松地理解数据。图表和图形可以帮助我们发现数据中的模式、趋势和异常值，从而更好地理解数据。 帮助我们做出更好的决策通过可视化数据，我们可以更好地了解数据中的信息，从而做出更好的决策。例如，如果我们正在分析销售数据，我们可以使用可视化工具来查看哪些产品最畅销，哪些产品需要进一步推销。 帮助我们与他人分享数据通过将数据可视化，我们可以更好地与他人分享数据。图表和图形可以帮助我们向他人传达数据中的信息，使他们更容易理解数据。 Apache Echarts官网地址：https://echarts.apache.org/zh/index.html Apache Echarts 的优点： 官网提供超过200款图表案例基于 JavaScript 的开源可视化图表库提供详细的API文档方便查找图表配置本文就讲解如何用 Apache Echarts 绘制常见的折线图。 折线图： 折线图用于显示数值变量随时间变化的趋势。每个数据点表示一个时间点的值。 绘制基础折线图折线图如下：
图表包含内容有： 标题、图例、坐标轴当鼠标移动到折线图上会有提示框出现还可以将曲线设置为平滑源码展示： DOCTYPE html> flask+echarts项目 // 基于准备好的dom，初始化echarts实例 var myChart=echarts.init(document.getElementById('main')); // 自定义图表的宽高 // var myChart=echarts.init(document.getElementById('main'),null,{width:500,height:400}); // 跟随浏览器的宽度自适应图表大小 // var myChart=echarts.init(document.getElementById('main')); // window.addEventListener('resize',function(){myChart.resize();}); // 指定图表的配置项和数据 var option={ // 图表标题配置 title:{ text:'基础折线图' }, // 提示框组件 tooltip:{ // 是否显示提示框 show:true, // 触发类型，axis 移动到坐标轴就触发 trigger:'axis' }, // 图例配置项 legend:{ // 图例的数据数组， data:["销量"], }, // X 轴配置项 xAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'category', // 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // y 轴配置项 yAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'value', }, // 系列配置，根据不同图表有不同的配置 series:[ { // 系列名称，用于tooltip显示，legend图例筛选 name:'销量', // 图表类型 type:'line', // 数据内容 data:[150, 230, 224, 218, 135, 147, 260], // 是否平滑曲线显示 smooth: true } ] }; //使用刚指定的配置项和数据显示图像 myChart.setOption(option); 绘制带标记的折线图折线图如下：
图表包含内容有： 标题、图例、坐标轴当鼠标移动到折线图上会有提示框出现每条折线数据的最高点、最低点每条折现数据的平均值线源码展示： DOCTYPE html> flask+echarts项目 // 基于准备好的dom，初始化echarts实例 var myChart=echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option={ // 图表标题配置 title:{ text:'折线图' }, // 提示框组件 tooltip:{ // 是否显示提示框 show:true, // 触发类型，axis 移动到坐标轴就触发 trigger:'axis' }, // 图例配置项 legend:{}, // 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置 toolbox:{ // 各工具的配置项 feature:{ // 保存图片工具设置 saveAsImage:{show:true}, // 动态类型转换设置， magicType:{show:true,type:['line','bar']}, // 重置按钮 restore:{} } }, // X 轴配置项 xAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'category', // x轴标签与坐标轴刻度的位置：false对齐，true中间 boundaryGap:false, // 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // y 轴配置项 yAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'value', // 坐标轴刻度标签的相关设置。 axisLabel:{ formatter:"{value} °C" } }, // 系列配置，根据不同图表有不同的配置 series:[ { // 系列名称，用于tooltip显示，legend图例筛选 name:'Heighest', // 图表类型 type:'line', // 数据内容 data:[10, 11, 13, 11, 12, 12, 9], // 图表标注内容 markPoint:{ data:[ {type:"max",name:"最大值"}, {type:"min",name:"最小值"}, ] }, // 图线标注 markLine:{ data:[{type:"average",name:"平均值"}] } }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Lowest', // 图表类型 type:'line', // 数据内容 data:[1, -2, 2, 5, 3, 2, 0], // 图表标注内容 markPoint:{ data:[ {type:"min",name:"最小值"} ] }, // 图线标注 markLine:{ data:[{type:"average",name:"平均值"}] } }, ] }; //使用刚指定的配置项和数据显示图像 myChart.setOption(option); 绘制多条折线图折线图如下：
图表包含内容有： 标题、图例、坐标轴当鼠标移动到折线图上会显示多条折现数据提示框源码展示： DOCTYPE html> flask+echarts项目 // 基于准备好的dom，初始化echarts实例 var myChart=echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option={ // 图表标题配置 title:{ text:'折线图', subtext:'点击右上方图标试试' }, // 提示框组件 tooltip:{ // 是否显示提示框 show:true, // 触发类型，axis 移动到坐标轴就触发 trigger:'axis' }, // 图例配置项 legend:{ // 图例的数据数组， data:["Email","Union Ads","Video Ads","Direct","Search Engine"], }, // 直角坐标系内绘图网格 grid:{ // grid 组件离容器左侧的距离 left:"3%", // grid 组件离容器右侧的距离。 right:"3%", // grid 组件离容器下侧的距离 bottom:"3%", // grid 区域是否包含坐标轴的刻度标签。 containLabel:true }, // 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置 toolbox:{ // 各工具的配置项 feature:{ // 保存图片工具设置 saveAsImage:{show:true}, // 动态类型转换设置， magicType:{show:true,type:['line','bar','stack']} } }, // X 轴配置项 xAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'category', // x轴标签与坐标轴刻度的位置：false对齐，true中间 boundaryGap:false, // 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // y 轴配置项 yAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'value', }, // 系列配置，根据不同图表有不同的配置 series:[ { // 系列名称，用于tooltip显示，legend图例筛选 name:'Email', // 图表类型 type:'line', // 数据内容 data:[120, 132, 101, 134, 90, 230, 210], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Union Ads', // 图表类型 type:'line', // 数据内容 data:[220, 182, 191, 234, 290, 330, 310], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Video Ads', // 图表类型 type:'line', // 数据内容 data:[150, 232, 201, 154, 190, 330, 410], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Direct', // 图表类型 type:'line', // 数据内容 data:[320, 332, 301, 334, 390, 330, 320], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Search Engine', // 图表类型 type:'line', // 数据内容 data:[820, 932, 901, 934, 1290, 1330, 1320], // 是否平滑曲线显示 smooth: true } ] }; //使用刚指定的配置项和数据显示图像 myChart.setOption(option); 绘制带标签的折线图折线图如下：
图表包含内容有： 标题、图例、坐标轴折线图上展示数据标签当鼠标移动到折线图上会显示多条折现数据提示框源码展示： DOCTYPE html> flask+echarts项目 // 基于准备好的dom，初始化echarts实例 var myChart=echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option={ // 图表标题配置 title:{ text:'折线图', subtext:'点击右上方图标试试' }, // 提示框组件 tooltip:{ // 是否显示提示框 show:true, // 触发类型，axis 移动到坐标轴就触发 trigger:'axis' }, // 图例配置项 legend:{ // 图例的数据数组， data:["Email","Union Ads","Video Ads","Direct","Search Engine"], }, // 直角坐标系内绘图网格 grid:{ // grid 组件离容器左侧的距离 left:"3%", // grid 组件离容器右侧的距离。 right:"3%", // grid 组件离容器下侧的距离 bottom:"3%", // grid 区域是否包含坐标轴的刻度标签。 containLabel:true }, // 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置 toolbox:{ // 各工具的配置项 feature:{ // 保存图片工具设置 saveAsImage:{show:true}, // 动态类型转换设置， magicType:{show:true,type:['line','bar','stack']} } }, // X 轴配置项 xAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'category', // x轴标签与坐标轴刻度的位置：false对齐，true中间 boundaryGap:false, // 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // y 轴配置项 yAxis:{ // 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴 type:'value', }, // 系列配置，根据不同图表有不同的配置 series:[ { // 系列名称，用于tooltip显示，legend图例筛选 name:'Email', // 图表类型 type:'line', // 数据内容 data:[120, 132, 101, 134, 90, 230, 210], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Union Ads', // 图表类型 type:'line', // 数据内容 data:[220, 182, 191, 234, 290, 330, 310], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Video Ads', // 图表类型 type:'line', // 数据内容 data:[150, 232, 201, 154, 190, 330, 410], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Direct', // 图表类型 type:'line', // 数据内容 data:[320, 332, 301, 334, 390, 330, 320], // 是否平滑曲线显示 smooth: true }, { // 系列名称，用于tooltip显示，legend图例筛选 name:'Search Engine', // 图表类型 type:'line', // 添加标签 label:{ show:true, position:"top" }, // 数据内容 data:[820, 932, 901, 934, 1290, 1330, 1320], // 是否平滑曲线显示 smooth: true } ] }; //使用刚指定的配置项和数据显示图像 myChart.setOption(option); 完整源码地址链接：https://pan.baidu.com/s/1cNwjkaG1-nZQPqjcnWiDfA?pwd=8c9v 提取码：8c9v |
【本文地址】
今日新闻 |
推荐新闻 |