echarts图表实现预测数据展示，前段数据显示实线，后段数据显示虚线,柱状图图表效果在底部

最新推荐文章于 2023-09-21 15:05:49 发布
置顶 最新推荐文章于 2023-09-21 15:05:49 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端小强踩坑之路 文章标签： echarts 图表虚实结合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hzq88888/article/details/120846243
版权

如图：

 

import _ from "lodash"
valdata的数据我未展示，数据格式为：valdata = [
    {aaa:111},{bbb:222},{ccc:333},{ddd:444},{eee:555},{fff:666}
]

getCaseNumberPic = (valData) => {
        var _this = this
        const xAxis = []
        valData.forEach(function (obj) {
            xAxis.push(obj.monthText)
        })
        const newHigh = []
        const dataRealHigh1 = []
        const dataRealHigh2 = []
        const newLow = []
        const dataRealLow1 = []
        const dataRealLow2 = []
        const newNormal = []
        const dataRealNormal1 = []
        const dataRealNormal2 = []
        valData.forEach(function (item) {
            if (item.isCalculate == 0) {
                dataRealHigh1.push({ value: item.highNum, total: item.inBaNum, isCalculate: item.isCalculate })
                dataRealLow1.push({ value: item.lowNum, total: item.inBaNum, isCalculate: item.isCalculate })
                dataRealNormal1.push({ value: item.normalNum, total: item.inBaNum, isCalculate: item.isCalculate })

            } else {
                dataRealHigh2.push({ value: item.highNum, total: item.inBaNum, isCalculate: item.isCalculate })
                dataRealLow2.push({ value: item.lowNum, total: item.inBaNum, isCalculate: item.isCalculate })
                dataRealNormal2.push({ value: item.normalNum, total: item.inBaNum, isCalculate: item.isCalculate })
            }
        })
        if (valData.length > 0) {
            const numAll = _.countBy(valData, function (num) {
                return num.isCalculate == 0 ? 'realNum' : 'foreNum';
            });
            const blankData = new Array(numAll.realNum - 1).fill({ value: '', total: "", isCalculate: 0 })
            const zeroData = new Array(1).fill({ value: 0, total: 0, isCalculate: 0 })
            newHigh.push(...blankData, ...zeroData, ...dataRealHigh2)
            newLow.push(...blankData, ...zeroData, ...dataRealLow2)
            newNormal.push(...blankData, ...zeroData, ...dataRealNormal2)
        }
        var option = {
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    color: 'rgba(0,0,0,0.65)',
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (param) {
                    var newData = []
                    param.forEach(function (obj) {
                        if (obj.data.value != '') {
                            newData.push(obj)
                        }
                    })
                    if (newData.length > 0) {
                        var newTip = ""
                        for (var i = 0; i < newData.length; i++) {
                            newTip = newTip + newData[i].marker + newData[i].seriesName + "：" + newData[i].data.value + "个" + "<br/>";
                        }
                        return newData[0].name + "总病例：" + "<br/>" + newData[0].data.total + "个" + "<br/>" + newTip
                    }
                }
            },
            legend: {
                bottom: 12,
                left: 0,
                textStyle: {//文字颜色
                    fontSize: 12,
                    color: 'rgba(0,0,0,0.65)'
                },
                selectedMode: false,
                itemWidth: 18,
                itemHeight: 6,
                itemGap: 16,
                data: ['高倍率', '低倍率', '正常倍率'],
            },
            grid: {
                x: 16,  //左
                y: 30,  //上
                x2: 24, //右
                y2: 45,  //下
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis,
                axisLabel: {
                    interval: 'auto',
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.45)',  //更改坐标轴文字颜色
                        fontSize: 12      //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#d9d9d9' //更改坐标轴颜色
                    },
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                name: '病案数(个)',
                nameTextStyle: {
                    color: 'rgba(0,0,0,0.45)',
                    fontSize: 12,
                    padding: [0, 0, 0, 50]
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#e8e8e8'],
                        width: 1,
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        align: 'right',
                        fontSize: 12     // 文字右对齐
                    },
                    color: "rgba(0,0,0,0.45)",
                }
            },
            series: [
                {
                    name: '高倍率',
                    data: dataRealHigh1,
                    type: 'line',
                    z: 999999,
                    stack: '总量',
                    smooth: false,
                    symbol: 'emptyCircle',
                    showSymbol: true,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false // 顶端内容显示
                            },
                            color: "#4145d9",
                            lineStyle: {
                                color: "#4145d9"
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            origin: 'start',
                            color: '#4145d9',
                        }
                    }
                },
                {
                    name: '高倍率',
                    type: 'line',
                    stack: '总量',
                    smooth: false,
                    symbol: 'emptyCircle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false // 顶端内容显示
                            },
                            color: "#4145d9",
                            lineStyle: {
                                width: 2,
                                color: '#4145d9',
                                type: 'dashed'
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            origin: 'start',
                            color: '#fff'
                        }
                    },
                    data: newHigh,
                },
                {
                    data: dataRealLow1,
                    name: '低倍率',
                    type: 'line',
                    stack: '总量',
                    z: 999999,
                    smooth: false,
                    symbol: 'emptyCircle',
                    showSymbol: true,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false // 顶端内容显示
                            },
                            color: "#bfc1ff",
                            lineStyle: {
                                color: "#bfc1ff"
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            origin: 'start',
                            color: '#bfc1ff'
                        }
                    }
                },
                {
                    name: '低倍率',
                    type: 'line',
                    stack: '总量',
                    smooth: false,
                    symbol: 'emptyCircle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false // 顶端内容显示
                            },
                            color: "#bfc1ff",
                            lineStyle: {
                                width: 2,
                                color: '#bfc1ff',
                                type: 'dashed'
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            origin: 'start',
                            color: '#fff'
                        }
                    },
                    data: newLow,
                },
                {
                    data: dataRealNormal1,
                    name: '正常倍率',
                    type: 'line',
                    stack: '总量',
                    z: 999999,
                    smooth: false,
                    symbol: 'emptyCircle',
                    showSymbol: true,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false // 顶端内容显示
                            },
                            color: "#8c8fff",
                            lineStyle: {
                                color: "#8c8fff"
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            origin: 'start',
                            color: '#8c8fff'
                        }
                    }
                },
                {
                    name: '正常倍率',
                    type: 'line',
                    stack: '总量',
                    smooth: false,
                    symbol: 'emptyCircle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false // 顶端内容显示
                            },
                            color: "#8c8fff",
                            lineStyle: {
                                width: 2,
                                color: '#8c8fff',
                                type: 'dashed'
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            origin: 'start',
                            color: '#fff'
                        }
                    },
                    data: newNormal,
                },
            ],
        };
        var caseNumberPic = echarts.init(document.getElementById('caseNumberPic'));
        caseNumberPic.clear()
        caseNumberPic.setOption(option);
        window.addEventListener("resize", function () {
            caseNumberPic.resize();
        });
    }

柱状图效果展示：

getHostpitalTredPic = (valData) => {
        const xAxis = [];
        valData.forEach(function (obj) {
            xAxis.push(obj.monthText)
        })
        const newProfitFee = []
        const dataRealProfitFee1 = []
        const dataRealProfitFee2 = []
        valData.forEach(function (item) {
            if (item.isCalculate == 0) {
                dataRealProfitFee1.push({ value: item.profitFeeTotal, isCalculate: item.isCalculate })
            } else {
                dataRealProfitFee2.push({ value: item.profitFeeTotal, isCalculate: item.isCalculate })
            }
        })
        if (valData.length > 0) {
            const numAll = _.countBy(valData, function (num) {
                return num.isCalculate == 0 ? 'realNum' : 'foreNum';
            });
            const blankData = new Array(numAll.realNum).fill({ value: '', isCalculate: 0 })
            newProfitFee.push(...blankData, ...dataRealProfitFee2)
        }
        var option = {
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    color: 'rgba(0,0,0,0.65)',
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (param) {
                    var newData = []
                    param.forEach(function (obj) {
                        if (obj.data != '') {
                            newData.push(obj)
                        }
                    })
                    if (newData.length > 0) {
                        var newTip = ""
                        for (var i = 0; i < newData.length; i++) {
                            if (newData[i].borderColor == undefined) {
                                if (newData[i].value >= 0) {
                                    newTip = newTip + newData[i].marker + '结余' + "：" + newData[i].value + '元' + "<br/>";
                                } else {
                                    newTip = newTip + newData[i].marker + '超支' + "：" + newData[i].value + '元' + "<br/>";
                                }

                            } else {

                                if (newData[i].value >= 0) {
                                    let iconSty = `<span style=display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background:#5bdfd7></span>`
                                    newTip = newTip + iconSty + '结余' + "：" + newData[i].value + '元' + "<br/>";
                                } else {
                                    let iconSty = `<span style=display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background:#31c4f5></span>`
                                    newTip = newTip + iconSty + '超支' + "：" + newData[i].value + '元' + "<br/>";
                                }

                            }
                            return newData[0].name + "：" + "<br/>" + newTip
                        }
                    }
                }
            },
            legend: {
                bottom: 12,
                left: 0,
                icon: 'square',
                textStyle: {//文字颜色
                    fontSize: 12,
                    color: 'rgba(0,0,0,0.65)'
                },
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 16,
                selectedMode: false
            },
            grid: {
                x: 16,  //左
                y: 30,  //上
                x2: 24, //右
                y2: 45,  //下
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                // boundaryGap: false,
                data: xAxis,
                axisLabel: {
                    interval: 'auto',
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.45)',  //更改坐标轴文字颜色
                        fontSize: 12      //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#d9d9d9' //更改坐标轴颜色
                    },
                    onZero: false
                }
            },
            yAxis: {
                name: '金额(元)',
                type: 'value',
                nameTextStyle: {
                    color: 'rgba(0,0,0,0.45)',
                    fontSize: 12,
                    padding: [0, 0, 0, 30]
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#e8e8e8'],
                        width: 1,
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        align: 'right',
                        fontSize: 12     // 文字右对齐
                    },
                    color: "rgba(0,0,0,0.45)",
                }
            },
            series: [
                {
                    name: '结余',
                    color: '#5bdfd7',
                    data: dataRealProfitFee1,
                    type: 'bar',
                    barWidth: 12,
                    z: 999999,
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false // 顶端内容显示
                            },
                            color: function (param) {
                                if (param.value >= 0) {
                                    return "#5bdfd7"
                                } else {
                                    return "#31c4f5"
                                }
                            },
                        }
                    },

                },
                {
                    name: '超支',
                    color: '#31c4f5',
                    type: 'bar',
                    barWidth: 12,
                    stack: '总量',
                    data: newProfitFee.map(item => {
                        return {
                            value: item.value,
                            itemStyle: {
                                normal: {
                                    // label: {
                                    //     show: false // 顶端内容显示
                                    // },
                                    borderColor: item.value >= 0 ? '#5bdfd7' : '#31c4f5',
                                    borderType: 'dashed',
                                    color: 'transparent'

                                }
                            },
                        }
                    })
                },
            ],
        };
        var hostpitalTredPic = echarts.init(document.getElementById('hostpitalTredPic'));
        hostpitalTredPic.clear()
        hostpitalTredPic.setOption(option);
        window.addEventListener("resize", function () {
            hostpitalTredPic.resize();
        });
    }

℡仅此、而已
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
源码 - flask 和 echarts 使用柱状图折线图等可视化图表展示二手房统计数据
01-09
一、实战场景 二、知识点 python 基础语法 python 文件读写 pandas 数据处理 flask web 框架 ...echarts 渲染柱状图 各面积区间房屋占比饼状图 echarts 渲染饼状图 运行结果 运行截图 数据示例
echarts柱状图根据不同颜色，反映数据涨跌趋势
wozhenhaokan的博客
04-11 1759
拿到这样一个需求，用柱状图展示商品不同日期的不同价格，并且需要反映出数据的涨跌（红色柱子表示同比前一天上涨，绿色柱子表示同比前一天下跌），类似股票的展现形式。 实现出来的效果是这样的 老样子，文字说明都在代码注释里，vue项目直接跑 <template> <!-- echarts柱状图根据不同颜色，反映数据涨跌趋势 --> <div id="main" ref="charts"></div> </template>
echarts折线图（预测图）预测部分为虚线，实际部分为实线（一条线一半虚线一半实线）
最新发布
weixin_44705979的博客
09-21 1872
【代码】echarts折线图（预测图）预测部分为虚线，实际部分为实线（一条线一半虚线一半实线）
前端vue中利用echarts实现折线图前半段数据实线后半段数据虚线
weixin_51782550的博客
07-13 852
type:'dotted' //'dotted'虚线 'solid'实线。type:'solid' //'dotted'虚线 'solid'实线。smooth:false, //关键点，为true是不支持虚线的，实线就用true。// symbol: "circle", //折线点设置为实心点。// symbol: "circle", //折线点设置为实心点。type: "line", //bar:柱状 line:折线图。type: "line", //bar:柱状 line:折线图。
echarts实现高通量功能预测 Procrustes图
monkey_xiaoda的博客
10-26 566
echarts实现高通量功能预测 Procrustes图
echarts 折线图 一半虚线一半实线
markRoyce的博客
03-13 1189
echarts 折线图 --- 根据服务端返回的数据列表字段来判断是否是历史数据，还是未来数据，历史数据展示为实现，未来数据展示为虚线，虚线实线之间平滑过渡。
jQuery echarts柱状图数据统计图表插件
06-10
比较简单实用的一款jQuery echarts柱状图数据统计图表插件，可用于产品销售数据统计等，还可以将图表保存为图片。
jQuery echarts柱状图数据统计图表插件.zip
07-11
代码片段： body, html { width: 99%; height: 99%; font-family: "arial, helvetica, sans-serif"; font-size: x-large; font-kerning: inherit; font-stretch: expanded; }
WPF 数据可视化 大屏展示 实现地图仿echarts模拟迁移效果 Telerik图表 仪表盘
04-03
分数已被csdn修改，我也无法修改分数，过高无法下载请...WPF 数据可视化 大屏展示 实现地图仿echarts模拟迁移效果 Telerik图表 仪表盘 效果图https://blog.csdn.net/shishuwei111/article/details/79486365#comments
ASP.NET绑定sql数据库采用echarts显示数据图表(实现了柱状图和饼图).zip
12-12
ASP.NET绑定sql数据库采用echarts显示数据图表，已封装成类文件
echarts预测、渐变、警界线 实例.rar
06-08
echarts预测、渐变、警戒线 实例
eCharts 走势图
07-30
eCharts图标设计 。。制作走势图,这是本人整理出来，写了几个实例
echarts折线图实线加虚线
GoodIdea
03-03 3733
请将如下代码粘贴至echarts官网测试环境测试：http://echarts.baidu.com/examples/editor.html?c=line-simple option = { title: { text: 'echarts折线图实线加虚线' }, //用formatter回调函数显示多项数据内容 tooltip: { ...
echarts 数据展示 随后端数据变化而变化 showData多的展示为其他
qq_45823368的博客
04-21 183
【代码】echarts 数据展示 showData多的展示位其他。
Echarts饼图
weixin_43166729的博客
10-10 177
Echarts饼图 <template> <div :id="id"></div> </template> <script> import * as echarts from "echarts"; export default { name: "bt", props: { id: String, title:String, seriesData:Array }, data() { return {
springboot+mongodb+python+echarts数据分析与预测
rankiy的博客
05-06 1101
实验室检测数据展示与预测 目标：数据监测与数据预测 系统：centos7 docker发布 展示方式：使用echarts展示，数据实时监测制作模型，指标分析模型，回归模型 方法：1、从mongodb取值，制作数据模型， 2、调用python算法进行数据的计算及展示 pom.xml配置，回载模块 <dependency> <groupId>org.springframework.boot</groupId> <arti
预测股市？echart折线图展示CPI，PPI剪刀差和股市的关系
与梦同行的博客
11-14 705
预测股市？财富自由？韭菜的春天到底在哪里？做个echart图表分析一下吧！
echarts折线渐变 + 预测值
山野里的小菊花
06-26 4018
先来个效果图原理：使用echarts创建一个折线图，渐变原理是使用虚拟地图visualMap，预测值是使用了两条线（第一根实线，最后一个值为空，第二根虚线，只保留最后一个值）1、下载echarts-all-3.js...
在vue中使用echarts实现动态数据展示,以及echarts图表自适应
05-19
使用ECharts实现动态数据展示可以通过以下步骤： 1. 引入ECharts库和Vue-ECharts组件库。 ```javascript import echarts from 'echarts' import 'echarts-gl' import 'vue-echarts/components/ECharts.vue' ``` 2. 在Vue组件中注册ECharts组件。 ```javascript export default { name: 'EChartsDemo', components: { 'v-chart': ECharts }, data() { return { option: {...} // ECharts配置项 } } } ``` 3. 在Vue组件中定义一个定时器，用于动态更新ECharts数据。 ```javascript mounted() { setInterval(() => { // 更新ECharts数据 this.option.series[0].data = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100] }, 1000) } ``` 至于ECharts图表自适应，可以通过以下方法实现： 1. 在ECharts配置项中使用`grid`属性设置图表布局。 ```javascript option: { grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, ... } ``` 2. 在Vue组件中通过CSS样式设置ECharts图表容器的宽度和高度。 ```css .echarts-container { width: 100%; height: 100%; } ``` 3. 在Vue组件的`mounted`钩子函数中监听窗口大小变化事件，并重新渲染ECharts图表。 ```javascript mounted() { window.addEventListener('resize', this.handleResize) }, methods: { handleResize() { this.$refs.chart.resize() } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值