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!

相关文章
|
25天前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
12 0
|
3月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
59 0
|
21天前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading 'setOption')`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
|
6天前
|
新零售 分布式计算 数据可视化
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
17 0
|
6天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
23 0
|
7天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
14 0
|
7天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
12 0
|
24天前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
2月前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
3月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
55 0