Echarts实战案例代码(44):同时渲染折线图实现和虚线渲染实现已发生和预测趋势的解决方案

简介: Echarts实战案例代码(44):同时渲染折线图实现和虚线渲染实现已发生和预测趋势的解决方案

解决思路

  1. 实线和虚线,都是折线图lineStyle固有的属性;
  2. 分成同样数据的两组series,一段为实线,一段为虚线;


Echarts代码

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: ["-", "-", "-", 934, 1290, 1330, 1320],
        connectNulls: true,
        lineStyle: {
            type: "dash"
        },
        label:{show:true,position:"top"},
        type: 'line'
    }, {
        data: [820, 932, 901, 934, "-", "-", "-"],
        connectNulls: true,
        label:{show:true,position:"top"},
        type: 'line'
    }]
};


方案存在的问题

  1. 在实际应用场景中,数据格式处理比较麻烦;
  2. 分理处,有数据重复,样式处理不是很友好。

Done!

相关文章
|
5天前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
18 0
|
5天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
71 2
|
5天前
|
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`异步绘制数据。
|
5天前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
5天前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
190 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
5天前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
5天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
63 0
|
5天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
33 0
|
5天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
5天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
20 0