Echarts实战案例代码(43):折线图中splitLine配置数据自动分组分段显示效果的解决方案

简介: Echarts实战案例代码(43):折线图中splitLine配置数据自动分组分段显示效果的解决方案

项目需求:

在折线图中,需要将数据自动以分割线分成4组,显示趋势。


解决方案:

  1. 在X轴的splitLine属性中设置 interval,解决分割线显示的问题;
  2. 前端ajax返回res.data后,将其长度平均分割成4份; var modSl = parseInt(res.data.length / 4);
  3. 将分割后的数据 modSl传递到echarts中;


实现代码:

        xAxis: {
            type: 'category',
            boundaryGap: false,
            inverse: true,
            axisLabel: {
                show: true,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,.5)'
                }
            },
            splitLine: {
                show: true,
                interval: modSl,
                lineStyle: {
                    color: '#ccc',
                    type: 'solid',
                }
            },
            data: dataName
        },


Done!

相关文章
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
669 1
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
367 1
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
639 0
ECharts 蓝色系-荧光图标折线图01案例
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
677 0
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
1078 0
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
1816 0
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
1300 0
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
737 0
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
2866 1
微信小程序使用echarts图表(ec-canvas)
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码

热门文章

最新文章