遍历多个多Y轴折线图

最新推荐文章于 2024-07-18 15:47:18 发布
最新推荐文章于 2024-07-18 15:47:18 发布
阅读量91 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38999134/article/details/131935870
版权 
<el-row :gutter="20">
     <el-col :span="8" v-for="item in orderlist" :key="item.id">
         <div>零件号：{{item.lingjianhao}}</div>
         <div>模具编号：{{item.muju}}</div>
         <div>模型架号：{{item.muxing}}</div>
         <div>浇注开始：{{item.kaishi}}</div>
         <div>浇注结束：{{item.jieshu}}</div>
         <div class="chartsheight orderChart" ></div>
     </el-col>
 </el-row>

// 遍历出多Y 轴折线图
        draworderline(){
            var echarts = require("echarts");
            var colors = ['#5793f3', '#d14a61', '#675bba'];
            var orderChart = document.getElementsByClassName('orderChart'); // 对应地使用ByClassName
            for(var i = 0;i < orderChart.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素
                var myChart = echarts.init(orderChart[i]);
                let Ydata=[];
                // 遍历多Y轴
                for (let n = 0, l = this.orderlist[i].legenddata.length; n < l; n++) {
                    Ydata.push({
                        type: 'value',
                        name: this.orderlist[i].legenddata[n],
                        axisLine: {
                            lineStyle: {
                                color: colors[n]
                            }
                        },
                        offset: (Ydata.length + 1) <= 2 ? 0 : (Math.ceil((Ydata.length + 1) / 2) - 1) * 40,
                        axisLabel: {
                            formatter: function(value) {
                                return value 
                            }
                            // formatter: '{value} ml'
                        }
                    })
                }
                myChart.setOption({
                    color: colors,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    grid: {
                        right: '20%'
                    },
                    legend: {
                        data: this.orderlist[i].legenddata,
                        // data:['蒸发量','降水量','平均温度']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: this.orderlist[i].xAxisdata,
                            // data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis: Ydata,
                    // yAxis: [
                        // {
                        //     type: 'value',
                        //     name: '蒸发量',
                        //     axisLine: {
                        //         lineStyle: {
                        //             color: colors[0]
                        //         }
                        //     },
                        //     axisLabel: {
                        //         formatter: '{value} ml'
                        //     }
                        // },
                        // {
                        //     type: 'value',
                        //     name: '降水量',
                        //     offset: 60,
                        //     axisLine: {
                        //         lineStyle: {
                        //             color: colors[1]
                        //         }
                        //     },
                        //     axisLabel: {
                        //         formatter: '{value} ml'
                        //     }
                        // },
                        // {
                        //     type: 'value',
                        //     name: '平均温度',
                        //     axisLine: {
                        //         lineStyle: {
                        //             color: colors[2]
                        //         }
                        //     },
                        //     axisLabel: {
                        //         formatter: '{value} °C'
                        //     }
                        // }
                    // ],
                    series:this.orderlist[i].yAxisdata,
                    // series: [
                    //     {
                    //         name:'蒸发量',
                    //         type:'line',
                    //         data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    //     },
                    //     {
                    //         name:'降水量',
                    //         type:'line',
                    //         yAxisIndex: 1,
                    //         data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    //     },
                    //     {
                    //         name:'平均温度',
                    //         type:'line',
                    //         yAxisIndex: 2,
                    //         data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    //     }
                    // ]


                },true)
            }
        },

// 顺序折线图
        orderlist:[
            {
                lingjianhao:'奔驰左前座椅',
                muju:'BZQ1',
                muxing:'89',
                kaishi:'2023-07-17 22:03:50.000',
                jieshu:'2023-07-20 22:03:50.000',
                legenddata:['蒸发量','降水量','平均温度'],
                xAxisdata: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                yAxisdata:[
                    {
                        name:'蒸发量',
                        type:'line',
                        yAxisIndex: 0,
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name:'降水量',
                        type:'line',
                        yAxisIndex: 1,
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name:'平均温度',
                        type:'line',
                        yAxisIndex: 2,
                        data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            },
            {
                lingjianhao:'奔驰左前座椅',
                muju:'BZQ1',
                muxing:'89',
                kaishi:'2023-07-17 22:03:50.000',
                jieshu:'2023-07-20 22:03:50.000',
                legenddata:['温度','湿度','速度'],
                xAxisdata: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                yAxisdata:[
                    {
                        name:'温度',
                        type:'line',
                        yAxisIndex: 0,
                        data:[122.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name:'湿度',
                        type:'line',
                        yAxisIndex: 1,
                        data:[102.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name:'速度',
                        type:'line',
                        yAxisIndex: 2,
                        data:[200.0, 2.2, 3.3, 4.5, 6.3, 10.2, 120.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            },
            {
                lingjianhao:'奔驰左前座椅',
                muju:'BZQ1',
                muxing:'89',
                kaishi:'2023-07-17 22:03:50.000',
                jieshu:'2023-07-20 22:03:50.000',
                legenddata:['电流','电压','压力'],
                xAxisdata: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                yAxisdata:[
                    {
                        name:'电流',
                        type:'line',
                        yAxisIndex: 0,
                        data:[2.0, 4.9, 7.0, 123.2, 25.6, 76.7, 135.6, 162.2, 32.6, 120.0, 60.4, 3.3]
                    },
                    {
                        name:'电压',
                        type:'line',
                        yAxisIndex: 1,
                        data:[2.6, 5.9, 9.0, 426.4, 238.7, 70.7, 175.6, 182.2, 48.7, 88.8, 6.0, 2.3]
                    },
                    {
                        name:'压力',
                        type:'line',
                        yAxisIndex: 2,
                        data:[2.0, 290.2, 3.3, 4.5, 6.3, 240.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            },
33455432
关注
Python-Matplotlib折线图绘制----y轴刻度不同 ＜lpliner＞
wuda19920215的博客
02-05 2650
背景 之前记录过关于直线图绘制函数的封装，现在补充剩余的部分，多种数据绘制在同一表格中，且每组数据的刻度不同 目录 Code 示例 总结 Code import random from matplotlib import pyplot as plt from mpl_toolkits.axisartist.parasite_axes import HostAxes, ParasiteAxes def plt_price(x: dict, y: Union[dic
echarts 折线图 设置y轴最小刻度_详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化...
weixin_39586395的博客
11-20 772
1、背景前段时间公司有个需求，需要在一个图表中展示两条折线，并且绘制出两条线的交点。为了满足需求大哥的需求，我也是着实想了有一会。下面我就把具体的实现过程给大家展示一下。1.1、ECharts 简介个人很喜欢Echarts这个图表库，就先给大家介绍一下，方便大家更好的了解。ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏...
echarts series的遍历生成
xixi_csdn的博客
06-22 1784
图片 let dataObj1 = [ { name: '合同总数', data: [63, 38, 40] }, { name: '审批记录总数', data: [20, 32, 10] }, { name: '已审批数量', data: [68, 33, 86] }, { name: '已付款数量', data: [18, 36, 86] }, ] let wagesChart = self.$echarts.in
循环遍历echarts
最新发布
weixin_54514048的博客
07-18 330
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']text: 'ECharts 入门示例'// 使用刚指定的配置项和数据显示图表。name: '销量',data: ['销量']// 指定图表的配置项和数据。
Echarts数据渲染并循环遍历
m0_59547707的博客
03-02 3524
HTML <!-- echart图表 --> <div class="echart_box" v-for="(item, index) in chartList" :key="index"> <div class="echart_con"> <div> 审批中(件):<span>{{ item.applyd }}</span> </div> .
关于Echarts饼图循环series里data
m0_72904826的博客
04-19 1463
第二步：直接创建 此处color我使用的是渐变色 legend的设置是为了显示上面数据下面昵称的需求。第一步：先将需要循环的series置空 循环你想要的数组(ps:此处我的数组为ytgsList)title里是是在环形中央显示文字信息 series里的data直接用上面循环里做的就好了。此处为效果图 根据接口返回的数据进行循环。第三步：创建并设置其自适应窗口大小。
echarts_series总结，echarts-series总结，series总结
imkaifan的博客
06-02 674
echarts_series总结，echarts-series总结，series总结
d3.js实现自定义多y轴折线图的示例代码
10-18
而多y轴折线图是数据可视化中的一种常见类型，特别适合展示具有多个变量的数据集。在某些应用场景中，需要将几个变量在同一图表中进行比较，这要求y轴有多个，且各个y轴的刻度可能不同。 本文介绍如何使用d3.js实现...
python双y轴的折线图_python matplotlib实现双Y轴的实例
weixin_39523280的博客
12-04 2746
python matplotlib实现双Y轴的实例如下所示：import matplotlib.pyplot as pltimport numpy as npx = np.arange(0., np.e, 0.01)y1 = np.exp(-x)y2 = np.log(x)fig = plt.figure()ax1 = fig.add_subplot(111)ax1.plot(x, y1,'r',...
react d3 list数据画折线图 同一页面显示多个图表
sinat_40628756的博客
04-05 749
引用 我在用react做网页前端，目前的要求是：用d3在网页画折线图，并且同一页面显示花了的多个图表。 效果 实现 下面的实现只是思路以及核心代码，全部代码可移步Github. 首先说明一下数据，每个图表都是一个通道，每个通道里面的数据都是list，将所有数据存到本地json文件中。格式如下： { "0_channel":[ -4.89354133605957e-05, -8.702278137207031e-06, .......
在Vue 中实现循环渲染多个相同echarts图表
10-15
主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Echarts—折线图动态获取数据示例（java版本）
邓商羽的博客
06-27 5713
最终效果 饼状图：饼状图示例，使劲点我！！！ 柱状图：柱状图实例，使劲点我！！！ 步骤：准备一个dom——>获取dom节点——>初始化——>绘制图表——>渲染数据 html代码 <template> <section class="chart-container"> <el-row> <el-badge ...
封装echarts折线图图表，根据动态数据来展示，区域渐变色，滑动条，x轴显示多少条
zyq_1020的博客
08-09 741
1.echarts.vue组件。
echarts 绘制多条折线图（横坐标，折线图条数不确定）
娃哈哈_的博客
04-07 9409
项目场景： 使用echarts做业务图表统计，记录一下在项目中图表接口返回的数据处理问题 需求描述 1、一个统计图中实现多条折现图的显示，如下图所示 2、后台返回的数据结构 let data = [ { rate:"0.1", date:"20210915", expressBrandName:"顺丰速运", expressBrandId:"SF", }, {
echarts中series中的数据如何如何循环显示数据
热门推荐
Mr.yang
07-04 2万+
echarts中的数据格式如下 var option = { title : { text: '月份对比', subtext: '' }, tooltip : { trigger: 'axis' }, legend: { data:['3月','4月','5月','6月'] }, toolbox: { show : false, feature : { dataView : {show: tru...
echarts中的series数据如何循环显示
稻花香的博客
08-08 8964
循环压入一个数组中，在给series赋值给这个数组变量名称： var series=[]; for(var i = 0;i<json.data.length;i++){ series.push({ name: arr_name[i], type: 'line', stack: '总量', ...
Echarts折线图获取数据库数据展示
Ron_的博客
05-23 2万+
Echarts折线图获取mysql中的数据展示
python怎么批量画出很多折线图
09-25
### 回答1： 你可以使用 Matplotlib 库来批量画出很多折线图。你可以使用循环来遍历数据集，并使用 Matplotlib 的 plot() 函数来绘制每个数据集的折线图。以下是一个示例代码： ```python import matplotlib.pyplot as plt # 数据集 data = [[1, 2, 3], [2, 4, 6], [3, 6, 9], [4, 8, 12]] # 循环遍历数据集并绘制折线图 for i in range(len(data)): plt.plot(data[i]) # 显示图形 plt.show() ``` 这段代码将绘制四个折线图，每个折线图都是由一个数据集绘制而成。你可以根据需要修改数据集和循环来绘制更多的折线图。 ### 回答2： 在使用Python批量绘制很多折线图时，可以使用循环结构和适当的数据集合。 首先，需要准备相关的数据集合。可以将需要绘制的折线图的数据存储在一个列表或者一个多维数组中，每个元素都代表一个折线图的数据。例如： data = [ [x1_values, y1_values], [x2_values, y2_values], ... ] 其中，x1_values和y1_values分别代表第一个折线图的横坐标和纵坐标数据，以此类推。 然后，可以使用循环结构遍历数据集合，并利用Matplotlib库来绘制折线图。具体步骤如下： 1. 导入Matplotlib库： ```python import matplotlib.pyplot as plt ``` 2. 遍历数据集合，并绘制每个折线图： ```python for i in range(len(data)): plt.plot(data[i][0], data[i][1]) ``` 其中，`data[i][0]`表示第i个数据对应的横坐标，`data[i][1]`表示第i个数据对应的纵坐标。 3. 可选地，可以添加标题、坐标轴标签等。 4. 可选地，可以保存绘制的折线图到文件中： ```python plt.savefig("path/to/save/figure.png") ``` 最后，调用`plt.show()`显示绘制的折线图。 这样，就可以使用Python批量绘制很多折线图了。需注意根据实际需求调整数据集合的形式，以及绘制其他风格和属性的折线图。 ### 回答3： 在Python中，可以使用matplotlib库来绘制折线图，并通过循环和列表等方法批量绘制很多折线图。 首先，你需要安装matplotlib库，可以使用pip命令在终端中安装：pip install matplotlib。 接下来，导入matplotlib库中的pyplot模块，一般以plt作为别名：import matplotlib.pyplot as plt。 然后，准备好需要绘制的数据集：可以将数据集存储在一个列表或者是一个嵌套列表中。每个列表中的元素代表一个折线图的数据点。也可以选择存储在一个字典或者是一个嵌套字典中，键为折线图的标签，值为对应的数据列表。 接下来，使用for循环遍历数据集，每次遍历取出一个数据集。 在for循环中，首先可以选择设置绘图窗口的大小plt.figure(figsize=(宽度, 高度))。 然后，使用plt.plot()函数来绘制折线图，传入数据集，可以传入参数来设置折线图的颜色、线型、标签等信息。 继续在for循环中，可以选择设置横坐标和纵坐标的标签plt.xlabel()和plt.ylabel()，设置折线图的标题plt.title()，设置图例plt.legend()等。 最后，使用plt.show()函数来显示绘制完成的折线图。 以下是一个简单示例代码，用于批量绘制多个折线图： ```python import matplotlib.pyplot as plt # 准备需要绘制的数据集 data_set = [[1, 2, 3, 4, 5], [2, 4, 6, 8, 10], [3, 6, 9, 12, 15], [4, 8, 12, 16, 20]] # 遍历数据集并绘制折线图 for data in data_set: # 设置绘图窗口的大小 plt.figure(figsize=(6, 4)) # 绘制折线图 plt.plot(data, label='Line') # 设置横坐标和纵坐标的标签 plt.xlabel('X-axis') plt.ylabel('Y-axis') # 设置折线图的标题 plt.title('Line Chart') # 设置图例 plt.legend() # 显示绘制完成的折线图 plt.show() ``` 运行以上代码，就可以批量绘制多个折线图。每个折线图对应一个数据集，可以根据具体需求更改数据集的内容、折线图的样式等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值