Vue Echarts 绘制多Y轴折线图

<template>
  <v-app>
    <v-main>
      <v-row>
        <v-col cols="12">
          <v-card height="600" class="ml-3 mt-3" flat>
            <div id="manyYAxisChart" style="height: 100%;width: 100%" class="mychart"></div>
          </v-card>
        </v-col>
      </v-row>
    </v-main>
  </v-app>
</template>

<script>
  export default {
    name: "EchartsManyYAxis",
    mounted() {
      this.drawManyYAxisChart();
    },
    methods: {
      drawManyYAxisChart(){
        //随机数生成
        // const a = Math.floor(Math.random() * (max - min + 1)) + min;
        //随机生成多个Y轴的数据
        let allData = [];
        //i为多少个Y轴的数据
        for (let i=0; i<9; i++){
          allData[i]=[];
          // j是有多少条数据
          for (let j=0; j<15; j++){
            let randomNum
            if (j === 0){
              randomNum = Math.floor(Math.random() * (300 - 1 + 1)) + 1;
    
### Vue3 中 Echarts 实现双 Y 折线图 为了在 Vue3 项目中使用 Echarts 创建带有两个不同 Y 折线图,需遵循特定配置方式。当构建 `option` 对象时,在 series 数组内指定第二个系列的数据源,并为其分配独立的 y 索引。 #### 初始化 Echarts 和 DOM 绑定 确保已正确安装并导入 Echarts 库到 Vue3 工程里[^4]。接着准备一个用于渲染图表的 div 容器: ```html <div ref="chartContainer" style="width: 100%; height: 400px;"></div> ``` #### 设置 Option 配置项 创建 option 对象来描述图表样式与行为。对于双 Y 的需求来说,重点在于定义两套不同的 yAxis 参数以及关联相应的 series 数据集[^2]。 ```javascript const options = { tooltip: { trigger: 'axis' }, legend: {}, xAxis: [ { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ { name: '温度 (°C)', type: 'value' }, { name: '湿度 (%)', type: 'value', position: 'right', offset: 80 // 如果需要调整右侧坐标位置可以设置偏移量 } ], series: [ { name: '最高温', type: 'line', data: [11, 11, 15, 13, 12, 13, 10], markPoint: {} }, { name: '最低湿', type: 'line', yAxisIndex: 1, // 关联至第二条纵 data: [70, 69, 75, 72, 70, 65, 73] } ] }; ``` 上述代码片段展示了如何通过设定 `yAxisIndex` 属性让某一系列绑定到另一个垂直方向上的尺度上。这样就可以在同一张图表里面展示具有不同类型数值范围的信息了。 #### 渲染图表实例 最后一步是在组件生命周期钩子函数(如 mounted())内部初始化 chart 实例并将之前构造好的选项传递进去完成绘制工作。 ```javascript import * as echarts from 'echarts'; export default defineComponent({ setup() { let chartInstance; onMounted(() => { const el = document.querySelector('#app .el-main'); if (!chartInstance && el) { chartInstance = echarts.init(el); chartInstance.setOption(options); } }); return {}; } }); ``` 以上就是关于怎样利用 EchartsVue3 上面搭建起拥有双重测量单位支持能力的折线图形界面的具体操作指南。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值